暗黙的アニメーションと明示的アニメーション
CABasicAnimationでレイヤーのプロパティをアニメーション化します。
「暗黙的アニメーションと明示的アニメーション」はCoddyKit上の無料Swift Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwift Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Swift Academyコースには全4レッスンが含まれています。
レイヤーをアニメーションする 2 つの方法
Core Animation には、プロパティの変更時に自動で実行される暗黙的アニメーションと、アニメーションオブジェクトを作成して実行する明示的アニメーションがあります。
両方の仕組みと、それらがどのように作用し合うかを知ることが、滑らかな動きの鍵になります。
暗黙的アニメーション
単独のレイヤーでアニメーション可能なプロパティを変更すると、アニメーションオブジェクトを作成しなくても、デフォルトの 0.25s のカーブを使った暗黙的アニメーションが発生します。
let layer = CALayer()
// Later, this animates automatically:
layer.opacity = 0.0アニメーション可能なプロパティ
多くのレイヤープロパティはアニメーション可能です。opacity、position、bounds、backgroundColor、transform、cornerRadius などがあります。
layer.cornerRadius = 20 // animates implicitly
layer.backgroundColor = UIColor.systemGreen.cgColorアクションとアクション機構
暗黙的アニメーションはアクションによって駆動されます。プロパティが変更されると、レイヤーは実行する CAAction を検索します。これらのアクションはカスタマイズしたり、無効にしたりできます。
ビューが支えるレイヤーでは暗黙的アニメーションが無効
UIView にアタッチされたレイヤーでは、暗黙的アニメーションが無効になっています。代わりに UIView.animate または明示的アニメーションを使ってアニメーションさせます。
UIView.animate(withDuration: 0.3) {
view.alpha = 0
}CABasicAnimation
CABasicAnimation は、fromValue と toValue の間で 1 つのプロパティをアニメーションします。プロパティに一致するキーパスを指定して、レイヤーに追加してください。
let anim = CABasicAnimation(keyPath: "opacity")
anim.fromValue = 1.0
anim.toValue = 0.0
anim.duration = 0.5
layer.add(anim, forKey: "fade")Presentation と Model
明示的アニメーションはpresentation（画面上）の値だけを変更します。アニメーションが終了すると、レイヤーのmodel値は元に戻ります。
変更を維持するには、model 値も設定してください。
layer.opacity = 0.0 // set model value so it persists
layer.add(anim, forKey: "fade")キーフレームアニメーション
CAKeyframeAnimation は、keyTimes に沿って複数の values をアニメーションさせたり、path に沿って動かしたりできます。バウンスや曲線に沿った動きに適しています。
let move = CAKeyframeAnimation(keyPath: "position")
move.values = [
NSValue(cgPoint: CGPoint(x: 0, y: 0)),
NSValue(cgPoint: CGPoint(x: 100, y: 0)),
NSValue(cgPoint: CGPoint(x: 100, y: 100))
]
move.duration = 1.0
layer.add(move, forKey: "path")タイミング関数
timingFunction で加速を制御できます。ease-in、ease-out、linear、またはカスタムの 3 次ベジェ曲線を指定します。
anim.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)グループ化とトランザクション
複数の変更を CATransaction でラップすると、期間とタイミングを共有できます。また、暗黙的アニメーションを完全に無効にすることもできます。
CATransaction.begin()
CATransaction.setDisableActions(true)
layer.position = CGPoint(x: 200, y: 200)
CATransaction.commit()アニメーションデリゲートと完了処理
CATransaction.setCompletionBlock またはアニメーションデリゲートを設定すると、動きが終了したときにコードを実行できます。後処理、連鎖、状態の更新などに利用します。
CATransaction.begin()
CATransaction.setCompletionBlock { print("done") }
layer.add(anim, forKey: "fade")
CATransaction.commit()クイックチェック: アニメーション
暗黙的アニメーションと明示的アニメーションについての理解を確認します。
まとめ: 暗黙的アニメーションと明示的アニメーション
単独のレイヤーでは、アニメーション可能なプロパティが変更されるとアクションによって暗黙的にアニメーションします。ビューが支えるレイヤーではこれが無効になり、UIView.animate を使います。明示的な CABasicAnimation と CAKeyframeAnimation は presentation 値をアニメーションするため、結果を維持するには model 値も更新してください。
タイミング関数で動きを調整し、CATransaction で変更をまとめ、完了ブロックで後続処理を行います。
よくある質問
「暗黙的アニメーションと明示的アニメーション」レッスンは無料ですか？
はい。「暗黙的アニメーションと明示的アニメーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Swift Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Swift Academyコースには全4レッスンが含まれています。
「暗黙的アニメーションと明示的アニメーション」で何を学びますか？
CABasicAnimationでレイヤーのプロパティをアニメーション化します。 ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Swift Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSwift Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「暗黙的アニメーションと明示的アニメーション」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwift Academyレッスンでコードを書いて実行できますか？
はい。すべてのSwift Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- CALayerの基礎
- 暗黙的アニメーションと明示的アニメーション
- トランスフォームと3Dエフェクト
- Core Graphicsによるカスタム描画