iOS
プロトコル
Swift
ios10
swift3

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

More than 1 year has passed since last update.


はじめに

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に変更する

スクリーンショット 2016-08-23 0.02.54.png


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