animation
アニメーション
CADisplayLink
Swift

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でアニメーションを実装したときもこんな形で実装していたので、とっつきやすかったですねー!