【Swift/UIKit】CABasicAnimationの使い方!CAAnimationDelegate

この記事からわかること
- Swift/UIKitでUIViewをアニメーションさせる方法
- Core Animationフレームワークの役割
- CABasicAnimationの使い方と違い
- CAAnimationDelegateでアニメーションの開始と終了を検知する
- 無限回転するアニメーションの実装方法
index
[open]
\ アプリをリリースしました /
環境
- Xcode:15.0.1
- iOS:17.0
- Swift:5.9
- macOS:Sonoma 14.1
UIKitを使用したiOSアプリ開発でビューにアニメーションを実装する方法をまとめて行きます。
アニメーションを実装する方法
アニメーションを実装する方法はいくつか用意されています。それぞれの役割とは以下の通りになります。
- UIView.animate:サイズや色合いなど簡素なアニメーション
- UIView.transition:遷移アニメーション
- UIView.animateKeyframes:連続したアニメーション
- CABasicAnimation:複雑なアニメーション
今回はCore Animationフレームワークから提供されているCABasicAnimationの使い方をまとめていきます。
Core Animationフレームワークとは?
公式リファレンス:Core Animation
公式リファレンス:Core Animation Programming Guide
Core Animationフレームワークとはグラフィックレンダリングとアニメーションを提供するiOSとMac OS共通のフレームワークです。直接使用する機会は少ないですがiOSアプリにとってもインフラ部分になる大事なクラスです。
描画に特化しているのでイベント処理などを持たせることはできませんがその分描画速度が速く、GPUが処理を負担するためCPUへの負担も少ないのが大きな特徴になっています。
描画をGPUが担当するためBitmap形式でのデータ保存が必要になります。Core AnimationではBitmap形式でコンテンツを取り扱い、それをキャッシュ(「バッキングストア(backing store)」と呼ぶ)することで高速な描画を実現しています。
※Bitmapとは画像のデータ形式の1つでデータをピクセルの位置(座標)と色で管理する形式です。
まとめると「コンテンツを画像で管理することでGPUに処理を任せて高速に描画するためのフレームワーク」という感じでしょうか?
そしてCore Animationで肝になってくるのがCALayer(レイヤーオブジェクト)です。詳細に関しては以下の記事を参考にしてください。
CABasicAnimationの使い方
CABasicAnimation
クラスはCore Animationフレームワークから提供されているアニメーションを実装するためのクラスです。こちらはCALayer(レイヤーオブジェクト)に対してアニメーションを付与していくのでUIView
を直接操作していたUIView.animate
メソッドなどでアニメーションできなかったプロパティやより複雑な変化をさせることができます。
では先に実装方法を見てみます。まずは「透明度を0に、角を丸くするアニメーション」を付与してみます。

使い方
アニメーションを実装するにはCABasicAnimation
インスタンスを生成します。イニシャライザの引数keyPath
に渡すのは適当な文字列ではなく、プロパティのキーパス(名前)です。キーパスなので例えばスケールのX軸をアニメーションする場合はtransform.scale.x
を、回転させたい場合はtransform.rotation
を指定します。
インスタンス化できたCABasicAnimation
に対してアニメーションの設定をしていきます。fromValue
プロパティでアニメーション開始時の値をtoValue
でアニメーション終了時の値を、duration
でアニメーションの継続時間を指定します。
最後にlayer(CALayer)
プロパティにadd
メソッドを使用してアニメーションを追加すればビューが描画されたタイミングでアニメーションが発火します。forKey
にはアニメーションを識別するための文字列を渡します。
開始時間を遅らせる
アニメーションの開始時間を遅らせたい場合はbeginTime
プロパティに遅らせたい時間を渡します。 CACurrentMediaTime() + 1
で1秒後にアニメーションを開始することができます。
逆再生
アニメーションを逆再生したい場合はautoreverses
プロパティにtrue
を渡します。
アニメーションした値を戻さない
アニメーション完了後は自動で値が戻ってしまうので変化したままにしたい場合はisRemovedOnCompletion
プロパティにtrue
を渡し、fillMode
プロパティにCAMediaTimingFillMode.forwards
を渡します。
アニメーション開始・終了を検知する:CAAnimationDelegate
アニメーションの開始・終了を検知して処理を実行したい場合はCAAnimationDelegate
プロトコルを使用します。animationDidStart
デリゲートメソッドからアニメーションが開始したことをanimationDidStop
からアニメーションが停止したことを検知することができます。
animationDidStop
の引数からはアニメーションの抽象スーパークラスであるCAAnimation
型と完全に終了したことを示すフラグを取得できます。
CAAnimation
型を介して上記のようにアニメーション識別子でアニメーションを以下のsetValue
メソッドで指定した識別子でCALayer
インスタンスを取得することができます。
Viewを無限回転させてみる
独自のローディングビューなどを実装する際に利用できるViewが無限回転するアニメーションを実装するなら以下のおようになります。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。