AfterEffectsからCSSトランジションおよびキーフレームへの移行

ウェブサイトはますますモバイルアプリのように見えています。 ユーザーはまた、よりアプリのような体験をますます期待しています。 プッシュ通知からオフラインモードまで、ネイティブWebアプリが登場しています。

Webアプリがネイティブアプリのように機能すると、デザインの相互作用も変更され、ユースケース、つまりアニメーションの遍在性に対応します。 アニメーションは、UberからLyft、SnapchatからInstagramまで、お気に入りのすべてのアプリでインタラクションを促進します。

Web開発者として、パフォーマンスと保守性の両方を備えたアニメーションを作成するための優れた基盤が必要です。これは、ネイティブWebアプリランドスケープにとって最も重要です。 After EffectsからCSSトランジション、アニメーション、キーフレームに移行できる必要があります。

After Effectsとは何ですか？

After Effectsは、アニメーションのキーイング、作成、追跡にグラフィックおよびモーションデザイナーが使用するAdobeの業界標準製品です。 これは、アニメーションレイヤーを視覚化しやすいサンプルビデオにエクスポートすることでチームにアイデアを伝えるために多くのデザイナーが使用する事実上のツールであり、アニメーションの開始時間と終了時間の参照テーブルが付属しています。

デモビデオと参照テーブルを組み合わせることで、開発チームはアニメーションの実装方法に関する優れたベースラインを得ることができます。 ビデオは全体像を見るために使用され、参照表はアニメーションの相互作用を成し遂げたり壊したりする詳細を提供します。

AfterEffectsでできること

After Effectsで作成できるものは、想像力によってのみ制限されます。 画像やビデオに無限の数のポストプロダクション効果を提供できます。 Webの範囲では、アイデアを共有するためのプラットフォームを提供します。

上記の赤いボールを考えてみましょう。 ボールは、After Effectsを使用してアニメーション化され、ゆっくりと中央に回転し、1秒間一時停止してから、ゆっくりと加速してビューポートを終了します。 動き、スケーリング、回転、さらには色の変更の古典的なWebアニメーションは、After Effectsで簡単に実行でき、実装するアニメーションの要件ドキュメント（またはビデオまたはGIF）として即座に生成されます。

始めるために必要なツール

JavaScript、HTML5、CSS3、およびその他の多くの言語が、Webサイトがトラフィックを受信するほとんどの主要なユーザーエージェントで標準になり、これらのツールを使用することはますます実現可能になっています。 以下は、アニメーションを実装するときに覚えておくべきいくつかの重要なテクノロジーです。

CSSトランジション

CSSトランジションは、CSSプロパティの変更が要素に適用される速度を制御する方法を提供します。 スタイルをすぐに（トランジションなしで）適用する代わりに、カスタマイズルールを使用して定義されたアクセラレーションカーブに徐々に適用することができます。 例として、ある期間にわたって背景色を黒から白に変更する場合があります。

 transition-property: background-color; transition-duration: 3s;

要素にこのルールを適用すると、背景色が変化するのに3秒かかり、徐々に黒から白に変化し、灰色の色合いになります。 これは、transition-timing-functionを追加して中間値を計算し、transition-delayを追加してアニメーションの開始を遅らせることにより、さらにカスタマイズできます。

CSSトランジションは、背景色の変更や要素の新しい場所への移動など、単純な操作に適しています。

CSSアニメーションの使用

CSSアニメーションは、ウェイポイントを使用して、アニメーション間の中間ステップをさらに細かく制御します。 ウェイポイント（またはキーフレーム）は、アニメーション中に特定のスタイルを要素に適用するときに固定された時点です。 次に、定義されたキーフレームを使用して、アニメーションがどのように表示されるかをレイアウトします。

要素をバウンスとしてアニメートしたいとします。 要素は上に移動し、元の位置に戻り、少し上に移動してから、元の位置に戻る必要があります。 キーフレームを使用して、その弾力性のある効果をアニメーションにかかる時間のパーセンテージに分解できます。

 @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-25px); } 60% { transform: translateY(-15px); } } .element { animation-name: bounce; animation-duration: 3s; }

