iOS에서 꽤 멋지게 (QuadCurve)를 CALayer
따라 애니메이션을하고 CGPath
있습니다. 하지만 Apple에서 제공 하는 몇 가지 (EaseIn / EaseOut 등) 보다 더 흥미로운 여유 기능을 사용하고 싶습니다 . 예를 들어 바운스 또는 탄성 함수입니다.
MediaTimingFunction (bezier)으로 다음과 같은 작업을 수행 할 수 있습니다.
하지만 좀 더 복잡한 타이밍 함수 를 만들고 싶습니다 . 문제는 미디어 타이밍이 이러한 효과를 만들만큼 강력하지 않은 3 차 베 지어를 필요로한다는 것입니다.
(출처 : sparrow-framework.org )
위의 코드 를 만드는 코드 는 다른 프레임 워크에서 충분히 간단하므로 매우 실망 스럽습니다. 곡선은 시간 위치 곡선이 아니라 입력 시간을 출력 시간 (Tt 곡선)에 매핑합니다. 예를 들어 easeOutBounce (T) = t 는 새로운 t를 반환합니다 . 그런 다음 t 는 움직임 (또는 애니메이션을 적용해야하는 속성)을 그리는 데 사용됩니다.
그래서 복잡한 커스텀을 만들고 싶지만 CAMediaTimingFunction
어떻게해야할지 모르겠습니다. 가능하다면? 대안이 있습니까?
편집하다:
다음은 단계에 대한 구체적인 예입니다. 매우 교육적 :)
I는 점으로부터 선을 따라 애니메이션 오브젝트 할 에 B를 ,하지만 "바운스"easeOutBounce 위의 곡선을 사용하여 라인을 따라 그 움직임을 원한다. 즉 , a 에서 b 까지 정확한 라인을 따르지만 현재 베 지어 기반 CAMediaTimingFunction을 사용하여 가능한 것보다 더 복잡한 방식으로 가속 및 감속합니다.
해당 선을 CGPath로 지정된 임의의 곡선 이동으로 만들 수 있습니다. 여전히 해당 곡선을 따라 이동해야하지만 선 예제에서와 같은 방식으로 가속 및 감속해야합니다.
이론적으로는 다음과 같이 작동해야한다고 생각합니다.
이동 곡선을 키 프레임 애니메이션 move (t) = p로 설명 하겠습니다. 여기서 t 는 시간 [0..1], p 는 시간 t 에서 계산 된 위치 입니다. 따라서 move (0) 은 곡선의 시작 위치를 반환하고 , 정확한 중간을 이동 (0.5) 하고 끝에서 이동 (1) 을 반환합니다 . 타이밍 함수 time (T) = t 를 사용하여 이동에 대한 t 값 을 제공하면 원하는 것을 얻을 수 있습니다. 바운싱 효과의 경우 타이밍 함수는 time (0.8) 및 time (0.8)에 대해 동일한 t 값을 반환해야합니다.(단지 예). 다른 효과를 얻으려면 타이밍 기능을 교체하십시오.
(예, 앞뒤로 이동하는 4 개의 선분을 만들고 결합하여 선 바운싱을 수행 할 수 있지만 그럴 필요는 없습니다. 결국 시간 값을 위치에 매핑하는 단순한 선형 함수입니다 .)
여기서 말이 되길 바랍니다.