Swiftでフレーム毎にアニメーションさせる

どうも、はぐっです・ω・♪

Swiftでアニメーションを行う

アニメーションの方法は様々

• UIView.animate
• CABasicAnimation
• AutoLayoutとlayoutIfNeeded

とかとか。
その中で今回は、フレーム毎に値を計算してアニメーションさせる方法を紹介。

実装

早速、実装どーん！

private func setupLoop() {
    self.displayLink = CADisplayLink(target: self, selector: #selector(self.update))
    self.displayLink.preferredFramesPerSecond = 60 // 60fps
    self.displayLink.add(to: .current, forMode: .commonModes)
    self.displayLink.isPaused = false // ループスタート
}

@objc
private func update(displayLink: CADisplayLink) {
    // ここでアニメーション処理
}
    

アニメーションの手順

• setupLoopでループ始める前に現在時刻を取得する
• updateに入ってきた時の時刻との差で進捗状況を計算する
• アニメーション対象のプロパティ(transform,opacity等)に、進捗状況に応じた値を入れる

こんな感じ！
進捗状況の計算にEasing使ったりすると、いい感じのアニメーションが作れるよ！

で、このままやと一生ループが走るから、止めたいタイミングで

self.displayLink.isPaused = true

として、ループを止めます。

いじょっ！

終わりに

今回はもろもろ割愛しますが、今回のような形のアニメーションにはTimerとかよりもCADisplayLinkの方が優秀かと。

めっちゃわたくしごとですが、jQueryではなく生のJavaScriptでアニメーションを実装したときもこんな形で実装していたので、とっつきやすかったですねー！