iOS 애플리케이션을 개발할 때 애니메이션 효과를 부여하는 경우에는 Core Animation 프레임워크를 사용할 수 있습니다. Core Animation은 기본 제공하는 타이밍 함수를 사용하여 애니메이션의 속도와 움직임 패턴을 조절할 수 있습니다. 이번 글에서는 Swift로 Core Animation의 타이밍 함수를 사용하는 방법에 대해 알아보겠습니다.
타이밍 함수란?
타이밍 함수는 애니메이션의 속도와 진행 패턴을 결정하는 함수를 말합니다. Core Animation은 다양한 기본 타이밍 함수를 제공하며, 이를 활용하여 애니메이션의 움직임을 부드럽게 만들 수 있습니다. 타이밍 함수는 주로 CAMediaTimingFunction 클래스를 사용하여 생성됩니다.
기본 타이밍 함수 사용하기
CAMediaTimingFunction 클래스는 다양한 타이밍 함수를 생성할 수 있는 메서드들을 제공합니다. 예를 들어, easeIn, easeOut, easeInOut 등의 함수는 주어진 시간에 따라 점진적으로 가속 또는 감속하도록 애니메이션을 만듭니다.
아래의 코드는 easeIn과 easeOut 타이밍 함수를 사용하여 뷰를 알파값에 따라 서서히 나타내고 사라지게 하는 예제입니다.
let animation = CABasicAnimation(keyPath: "opacity")
animation.fromValue = 0 // 초기 알파값
animation.toValue = 1 // 최종 알파값
animation.duration = 1 // 애니메이션 진행 시간
let easeInTimingFunction = CAMediaTimingFunction(name: .easeIn)
let easeOutTimingFunction = CAMediaTimingFunction(name: .easeOut)
animation.timingFunctions = [easeInTimingFunction, easeOutTimingFunction]
view.layer.add(animation, forKey: nil)
위의 코드에서 CAMediaTimingFunction(name: .easeIn)과 CAMediaTimingFunction(name: .easeOut)를 사용하여 easeIn과 easeOut 타이밍 함수를 생성하고, animation.timingFunctions에 배열로 설정해줍니다. 이렇게 함으로써 애니메이션이 시작되기 전에는 easeIn 타이밍 함수를 사용하여 시작되고, 애니메이션이 종료되기 전에는 easeOut 타이밍 함수를 사용하여 종료될 수 있도록 설정합니다.
커스텀 타이밍 함수 사용하기
뿐만 아니라, CAMediaTimingFunction 클래스는 직접 타이밍 함수의 제어점을 설정하여 커스텀 타이밍 함수를 생성할 수도 있습니다. 제어점은 제어패턴에 사용되는 베지어 곡선의 시작점과 끝점을 말합니다.
아래의 코드는 커스텀 타이밍 함수를 생성하는 예제입니다.
let controlPoints: [Float] = [0.2, 0.3, 0.8, 0.7] // 제어 패턴 설정
let timingFunction = CAMediaTimingFunction(controlPoints: controlPoints[0], controlPoints[1], controlPoints[2], controlPoints[3])
animation.timingFunction = timingFunction
위의 코드에서 CAMediaTimingFunction(controlPoints:)를 사용하여 커스텀 타이밍 함수를 생성하고, animation.timingFunction에 설정해줍니다. 이렇게 함으로써 제어 패턴을 원하는 대로 조정하여 원하는 타이밍 함수를 만들 수 있습니다.
마무리
이번 글에서는 Swift로 Core Animation의 타이밍 함수를 사용하는 방법에 대해 알아보았습니다. 기본 타이밍 함수와 커스텀 타이밍 함수를 활용하여 애니메이션의 속도와 움직임 패턴을 조절할 수 있습니다. 다양한 타이밍 함수를 활용하여 더욱 동적이고 부드러운 애니메이션을 구현해보세요!