CSSトランジションと同様に、開発者が構成するオプションはたくさんあります。 値infiniteを使用してanimation-iteration-countを使用してアニメーションを無期限に繰り返すことができます。また、プロパティanimation-directionを使用して、アニメーションが流れる方向を制御することもできます。 豊富なCSSアニメーションプロパティにより、アニメーションをデザインに一致させるためのきめ細かい制御が可能になります。

CSSアニメーションは、拡張、回転、バウンスなどの短い繰り返しアニメーションに役立ちます。

JavaScriptを使用する

JavaScriptには、Raspberry Piサーバーからクライアント側のコードまで、さまざまな用途がありますが、その主要な用途の1つは、要素のクラス名を変更することです。 クラス名の変更は、要素の状態を管理するための簡単で効果的な方法です。

例として、最初に非表示になっているコンポーネントにアニメーションを開始するように通知するactiveクラスの単純な追加があります。 下のボールを考えてみましょう。 JavaScriptを使用して、CSS遷移プロパティを使用してアニメーションをトリガーするクラスを追加します。

このアニメーションの最初の部分は、HTML、CSS、およびJavaScriptの単純な組み合わせを使用して複製できます。

HTML：

 <div class="ball"></div>

CSS：

 .ball { width: 100px; height: 100px; color: red; transform: scale(0.25); transition: all 1s ease-in; } .ball.active { transform: scale(1.25); }

JavaScript：

 setTimeout(function() { document.querySelector('.ball').addClass('active'); }, 500);

タイムアウト（ 500ms ）が経過すると、 activeのクラスがボールdivに追加され、 transformプロパティが変更されます。これにより、 transitionプロパティがトリガーされ、ボール要素のtransformプロパティが監視されます。 JavaScriptを使用してCSSクラスを変更すると、コンポーネントの状態を管理できるだけでなく、CSSアニメーションやトランジション以外のアニメーションをさらに制御できるようになります。

JavaScriptを使用してアニメーションを制御すると、状態を管理したり、ユーザー入力やアプリケーションの状態などの動的な要因に基づいてイベントをトリガーしたりするのに役立ちます。

アイデアからAfterEffects、CSSとJavaScriptまで

ページ上の要素をアニメーション化する必要があるタスクがあると想像してください。 この要素を赤いボールにしましょう。 ボールはページの周りを回転し、スケールアップおよびスケールダウンする必要があります。

After Effectsを使用すると、アニメーションがトリガーされたときにインタラクションがどのように見えるかのモックアップを作成できます。 下の動きのあるボールはその一例です。 赤いボールが最初にわずかに拡大し、次に円形ループの周りで加速し始め、減速して元の位置に戻ることに注目してください。 そうして初めて、ボールは元のサイズに縮小されます。

移動または停止する前に、ボールが成長または縮小する場所より上のスケールのシフトを考慮してください。 これは、デザイナーがAfter Effectsで作成した小さな機能であり、細部を見逃さないように、開発者に明確に伝える必要があります。

そのため、After Effectsから開発者に移行する前に、いくつかの準備を行う必要があります。 動作中のアニメーションのビデオファイルを作成し、それを開発者と共有して1日と呼ぶことはできませんでした。

私たちのアイデアを明確に伝える1つの方法は、アニメーションに必要な手順を詳しく説明したスプレッドシートを作成することです。 アニメーションの複雑さに応じて、チケットの単純な落書き、リストを含むテキストファイル、または本格的なスプレッドシートの場合があります。

アニメーションに関する情報を伝えるもう1つの方法は、アニメーションをビデオ自体に埋め込むことです。 これはAfterEffectsで直接行うことができ、スケーリングの量、ステップ数、その他の情報を追加して、実装者にコンテキストを提供します。 これにより、デモビデオを信頼できる唯一の情報源として使用できます。

After Effectsからエクスポートされたこのビデオファイルは、デザイナーと開発者の間の契約の一形態として機能します。 共通の理解があれば、説明したツールを使用して実装できます。つまり、CSSクラス、JavaScriptイベント、CSSトランジション、CSSアニメーション、JavaScriptアニメーションです。

