【iOS】UIImageViewでクロスフィードのようなアニメーションを実装したかった

おはこんばんちわ。
ドーモ。窓際エンジニア=デス

この度は、クロスフィードアニメーション作ってよと言われたので実装してみた。
クロスフィードは複数の画像をフィードして表示する

実行例

こんな感じ

問題

• コマ送りならUIViewの animationImages が使えるけど、フィードまで出来ない
• フィードさせたい画像は動的に増やしたいという要望

解決策

• タイマーを使って一定間隔で１枚づつ画像をフィードさせる

実装してみた

CrossFade.swift

import Foundation
import UIKit

class CrossFadeView: UIView {
    var animationView: UIImageView!
    var countNum = 0
    var images: Array<UIImage> = []
    var timer: NSTimer?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        animationView = UIImageView.init(frame: frame)
        self.addSubview(animationView)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func startCrossFade(duration: Float) {
        timer = NSTimer.scheduledTimerWithTimeInterval(NSTimeInterval.init(duration), target: self, selector: Selector("crossFade"), userInfo: nil, repeats: true)
    }
    
    func stopCrossFade() {
        if timer?.valid == true {
            timer?.invalidate()
        }
        timer = nil
    }
    
    func addImage(image: UIImage) {
        images.append(image)
    }
    
    func crossFade() {
        guard images.count > 0 else {
            return
        }
        
        let nextImage = images[countNum % images.count]
        let trans = CATransition.init()
        trans.duration = 1.0
        trans.type = kCATransitionFade
        animationView.layer.addAnimation(trans, forKey: nil)
        animationView.image = nextImage
        countNum++
    }
}

呼び出し側

import UIKit

class ViewController: UIViewController {
    var crossFadeView: CrossFadeView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        crossFadeView = CrossFadeView.init(frame: CGRectMake(40, 100, 200, 200))
        crossFadeView.addImage(UIImage(named: "sample1")!)
        crossFadeView.addImage(UIImage(named: "sample2")!)
        self.view.addSubview(crossFadeView)
    }
    
    override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)
        crossFadeView.startCrossFade(2.0)
    }
    
    override func viewWillDisappear(animated: Bool) {
        super.viewWillDisappear(animated)
        crossFadeView.stopCrossFade()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

クロスフィードさせたい画像を配列で管理しておく

表示したい画像をArrayで管理しておくと便利

2015/ 11/18追記

画像はサイズが大きいので、配列へ追加する場合は注意が必要です。
メモリを多く占有します。

Timerで繰り返しフィードさせる

一定間隔である関数を呼ぶとき、NSTimerの scheduledTimerWithTimeInterval が便利

Fadeのアニメーション

CATransition でFadeのアニメーションが用意されてる、便利

まとめ

便利！最高！