iOS 10에서 사용할 수 있는 UIVIew Property Animation을 통해
지금은 다양한 애니메이션을 쉽게 만들 수 있다.
멋진 패션을 만드는 UI를 바탕으로.
나는 애니메이션과 관련된 기술을 향상시키는 것이 필수적이라고 생각한다.
따라서 UIVIewPropertyAnimator의 기본 기능을 실제로 사용합니다.
똑똑한 일과 모르는 일을 정리하기 위해 정리하다.

기본 구성

애니메이션은 기본적으로 다음과 같은 느낌으로 실현할 수 있다.
ViewController.swift

class ViewController: UIViewController {
    // 使用する変数を宣言
    var circle: UIView! //アニメーションで動かすUIView
    var animator: UIViewPropertyAnimator! //animator

    override func viewDidLoad(){
        super.viewDidLoad()

        // circleを生成し、画面に表示
        circle = UIView(frame: CGRect(x:0, y: 0, width: 30, height: 30))
        circle.center.y = 200
        circle.center.x = self.view.center.x
        circle.layer.masksToBounds = true
        circle.layer.cornerRadius = 15
        circle.backgroundColor = UIColor.black

        self.view.addSubview(circle)

        // animatorを生成し、viewが下方向にスライドしていくアニメーションを追加する
        animator = UIViewPropertyAnimator(duration: 3.0, curve: .linear){
            self.circle.center.y += 200
        }
    }

    @IBAction func fallTapped(_ sender: UIButton) {
        //ボタンが押されたら、アニメーションがスタートする
        animator.startAnimation()
    }

    override func didReceiveMemoryWarning(){
        super.didReceiveMemoryWarning
    }
}

