소개

iOS10/Swift3에서 기존 애니메이션을 쓰는 방법이 바뀌기 때문에,
연습이 끝나면, Twitter풍의 스플래쉬 화면의 애니메이션을 재작성해 봅니다.

그건 그렇고, 개발 환경은 "XCode8.0 Beta5"입니다.

실천

1. 프로토콜 만들기

간단하게 변환하면 아래와 같은 이미지가 됩니다.
기존 애니메이션으로의 변환은 XCode8이 리팩터 해줍니다.

TwitterLikeAnimation.swift

protocol TwitterLikeAnimation {}

extension TwitterLikeAnimation where Self: UIImageView {

    func startSplashAnimation() {

        UIView.animate(withDuration: 0.3,
                       delay: 1.0,
                       options: .curveEaseOut,
                       animations: { [weak self] () in
                        self?.transform = CGAffineTransform(scaleX: 0.75, y: 0.75)
            }, completion: nil)

        UIView.animate(withDuration: 0.2,
                       delay: 1.3,
                       options: .curveEaseOut,
                       animations: { [weak self]() in
                        self?.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
                        self?.alpha = 0
            }, completion: { [weak self] (Bool) in
                self?.removeFromSuperview()
            })
    }
}

이건 지루하지 않기 때문에 iOS10에서 등장했습니다.
UIViewPropertyAnimator, UIViewAnimating, UIViewImplicitlyAnimating 등
이용해 써 봅니다.

TwitterLikeAnimation.swift

extension TwitterLikeAnimation where Self: UIImageView {

    func startSplashAnimation() {

        let timing = UICubicTimingParameters(animationCurve: .easeOut)
        let animator = UIViewPropertyAnimator(duration: 0.7, timingParameters: timing)

        animator.addAnimations{
            self.transform = CGAffineTransform(scaleX: 0.75, y: 0.75)
        }

        animator.addAnimations({
            self.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
            self.alpha = 0
            }, delayFactor: 0.8)

        animator.addCompletion { (position) in
            self.removeFromSuperview()
        }
        animator.startAnimation()
    }
}

2. UIImageView에 구현

TwitterLikeImageView.swift

class TwitterLikeImageView: UIImageView, TwitterLikeAnimation {}

3. StoryBoard에 배치

스토리보드에서 설치한 UIImageView의 커스텀 클래스를 TwitterLikeImageView로 변경

4. UIViewController에서 읽기

ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var baseView: UIView!
    @IBOutlet weak var logoImageView: TwitterLikeImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        baseView.backgroundColor = UIColor.white
    }

    override func viewDidAppear(_ animated: Bool) {
        logoImageView.startSplashAnimation()
    }
}

요약

익숙하지 않기 때문인지, 구래의 애니메이션 쪽이 사용하기 쉬운 생각이 들었습니다.
동적인 애니메이션의 추가나, 일시 정지등도 할 수 있는 것 같기 때문에, 도전해 보고 싶습니다.

실수 등이 있으시면 지적해 주시면 감사하겠습니다.

참고

h tp : 소 m/현-짱/있어 MS/f80c17c583아C44d67아58
ぃ tp // 이 m/오사무 1203/있어 ms/아 7c78666b18에 b499c94b