그럼 지난번에 이어 UIVIew Property Animation에 대해
나는 조사한 일을 총결하고 싶다.
UIVIewPropertyAnimator를 사용하여 기본 애니메이션을 구현하는 방법
마지막 UIVIEW Property Animation의 기본 요약① 을 참조하십시오.
마지막으로 UIVIewPropertyAnimator를 사용하여 애니메이션을 설정하는 방법
제가 기본적인 부분을 망라했어요.
앞으로
・ UITimingCurveProvider의 구체적인 동작
애니메이션 반전 방법
· 애니메이션을 여러 번 실행하는 방법
등의 전망.
가능하다면 저와 사귀세요.

이번에는 베지야 곡선을 더 깊이 이해하기 위해
제가 UICubic Timing Parameters를 정리해 보겠습니다.

UICubicTimingParameters

UIVIEW Property Animation의 기본 요약① 하지만 나는 가볍게 만졌다
UICubicTimingParameters
UIVIewAnimationCurve를 사용하여 생성할 수도 있습니다.
하지만 여기서 베셀 곡선을 사용하는 생성 방법을 살펴보자.
설치할 때 다음과 같은 방식으로 기입하셨죠.
ViewController.swift

// bezier曲線による速度制御
bezierAnimator = UIViewPropertyAnimator(duration: 2.0, controlPoint1: CGPoint(x: 0.1, y: 0.5), controlPoint2: CGPoint(x:0.5, y:0.2)){
    self.circle.center.y += 200
}

또한 다음과 같이 UICubicTiming Parameters를 생성하는 실례
UIVIEW Property Animator에 삽입된 글쓰기도 가능합니다.
ViewController.swift

//cubicTimingParameters
var cubic = UICubicTimingParameters(controlPoint1: CGPoint(x:0.1, y:0.5), controlPoint2: CGPoint(x:0.5, y:0.2))

// UIViewPropertyAnimator
animator = UIViewPropertyAnimator(duration: 2.0, timingParameters: cubic){
    self.circle.center.y += 200
}

정말 두루뭉술한 설명입니다.
호 ① ・ (0.0,0.0), controlPoint 1, controlPoint 2 세 가지로 묘사된 호
호 ② ・ 제어점 1, 제어점 2, (1.0, 1.0) 3시에 그려진 호
호 ①과 호 ②를 따라 (0.0,0.0)에서 (1.0,1.0)로 묘사된 곡선은 애니메이션 속도의 가감 상황을 나타낸다.
그렇습니다.(아래 그림을 보십시오. 상상하기 쉽습니까...)

위의 그림을 보면 애니메이션이 시작된 후와 애니메이션이 끝날 때의 각도가 매우 가파르다
나는 당신이 중간의 각도가 평탄하다는 것을 알게 될 것이라고 생각한다.
즉, 위 이미지에서
[시작] → 초가속 → 평온감속 → 평온가속 → 초가속 → [끝]
의 흐름.
이해하기 어려워!!!
그래서 백문이 불여일견이다.

제어점 좌표 변경 시도

나는 실제로 언어로만 이해하는 것은 매우 어렵다고 생각한다.(필자에게만...)
그럴 때는 어쨌든 먼저 손을 대라
나는 가장 중요한 것은 조합된 프로그램이 어떻게 실행되는지 보는 것이라고 생각한다!!
그래서
실제로 제어점 값에 여러 가지 숫자를 설정합니다
동작의 변화를 관찰했다.φ(●_<)
제어점의 좌표를 바꾸어 동작을 관찰하다
베지야 곡선을 이해하는 토대에서 나는 3개를 기본 모양으로 눌러주는 것이 중요하다고 생각한다.
이 세 가지를 필자의 독단과 편견으로 분류한다.
가능하다면 여러분의 이해를 도울 수 있기를 바랍니다.

●0110형-'급→완만→급'

먼저 제어점 1(x:0.0, y:1.0), 제어점 2(x:1.0, y:0.0)
좌표 값에 따라 0110형으로 명명됩니다.(이렇게 간단해서 미안해...orz)
・ UIVIewPropertyAnimator에서 설정
ViewController.swift

bezierAnimator = UIViewPropertyAnimator(duration: 2.0, controlPoint1: CGPoint(x: 0.0, y: 1.0), controlPoint2: CGPoint(x:1.0, y:0.0)){
    self.circle.center.y += 200
}