이 버튼을 누르면circle에서 떨어진 애니메이션이 완성됩니다!!
간단하네!!(*´∀`)♪

UIVIewAnimation 프로토콜

ViewController.swift

@IBAction func fallTapped(_ sender: UIButton) {
    //ボタンが押されたら、アニメーションがスタートする
    animator.startAnimation()
}

에서 호출된 startAnimation 방법은 UIVIewAnimationg 프로토콜 에서 정의한 방법입니다.
UIVIew Animation 프로토콜은 애니메이션의 시작, 정지, 종료 등을 제어하는 방법이나 애니메이션이 active, inactive, stopped에서 어떤 상태에 있는지 정보를 얻을 수 있는 프로토콜을 정의합니다.
UIVIewPropertyAnimation 클래스가 UIVIewAnimation 프로토콜을 계승했습니다.
애니메이션을 시작할 때 startAnimation 메서드를 호출합니다.

애니메이션 생성 시 옵션 사용

UIVIEW Property Animator를 만드는 방법은 몇 가지가 있습니다.
curve, 베셀 곡선, dampingRatio 등을 매개 변수로 삼아 애니메이션의 속도와 성질 등을 변경할 수 있다.
몇 가지 예를 들겠습니다.

●curve: 설정된 값을 통해 애니메이션의 속도 변경

curve: 에 설정된 값은 enumeration 값UIViewAnimationCurve으로 다음 네 가지 값을 설정할 수 있습니다.
ViewController.swift

// animatorを生成し、viewが下方向にスライドしていくアニメーションを追加する
animator = UIViewPropertyAnimator(duration: 3.0, curve: .linear){
    self.circle.center.y += 200
}

수치
특징
.easeInOut
애니메이션을 시작할 때와 끝낼 때 느려집니다.
.easeIn
애니메이션은 천천히 시작하고 천천히 가속한다.
.easeOut
애니메이션이 비교적 빨리 시작하고 점차 속도를 줄인다.
.linear
애니메이션은 동일한 속도로 실행됩니다.
공식 참조에 따라 일반적으로 애니메이션에서 많이 사용되는 것은 입니다.ease In Out이지만 필요에 따라 간단하게 분리해서 사용하기 편해요!

● 베젤 곡선을 통해 애니메이션의 속도 변경

베셀 커브를 사용하여 애니메이션 속도를 변경할 수도 있습니다.
ViewController.swift

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

가운데 천천히!(이해하기 어려우면 못 참겠다.)

나는 베지야의 곡선은 사람에 따라 완전히 익숙하지 않은 사람도 있다고 생각한다.
필자도 부끄러워서 전혀 몰라요...orz
'베지에 곡선이 뭐예요?'이런 사람은 아래의 링크를 간단명료하게 설명할 수 있으니 어쨌든 참조하세요!!
중학생도 알 수 있는 베제 곡선

링크를 인용하는gif
그렇대요!!
curve라면 기존의 속도 제어만 할 수 있지만 베지야 곡선을 사용하면 개발자의 의향에 따라 애니메이션을 더욱 유연하게 제작할 수 있습니다!!
베지야 곡선의 특징을 이해하는 데는 시간이 걸리지만 표현의 범위가 넓기 때문에 시간이 걸리면 손실이 없다고 생각합니다.

● 스프링 같은 애니메이션 간단한 설정

dampingRatio를 사용하면 스프링 같은 애니메이션을 쉽게 설정할 수 있습니다
ViewControlelr.swift

//バネのようなアニメーションを設定
dampingAnimator = UIViewPropertyAnimator(duration: 2.0, dampingRatio:0.2){
    self.circle.center.y += 150
}

실행 후 아래와 같습니다!

이렇게 하면 유행하는 동작을 표현할 수 있다!
예에서 보듯이 사용 매개 변수의 종류만 변경하면 된다
또한 실제 매개 변수만 바꾸면 복잡하고 섬세한 애니메이션을 간단하게 만들 수 있다.
정말 무섭다!UIViewPropertyAnimator!Σ(゜д゜lll)

사용자 작업에 따라 비헤이비어를 변경할 수 있습니다.

다음은 사용자의 동작을 통해 동작을 변경하는 상호작용 애니메이션의 실현에 관한 것이다
기본적인 부분을 볼게요.

● 애니메이션 일시 중지

애니메이션 정지도 쉬워요!
① 일시 중지 버튼 추가
② 버튼을 누를 때의 방법으로 pause Animation 메서드 호출
ViewController.swift

@IBAction func pauseTapped(_ sender: Any) {
    //アニメーションを一時停止させるメソッドを呼び出す
    animator.pauseAnimation()
}

상술한 두 단계에 따라 실시할 수 있다.

Pause!버튼을 누르면 애니메이션이 일시 중지되고 다시 Fall!버튼을 누르면 애니메이션이 다시 시작됩니다!

하나의 메커니즘으로 삼다
startAnimation 방법을 통해 애니메이션의 상태가 Active가 됨
PauseAnimation 방법에 따라 애니메이션의 상태가 Inactive가 되고 싶습니다.

● 애니메이션 종료

애니메이션의 종료 프로세스는 일시 중지 프로세스와 거의 같습니다.
ViewController.swift

@IBAction func stopTapped(_ sender: UIButton) {
    //アニメーションを停止するメソッド
    animator.stopAnimation(false)
    //アニメーションを終了するメソッド
    animator.finishAnimation(at: .start)
}

이게 완성이야!

stopAnimation 매개 변수의 부울 값
공식 참고에 의하면
withoutFinishing
A Boolean indicating whether any final actions should be performed. Specify true to clear any animations and move the animator directly to the inactive state without performing any final actions. Specify false to put the animator into the stopped state.
--[번역] -
미완성
마지막 작업을 수행해야 하는지 여부를 나타내는 부울 값이 경우 애니메이션이 지워지고 마지막 동작을 수행하지 않고 비활성 상태로 이동할 수 있습니다.애니메이션을 중지하려면 휴가를 지정합니다.
이런 일.
문장만으로는 이해하기 어렵기 때문에 실제true를 지정할 때와false를 지정할 때의 차이를 검증해 보았다.
finishAnimation(at:.start)의start 섹션은finalPosition 매개 변수로 애니메이션이 끝날 때의 마지막 위치를 표시하며 다음 세 개의 값을 설정할 수 있습니다.
수치
UIVIew 중지 위치
.start
UIVIew는 애니메이션 시작 위치에 표시되고 중지됩니다.
.end
UIVIEW 애니메이션이 중지될 때 위치가 중지됩니다.
.current
UIVIew는 애니메이션이 끝나는 위치에 표시되고 중지됩니다.
애니메이션은 각각 3가지 상태에서 끝납니다.
stopAnimation 방법 withoutFinishing에서 지정한 매개 변수의 값이ture라면finishAnimation(at:)에서 지정한 값은 적용되지 않습니다.current와 같은 상태로 끝내기
withoutFinishing:
동작 결과
true
애니메이션은 항상 stopAnimation () 을 호출할 때 멈추고finishAnimation 방법을 호출할 필요가 없습니다.
false
finishAnimation 방법을 호출하여finalPosition 매개 변수에 설정된 값에 따라 UIVIew가 정지된 위치를 변경할 수 있습니다.
이런 해석은 좋지 않습니까?(이 점에 관해서 나는 좀 더 상세하게 검증하고 이해를 깊이 있게 하고 싶다.)
이렇게 하면 애니메이션 과정에서 사용자로부터 동작을 가져옵니다.
그것에 따라 동작을 바꿀 수 있기 때문에 노력에 따라 표현의 범위가 매우 넓기 때문에 저는 개인적으로 이것은 매우 배울 만한 반이라고 생각합니다.

끝날 때

UIVIEW Property Animator 클래스를 계속 공부하여 더욱 깊이 있는 이해를 바탕으로
다시 정보를 공유할 수 있다면 잘 부탁드리겠습니다.
UIVIEW Property Animation의 기본 요약 ②
그럼 베지예 곡선과 UICubic Timing Parameters를 정리해 보겠습니다.
가능하다면 저쪽을 보세요.
끝까지 함께해 주셔서 감사합니다.