1.アニメーションを分解する

パターンを探し、タイミングをメモします。

最初に行うことは、各要素（または要素のグループ）のアニメーションのタイムラインを描画することです。 アニメーションのタイミングとアニメーションのライフサイクルを同期させるには、アニメーションが交差する場所を理解する必要があります。 計画は複雑なアニメーションの鍵であるため、将来の要件に備えて保守可能な方法でソリューションを段階的に構築できます。

上記の情報から、次の手順に分類します。

1. コンポーネントを初期化し、トリガーを待ちます。
2. トリガーされたら、サイズを拡大してドロップシャドウを拡大します。
3. その後、 ease-in-out円を描くように動きます。
4. 次に、サイズを縮小し、ドロップシャドウを減らします。

アウトラインの利点は、どのコンポーネントがアニメーション要素の外側に存在する必要があるかを理解できることです。たとえば、ドロップシャドウはボールから独立している必要があります。 エッセイの概要を説明するのと同様に、アニメーションを分解すると、私たちがしなければならない作業についての考えが整理されます。 アウトラインは、アニメーションの背後にある思考プロセスを示しており、二重に私たちの仕事のドキュメントとして機能します。

2.利害関係者と交渉する

一部の領域を単純化できますか？ アニメーションのどの部分が必須ですか？ タイミングを同期できますか？

タスクを達成するために必要な作業を調査したら、交渉します。 デザイナーやプロダクトオーナーとの交渉は、すべての開発者の責任です。 実装者は、重要な成果、何ができるか、何が実際的でないかを完全に理解しています。

アニメーションから一見細かい部分を削除すると、ユーザーエクスペリエンスが変わる可能性があるため、アニメーションには注意が必要です。 開発ベースの例を示すと、アニメーションの動作を変更することは、API呼び出しから受け取る可能性のある応答ペイロードを変更することに似ています。特定のものを変更できますが、一部はそこにある必要があります。

これはケースバイケースの状況であり、設計者との関係、および発売のタイムラインを与えられた製品所有者との関係に基づいています。 特定のアニメーションを削除するように依頼することは、私たちの専門分野を超えているため、お勧めしません。

交渉への良いアプローチは、タイミングを同期するか、ブラウザがネイティブに実行できない可能性のあるアニメーションを単純化することです。また、JavaScriptを使用するアニメーションは、保守が難しく、パフォーマンスが低下する可能性があるため、避けてください。 代わりに、これらの譲歩を求めることができ、また求めるべきです。

3.攻撃を計画する

各要素の開始状態と終了状態を把握します。 各遷移タイミングが発生するはずの場所を見てください。 CSSクラスのBEMを活用して、アニメーションを明確に適用します。 CSSを優先してJavaScriptを制限する必要がある理由を理解してください。

前述のアニメーションを調べてみましょう。 5つの州が私たちに飛び出します：

1. 初期状態、赤いボールといくつかのドロップシャドウ。
2. ドロップシャドウが長いボールのスケールアップバージョン。
3. 円の周りのボールの動き;
4. ドロップシャドウとともにボールを縮小します。
5. 初期状態に戻り、トリガーされるのを待ちます。

5つの州すべてについて、前のスタイルと後のスタイルを確認する必要があります。 これにより、実装するために必要なアニメーションツールの種類に関する情報が得られます。

これを行うには、ベースケーススタイルから始めます。 要素がどこからともなく表示される場合、これは何もない可能性があります。チェーンアニメーションの場合は、以前のスタイルである可能性があります。

州間でスタイルをほとんど変更しないことで、シンプルに保ちます。 開始状態と終了状態を特定したら、それらをCSSクラスとしてラベル付けして、要素に簡単に適用できるようにする必要があります。 これにより、JavaScriptを使用して、要素が依存する可能性のあるAJAX呼び出しから受信したデータに基づいてクラスのアプリケーションを処理する柔軟性が得られます。