· UICubicTimingParameters에서 설정
ViewController.swift

//cubicTimingParameters
var cubic = UICubicTimingParameters(controlPoint1: CGPoint(x:0.0, y:1.0.), controlPoint2: CGPoint(x:1.0, y:0.0))

0110형에 묘사된 곡선은 다음과 같다.

속도의 변화는 그림과 같다.
처음
중간①
가운데 ②
곧 끝난다
완급
다급하다
느슨하다
느슨하다
다급하다
가감속
가속
감속
감속
가속
위의 그림과 같은 속도를 변경하려면 0110형을 적용하여 설치할 수 있습니다.
실제 동작은 다음과 같다.

●1001형-'완만→급→완만'

이어서 제어점 1(1.0,0.0), 제어점 2(0.0,1.0)
'1001형'이죠.
・ UIVIewPropertyAnimator에서 설정
ViewController.swift

bezierAnimator = UIViewPropertyAnimator(duration: 2.0, controlPoint1: CGPoint(x: 1.0, y: 0.0), controlPoint2: CGPoint(x:0.0, y:1.0)){
    self.circle.center.y += 200
}

· UICubicTimingParameters에서 설정
ViewController.swift

//cubicTimingParameters
var cubic = UICubicTimingParameters(controlPoint1: CGPoint(x:1.0, y:0.0.), controlPoint2: CGPoint(x:0.0, y:1.0))

1001형으로 그려진 곡선은 다음과 같다.

속도의 변화는 그림과 같다.
처음
중간①
가운데 ②
곧 끝난다
완급
느슨하다
다급하다
다급하다
느슨하다
가감속
가속
가속
감속
감속
위의 그림과 같은 속도를 변경하려면 0110형을 적용하여 설치할 수 있습니다.
실제 동작은 다음과 같다.

●5555형

마지막으로 제어점 1(0.5,0.5), 제어점 2(0.5,0.5)
5555형.
・ UIVIewPropertyAnimator에서 설정
ViewController.swift

bezierAnimator = UIViewPropertyAnimator(duration: 2.0, controlPoint1: CGPoint(x: 0.5, y: 0.5), controlPoint2: CGPoint(x:0.5, y:0.5)){
    self.circle.center.y += 200
}

· UICubicTimingParameters에서 설정
ViewController.swift

//cubicTimingParameters
var cubic = UICubicTimingParameters(controlPoint1: CGPoint(x:0.5, y:0.5), controlPoint2: CGPoint(x:0.5, y:0.5))

연결 (0.0, 0.0) 및 (1.0, 1.0) 선이 직선이기 때문입니다.
UIVIew Animation Curve의linear와 마찬가지로 전체 속도는 같다.
참고로 5555가 아니더라도 4개의 좌표의 값이 모두 같으면 전체 속도도 같다.

● 3개를 기본형으로 포착하여 효과적으로 활용!

세 가지 유형으로 나누어 정리할 수 있는 것은 다음과 같은 두 가지가 있다
① 베지예 곡선으로 설정할 수 있는 속도 변화의 종류는 크게'0110형'과'1001형'두 가지로 나뉜다
② 두 ControlPoint의 X축 차이, Y축 차이가 클수록 완급
만약 이 두 가지를 머릿속에 기억한다면, X와 Y 값을 설정하는 동시에
자신이 필요로 하는 속도 변화를 실현할 수 있다!!
UICubicTiming Parameter의 베젤 곡선은 도달하기 어렵습니다.
이해하기 쉽고 이용 범위도 넓어집니다

겸사겸사 말씀드리다

• 이번에는 베지야 곡선의 편리함을 이해하기 위해 3개의 기본형으로 나뉘는데 실제로는 1.0 이상의 값을 좌표로 설정하거나 음으로 설정할 수도 있다.
따라서 더욱 유연한 애니메이션 속도 변화를 실현할 수 있습니다!!
나는 내가 더욱 깊이 있게 공부하고 여러분과 정보를 공유할 수 있기를 바란다
다음에 기회가 되면 데려와.

마지막

베지야 곡선은 수학을 못하는 필자에게 매우 이해하기 어렵다
필자와 마찬가지로 "수학을 잘 못해, 베지야 곡선 따위는 시원해..."이런 사람들이 이해할 수 있게 도와줬으면 좋겠어요.
다음에는 UISpringTiming Parameters를 중심으로 정리하고 싶습니다.
끝까지 함께해 주셔서 감사합니다.