iOS UiKit Animation

UiKit Animation

특징

- clousr 기반이다.
- 애니메이션이 가능한 속성 : frame,bounds,center,transform,alpha,backgroundColor

애니메이션 구현 코드

animate(withDuration:animations:)

- withDuration : Animation의 지속시간
- animations : Animation 제공하는 클로저 표현식입니다.

  //MARK: - animate(withDuration:animations:)
UIView.animate(withDuration: 0.5) {} 
  
  //MARK: - heading의 center x 값에 superView width값을 더해 Animation 처리
UIView.animate(withDuration: 0.5) {
      self.heading.center.x += self.view.bounds.width
}  
  

animate(withDuration:delay:options:animations:completion:)

- withDuration : Animation의 지속시간
- delay : UIKit이 Animation을 시작하기 전에 대기하는 시간(초)입니다.
- options :Animation에 대한 여러 측면을 사용자 지정할 수 있습니다.
- completion : Animation이 완료될 때 실행할 코드 클로저입니다.

//MARK: - animate(withDuration: , delay: , options: , animations:, completion:)

UIView.animate(withDuration: , delay: , options: , animations:, completion:)

//MARK: - Animation의 지속시간을 0.5초로 설정하며, 딜레이를 0.5초를 주웠으며, cloud1의 alpha값을 1.0을주며 Animation 처리
UIView.animate(withDuration: 0.5, delay: 0.5, options: [], animations: {
    self.cloud1.alpha = 1.0
  }, completion: nil)

//MARK: - 위 작업과 동일하게 Animation의 지속시간은 동일하나 딜레이를 0.7초로 설정하여 위의 Animation보다 0.2초후에 실행됨
UIView.animate(withDuration: 0.5, delay: 0.7, options: [], animations: {
    self.cloud2.alpha = 1.0
  }, completion: nil)

animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:)

- withDuration : Animation의 지속 시간
- delay : UIKit이 Animation을 시작하기 전에 대기하는 시간(초)입니다.
- usingSpringWithDamping : Spring Animation이 정지 상태(= Animation이 끝나갈 때)에 근접할 때의 damping(감쇠)비율을 말한다. 0.0 ~ 1.0 까지의 값을 가지고 있으며, 0에 가까울수록 심하게 damping이 됩니다.
- initialSpringVelocity : Animation을 시작할때 View의 상대적 속도 0.0 ~ 1.0 까지의 값을 가지고 있으며, 0에 가까울수록 더 빨라진다.
- options : Animation에 대한 여러 측면을 사용자 지정할 수 있습니다.
- animations : Animation 제공하는 클로저 표현식입니다.
- completion : Animation이 완료될 때 실행할 코드 클로저입니다.

//MARK: - animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:)
  
UIView.animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:)

//MARK - Example
UIView.animate(withDuration: 0.5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.0,
                   options: [], animations: {
                    self.loginButton.center.y -= 30.0
                    self.loginButton.alpha = 1.0
    }, completion: nil)
  
  

UIView AnimationOptions

위 사진을 참고하여 자동차나 기차와 같은 물리적 물체는 목표 속도에 도달할 때까지 천천히 가속하고, 최종 목적지에서 완전히 멈출때까지 점차 감속합니다. (기차와 자동차와 같은 원리)

- .curveLinear : 이 옵션은 Animation에 가속이나, 감속을 적용하지 않고 균등하게 Animation이 적용된다.
- .curveEaseIn : 이 옵션은 Anmation의 시작 부분에 가속을 적용 합니다.
- .curveEaseOut : 이 옵션은 Animation 끝에 감속을 적용합니다.
- .curveEaseInOut : 이 옵션은 Animation 시작 부분에 가속을 적용 하고 Animation 끝 부분에 감속을 적용합니다.
- .repeat: 이 옵션은 Animation이 무한정으로 반복됩니다.
- .autoreverse: repeat의 옵션을 재생한다음 역방향으로 반복적으로 재생합니다.(repeat 옵션과 같이 사용해야함)
- .allowUserInteraction: Animation중에는 터치 이벤트가 disabled되는데, 터치 이벤트를 활성화 하고싶을때 사용하는 옵션