[iOS] UIImageView에서 교차 송전 같은 애니메이션을 실현하고 싶어요.

실행 예

문제.

해결책

실현해 보았다

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.
    }
}

미리 교차 피드백을 위한 이미지 배열 관리

Timer로 반복 전송

애니메이션 채널

총결산