CoreAnimationのfillModeについて

はじめに

　CoreAnimationを使って少し凝ったアニメーション等を実装する時に、毎回おまじないのようにfillModeを設定していたのですが、それについて少し調べたので書いていきたいと思います

fillModeとは

　アニメーションの終了時の動作を決めるためのプロパティだと理解しています

fillModeの種類と役割

• removed:
  アニメーションが終了したら削除する。デフォルトでremovedが設定されています
• forwards:
  アニメーションが終了時は最後の状態を保持する
• backwards:
  アニメーションが終了時は最初の状態で固定する
• both:
  forwardsとbothの両方を適用したもの

実際に動きを見てみる

ベースとなるコード

backgroundColorをgreenにしただけのUIViewがあります。

let animatedView = UIView(frame: CGRect(origin: .zero, size: CGSize(width: 100, height: 100)))
animatedView.backgroundColor = .green

animatedViewをCoreAnimationを使って、origin.xを200に、backgroundColorをblueにアニメーションさせます

let translateAnimation = CABasicAnimation(keyPath: "transform.translation.x")
translateAnimation.beginTime = CACurrentMediaTime() + 0.5
translateAnimation.duration = 1.0
translateAnimation.fromValue = CATransform3DIdentity
translateAnimation.toValue = 200
translateAnimation.isRemovedOnCompletion = false

let backgroundAnimation = CABasicAnimation(keyPath: #keyPath(CALayer.backgroundColor))
backgroundAnimation.beginTime = CACurrentMediaTime() + 0.5
backgroundAnimation.duration = 1.0
backgroundAnimation.fromValue = UIColor.green.cgColor
backgroundAnimation.toValue = UIColor.blue.cgColor
backgroundAnimation.isRemovedOnCompletion = false

animatedView.layer.add(backgroundAnimation, forKey: nil)
animatedView.layer.add(translateAnimation, forKey: nil)

※アニメーションがわかりやすくなるようにisRemovedOnCompletionをfalseにしています

これらにfillModeを設定して挙動を違いを見ていきます。

.removedの時

　fillModeのデフォルト値が.removedなので、先程のコードのままでも同じ挙動になります。

...
+translateAnimation.fillMode = .removed

...
+backgroundAnimation.fillMode = .removed
...

　アニメーションが終わった時、アニメーションが削除されて初期状態に戻っているのがわかります。

.forwardsの時

　両方のfillModeを.forwardsに設定します。

...
+translateAnimation.fillMode = .forwards

...
+backgroundAnimation.fillMode = .forwards
...

　アニメーションが終わった時、最後の状態を保持し続けているのがわかります。

.backwardsの時

　両方の.fillModeをbackwardsに設定します。

...
+translateAnimation.fillMode = .backwards

...
+backgroundAnimation.fillMode = .backwards
...

　.removedの時と同じ挙動になってしまいました。わかりづらいので、translateAnimationのfillModeだけ.forwardsにして見たいと思います。

...
-translateAnimation.fillMode = .backwards
+translateAnimation.fillMode = .forward

...
+backgroundAnimation.fillMode = .backwards
...

最後のbackgroundの状態がgreenになっている通り、アニメーションが終わった時、最初の状態を保持しているのがわかります。

.bothの時

両方のfillModeに.bothを設定します。

...
+translateAnimation.fillMode = .both

...
+backgroundAnimation.fillMode = .both
...

見かけでは .forwardsと一緒ですが、連続で何回もアニメーションすると違いがわかります。

.bothを連続でアニメーションさせた時

.forwardを連続でアニメーションさせた時

.bothだといい感じになっていますね。

最後に

　基本的には、isRemovedOnCompletion = falseと.fillMode = .forwardsの組み合わせで使うことがほとんどだと思いますが、他にもこんなプロパティがあるよ、という紹介でした。

参考

• fillMode - Apple Developer