BEM CSSは、進行中のアニメーションの状態を修飾子を使用して表す方法があるため、命名戦略に最適です。 アニメーションが十分に一般的である場合、BEMは、コードベース間で機能するDRY（「自分自身を繰り返さない」）CSSクラスを維持するための優れた方法論でもあります。 まず、ブロックマーカーと要素マーカーだけから始めて、アニメーションを進めながらモディファイアを重ねていきます。

テンプレートクラスの旅のサンプルは次のとおりです。

 // State 1 <div class="ball"></div> // State 2 <div class="ball ball--scale-up"></div> // State 3 <div class="ball ball--scale-up ball--circling"></div> // State 4 <div class="ball ball--scale-up ball--circling ball--scale-down"></div> // State 5 <div class="ball"></div>

まず、アニメーション化する赤いボールを表すクラスボールを含むコンテナ要素から始めます。 アニメーションがエクスペリエンス全体で繰り返されると、スケールアップから円を描くように移動するまで、BEMクラス名も繰り返されます。 これは、スタイルが適用されたときに要素がどのように見えるかを追跡するためのメソッドです。

4.着実な実施

アウトラインが手元にあり、ツールをすぐに使用できるようになったら、プロジェクトの状態を州ごとに切り詰める必要があります。

必要に応じて前の状態に基づいて、各状態を個別のアイテムとして繰り返し取り組むことができます。 各状態が明確に定義されているため、実装の詳細ではなく、コードをDRYにして読みやすくすることに重点を置くことができます。 そしてもちろん、ロジックをカバーするテストを追加すると便利です。

初期状態

まず、わずかなドロップシャドウのある単純な赤いボールから始めます。

 .ball { background-color: #D24D57; width: 25px; height: 25px; margin: 5px; display: inline-block; border-radius: 50%; box-shadow: 0 8px 6px -6px #6C7A89; }

スケールアップする

スケールアップには、要素のサイズとそのドロップシャドウの2つの部分があります。 このアニメーションを処理するために、DRY-nessのスケールアップとスケールダウンの両方で共有されるscaleという名前のキーフレームを使用します。

 @keyframes ball-scale { from { transform: scale(1); box-shadow: 0 8px 6px -6px #6C7A89; } to { transform: scale(1.25); box-shadow: 0 10px 6px -6px #6C7A89; } } .ball--scale-up { animation: ball-scale 1s ease-out forwards; }

旋回（スケールアップアニメーション適用後）

circularという名前のキーフレームを使用し、そのtransform-originプロパティを移動して、要素を最初から円の中で移動します。 旋回は、スケールアップアニメーションが完了したときにのみ発生することに注意してください。

 @keyframes ball-circular { from { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(0deg) translateY(-100%) rotate(0deg); } to { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(360deg) translateY(-100%) rotate(-360deg); } } .ball--circling { animation: ball-circular 2s ease-in-out forwards; }

スケールダウン（旋回およびスケールアップアニメーションが適用された後）

スケールダウンするには、キーフレームスケールを再利用し、 animation-direction: reverseを使用して、スケールアップクラスとは逆の操作を行います。 これにより、元の状態に戻ります。

 .ball--scale-down { animation: ball-scale 1s ease-in forwards; animation-direction: reverse; }

作業デモ

これらすべてのクラスを1つのシーケンスに組み合わせると、AfterEffectsでレンダリングのCSS表現が実行されます。

ボールをクリックして開始します。

CodePenのChrisNg（@chrisrng）によるペンアニメーションボールを参照してください。

結論

この記事で取り上げるツールはほとんど最先端ではありませんが、ほとんどの主要なブラウザーで一般的にサポートされているため、今日でも使用できます。

以前は、アニメーションの実装は、jQuery Animateなどの外部ツールを使用して、ページ上で要素を移動するなどの単純なことを行うことを意味するため、困難でした。 現在、CSSの遷移とアニメーションは、GPUを活用して、ネイティブかつ効率的に実行できます。

アニメーションは常に、開発者、デザイナー、製品所有者の間の綱引きです。 秘訣は、すべての利害関係者が製品の品質に満足している中間点を見つけることです。 うまくいけば、このガイドがその移行に役立つことを願っています。