[iOS - swift] 2. UIViewPropertyAnimator, AnimationStates - fractionComplete, interactive animation (상호작용 애니메이션)

1. UIViewPropertyAnimator, AnimationStates - 개념

2. UIViewPropertyAnimator, AnimationStates - fractionComplete, interactive animation (상호작용 애니메이션)

UIViewPropertyAnimator의 상태 (복습)

• 새로 생성된 인스턴스는 inactive상태에서 시작
• 애니메이션을 마친 인스턴스도 inactive 상태로 돌아감
• startAnimation() 메서드를 호출하면 active 상태로 변경
• 중지하면 stopped 상태로 변경

interactive animation (상호작용 애니메이션)

ex) viewDidAppear 메소드에서 애니메이션이 시작되고, 이 애니메이션은 3개의 뷰를 순차적으로 흐리게하는 애니메이션

- 이 애니메이션이 동작하고 있을때 UISlider를 통해서 애니메이션의 동작을 컨트롤할 수 있게 사용

• 0~1값을 갖는 fractionComplete 프로퍼티를 사용하여 상호작용 애니메이션 구현이 가능
  • UISlider의 값을 fractionComplete 프로퍼티에 사용

  var animator: UIViewPropertyAnimator?
  
  private let slider: UISlider = {
    let slider = UISlider()
    slider.addTarget(self, action: #selector(didChangeSlide), for: .valueChanged)
    slider.translatesAutoresizingMaskIntoConstraints = false
    return slider
  }()
  
  @objc private func didChangeSlide() {
    self.animator?.fractionComplete = CGFloat(self.slider.value)
  }

• viewDidLoad에서 애니메이션 정의
  • 생성자의 파라미터에서 animation의 duration 설정
  • addAnimations로 애니메이션 동작 정의
  • addCompletion으로 애니메이션이 끝난 경우 정의

    self.animator = UIViewPropertyAnimator(
      duration: 5,
      timingParameters: UICubicTimingParameters(animationCurve: .easeInOut)
    )
    
    self.animator?.addAnimations {
      UIView.animateKeyframes(
        withDuration: 0,
        delay: 0,
        animations: {
          UIView.addKeyframe(
            withRelativeStartTime: 0,
            relativeDuration: 0.3 / 1.0,
            animations: { self.redView.alpha = 0 }
          )
          UIView.addKeyframe(
            withRelativeStartTime: 0,
            relativeDuration: 0.6 / 1.0,
            animations: { self.greenView.alpha = 0 }
          )
          UIView.addKeyframe(
            withRelativeStartTime: 0.1 / 0.5,
            relativeDuration: 0.9 / 1.0,
            animations: { self.blueView.alpha = 0 }
          )
        }
      )
    }
    
    self.animator?.addCompletion { [weak self] _ in
      [self?.redView, self?.greenView, self?.blueView]
        .forEach { $0?.alpha = 1 }
    }

• viewDidAppear에서 startAnimation() 호출
  • 애니메이션 동작

  override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    self.animator?.startAnimation()
  }

* 전체 코드: https://github.com/JK0369/ExAnimator

* 참고

https://ios-development.tistory.com/922

https://jinnify.tistory.com/69