キーフレームとスタガー
複雑で段階的なアニメーションを作成します
「キーフレームとスタガー」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
複数ステップのアニメーション
単純なトランジションはAからBへ移行します。バウンス、パルス、色の変化など、複数ステップの動きにはAngularのkeyframesを使用し、多数の項目を順番にアニメーションさせるにはstaggerを使用します。
keyframes関数
keyframesはstyleステップの配列を受け取ります。各ステップには、再生時間全体の中での位置を示す0から1までのoffsetを指定します。
animate('1s', keyframes([
style({ opacity: 0, offset: 0 }),
style({ opacity: 0.5, offset: 0.3 }),
style({ opacity: 1, offset: 1 })
]))offsetを理解する
offsetは、再生時間全体に対する割合です。0が開始位置、1が終了位置を表します。配列内では、offsetの値が増加するように指定してください。
バウンス効果
keyframesを使うと、行き過ぎてから戻る動きによってバウンスを表現できます。
keyframes([
style({ transform: 'translateY(0)', offset: 0 }),
style({ transform: 'translateY(-20px)', offset: 0.5 }),
style({ transform: 'translateY(0)', offset: 1 })
])offsetの省略
offsetを省略すると、Angularは再生時間全体にわたってキーフレームを均等に配置します。
keyframes([
style({ opacity: 0 }),
style({ opacity: 1 })
])query関数
ホストの子要素をアニメーションさせるには、トランジション内でqueryを使って子要素を選択します。
transition('* => *', [
query(':enter', [
style({ opacity: 0 })
])
])stagger関数
staggerは、選択した各要素のアニメーションの間に時間差を設け、連鎖するような効果を作り出します。
query(':enter', [
style({ opacity: 0 }),
stagger(100, [
animate('300ms', style({ opacity: 1 }))
])
])リストをstaggerさせる
リストコンテナのtrigger内でqueryとstaggerを組み合わせると、項目を1つずつ順番にフェードインできます。
trigger('listAnim', [
transition('* => *', [
query(':enter', [
style({ opacity: 0 }),
stagger(80, animate('250ms', style({ opacity: 1 })))
], { optional: true })
])
])オプションフラグ
queryに{ optional: true }を渡すと、一致する要素が存在しない場合でもアニメーションでエラーが発生しません。
負のstagger
staggerに負の値を指定すると順序が逆になり、最後の項目から先にアニメーションします。終了時の連鎖アニメーションに便利です。
stagger(-50, animate('200ms', style({ opacity: 0 })))パフォーマンスに関する注意
多数の要素をstaggerさせると、負荷が高くなる場合があります。各項目の再生時間を短くし、アニメーションをGPU上で処理できるよう、transformやopacityを優先してください。
クイックチェック
keyframesとstaggerについての理解度を確認します。
まとめ
keyframesはoffsetの値を使って複数ステップの動きを定義し、queryとstaggerは多数の要素を連鎖的にアニメーションさせることを学びました。安全性を高めるには{ optional: true }を使い、GPUで処理しやすいプロパティを優先してください。
よくある質問
「キーフレームとスタガー」レッスンは無料ですか？
はい。「キーフレームとスタガー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「キーフレームとスタガー」で何を学びますか？
複雑で段階的なアニメーションを作成します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「キーフレームとスタガー」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。