[Swift] iOS10/Swift3でTwitter風のスプラッシュ画面のアニメーションを書き直してみる

はじめに

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に配置する

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()
    }
}

まとめ

慣れていないためか、旧来のアニメーションのほうが使いやすい気がしました。
動的なアニメーションの追加や、一時停止等もできるようなので、挑戦してみたいです。

誤り等ございましたら、ご指摘頂けると幸いです。

参考

http://qiita.com/KEN-chan/items/f80c17c583ac44d67a58
http://qiita.com/osamu1203/items/a7c78666b18eb499c94b