javascriptの列では、CSSおよびJSアニメーションの基本原則を紹介しています。
関連する無料学習の推奨事項：javascript（ビデオ）の
概要
アニメーションは、人目を引くWebアプリケーションの作成において重要な役割を果たすことを知っておく必要があります。ユーザーがユーザーエクスペリエンスにますます注意を向けるにつれて、マーチャントは完璧で楽しいユーザーエクスペリエンスの重要性を認識し始めます。その結果、Webアプリケーションは重くなり、より動的でインタラクティブなUIを備えています。これらはすべて、ユーザーがプロセス全体で状態遷移をよりスムーズに行えるように、より複雑なアニメーションを必要とします。今日、これは特別なこととは見なされていません。ユーザーはますます重要になっています。デフォルトでは、ユーザーは応答性が高くインタラクティブなユーザーインターフェイスを期待しています。
ただし、インターフェイスのアニメーションは必ずしも単純ではありません。アニメーションとは何か、いつ使用すべきか、アニメーションにどのようなビデオ効果を持たせるべきか、これらはすべて厄介な質問です。
JavaScriptとCSSアニメーションの比較
Webアニメーションを作成する2つの主な方法は、JavaScriptとCSSを使用することです。正しい選択も間違った選択もありません。それはすべて、達成したい効果によって異なります。
CSSアニメーション
CSSを使用してアニメーションを作成するのが、要素を画面上で移動させる最も簡単な方法です。
これは、要素をX軸とY軸上で50ピクセル移動させ、1秒間続くCSS遷移を介して要素を移動させる方法の簡単な例から始まります。
1
2
3
4
5
6
7
8
9
10
11
12
.box {
-webkit-transform：translate（0、0）;
-webkit-transition：-webkit-transform 1000ms;
transform：translate（0、0）;
transition：transform 1000ms;
}
.box.move { -webkit-transform：translate（ 50px、50px）; transform：translate（50px、50px）; }要素がmoveクラスを追加したら、transformの値を変更してから、トランジション効果を作成します。トランジション期間に加えて、実際にはアニメーションのモーション速度モードであるイージングプロパティもあります。このパラメータについては後で詳しく説明します。上記のコードスニペットのように、アニメーションを実装するために個別のCSSクラスを作成する場合は、もちろん、JavaScriptを使用して各アニメーションを切り替えることもできます。次の要素：1 2 3 pclass = "box"> サンプルコンテンツ。
次に、JavaScriptを使用して各アニメーションを切り替えます。
1
2
3
4
5
6
7
var boxElements = document.getElementsByClassName（ 'box'）、
boxElementsLength = boxElements.length、
i;
for（i = 0; i <boxElementsLength; i ++）{ boxElements [i] .classList.add（ '移動'）; }上記のコードは、アニメーションをトリガーするボックスクラスを含むすべての要素に移動するクラスを追加することです。そうすることで、アプリケーションに適切なバランスを提供できます。JavaScriptを使用して状態を管理することに集中できます。ターゲット要素に適切なクラスを設定し、ブラウザーにアニメーションを処理させるだけです。あなたはこのルートをたどる場合は、要素の上にtransitionendイベントに耳を傾けることができますが、前提は、Internet Explorerの古いバージョンのサポートを放棄することです：次のようにtransitionendリスナーによってトリガーイベントがある：1 2 3 4 5 6 var boxElement = document.querySelector（ '。box'）;
boxElement.addEventListener（ 'transitionend'、onTransitionEnd、false）;
function onTransitionEnd（）{ //トランジションの終了を処理します。} CSSトランジションの使用に加えて、CSSアニメーションを使用することもできます。これにより、個々のアニメーションをより適切に制御できます。キーフレーム、期間、ループ数。キーフレームは、ブラウザのCSSプロパティが特定の時点で持つ必要のあるCSSプロパティを示し、空白を埋めるために使用されます。ここで簡単な例である：1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
33
34
.box { / * アニメーションの名前* /アニメーション名：movingBox; / * アニメーションの長さ* /アニメーションの長さ：2300ms; / * アニメーションの実行回数* /アニメーションの反復- count：infinite; / *オブジェクトアニメーションがループ内で逆方向に移動するかどうかを設定するメソッド* / animation-direction：alternate; } @keyframes MovingBox { 0％{ transform：translate（0、0）; opacity：0.4 ; } 25％{ 不透明度：0.9; } 50％{ 変換：translate（150px、200px）; 不透明度：0.2; } 100％{ 変換：translate（40px、30px）; 不透明度：0.8; }
}
効果の例します。https：//sessionstack.github.i...Using
CSSアニメーションを、あなたが独立してターゲット要素のアニメーション自体を定義し、目的のアニメーションを選択するために、アニメーション-name属性を使用することができます。
CSSアニメーションはまだある程度ブラウザプレフィックスを追加する必要があり、-webkitはSafari、Safari Mobile、Androidで使用されます。Chrome、Opera、Internet Explorer、Firefoxではプレフィックスを追加する必要はありません。多くのツールは、必要なCSSのプレフィックスを作成するのに役立つため、ソースファイルにスタイルプレフィックスを含める必要はありません。
JavaScriptアニメーション
CSSトランジションまたはCSSアニメーションと比較して、JavaScriptを使用してアニメーションを作成することはより複雑ですが、通常、開発者により強力な機能を提供します。
JavaScriptアニメーションは、コードの一部としてインラインで記述されています。それらを他のオブジェクトにカプセル化することもできます。以下では、JavaScript使用して初期CSS遷移実装するためのコードである：
1
2
3
4
5
6
7
8
9
VAR boxElement = document.querySelector（」箱'）;
VARアニメーション= boxElement.animateを（[
{変換：'翻訳（ 0） '}、
{変換：' translate（150px、200px） '}
]）
animation.addEventListener（ 'finish'、function（）{ boxElement.style.transform = 'translate（150px、200px）'; }）デフォルトでは、Webアニメーションは要素の表示効果のみを変更します。オブジェクトを移動位置に残したい場合は、アニメーションが完了したときにその基本スタイルを変更する必要があります。これが、上記の例で終了イベントがリッスンされ、box.style.transformプロパティがtranslate（150px、200px）に設定されている理由です。このプロパティ値は、CSSアニメーションによって実行される2番目のスタイル遷移と同じです。JavaScriptアニメーションを使用すると、すべてのステップで要素のスタイルを完全に制御できます。つまり、必要に応じて、アニメーションの速度を落としたり、アニメーションを一時停止したり、停止したり、反転したり、要素を操作したりできます。これは、複雑なオブジェクト指向アプリケーションを構築している場合に特に役立ちます。これは、必要なアニメーション動作を正しくカプセル化できるためです。定義の容易化自然な移行効果により、ユーザーはWebアプリケーションをより快適に感じるようになり、ユーザーエクスペリエンスが向上します。もちろん、あるポイントから別のポイントに直線的に移動するものはありません。実際、私たちの周りの物理的な世界で物事が動くとき、私たちが真空状態にないため、物事は加速または減速する傾向があり、これに影響を与えるさまざまな要因があります。人間の脳はこのような動きを感じることを期待しているので、Webアプリケーションのアニメーションを作成するときは、このような知識を活用することをお勧めします。理解すべきいくつかの用語は次のとおりです。イーズイン—均一な速度と比較して、最初は遅く、次にすばやくイーズアウト—一定の速度と比較して、最初は速く、最後は遅いイーズインアウト—均一な速度と比較して、開始と終了両方が遅い）両端が遅い
イージングキーワードの
CSSトランジションとアニメーションを使用すると、使用するイージングのタイプを選択できます。さまざまなキーワードがアニメーションのイージングに影響します。また、イージング方法を完全にカスタマイズすることもできます。
イージングを制御するために選択できるCSSキーワードは次のとおりです。
線形
イーズイン
イーズアウト
イーズインアウト
これらの兄弟を詳しく見て、それぞれの効果がどのように表示されるかを見てみましょう。
線形アニメーション
イージング方法のデフォルトは線形です。以下は線形遷移効果の図です。
時間が増加すると、値は比例して増加します。線形モーション効果を使用すると、アニメーションが不自然になります。一般的に、線形モーション効果の使用は避けてください。
以下に、アニメーション線形簡単に実装する方法である：
1
遷移：リニア500msの変換;
やすアウトアニメーション
としては、アニメーションがゆっくり迅速かつ両端開始アウト緩和、線形アニメーションと比べて、前述した次のようにトランジション効果が示されている：。
一般的に言えば、イージングアウトトランジション効果は、クイックスタートで応答の速いアニメーションの感覚が得られ、終了がスムーズになるため、インターフェイスエクスペリエンスに最適です。これは、移動速度が一貫していないためです。
イーズアウト効果を実現する方法はたくさんありますが、最も簡単なのはCSSのイーズアウトキーワードです
。1
トランジション：500ミリ秒の
イーズアウト変換;イーズインアニメーション
イーズアウトアニメーションとは異なり、最初は速く、最後は遅いトランジション効果の図は次のとおりです。
イーズアウトアニメーションと比較すると、起動が遅いと人々に異常を感じさせる可能性があります。応答が遅いセンセーションなので、無反応感があります。アニメーションは非常に速く終了しますが、アニメーション全体が加速しているため、奇妙な感覚も生じます。現実世界のオブジェクトは、突然停止すると減速する傾向があります。
イーズアウトおよびリニアアニメーションと同様に、CSSキーワードを使用してイーズインアニメーションを実装します
。1
トランジション：500ミリ秒のイーズイン変換;
イーズインアウトアニメーション
このアニメーションは、イーズインおよびイーズアウトのトランジションエフェクトのコレクションです。写真は次のとおりです。
アニメーションの長さを長くしすぎないでください。UIが反応しなくなるためです。
イーズインアウトCSSキーワードを使用して、イーズインアウトアニメーションを実現します
。1
トランジション：500ミリ秒のイーズインアウトを変換します。
カスタムイージング
は、独自のイージングカーブを定義することもできます。これにより、アニメーション効果をより適切に作成できます。
実際、ease-in、linear、easeキーワードは、事前定義されたベジェ曲線にマップされます。ベジェ曲線の詳細については、CSS遷移仕様とWebアニメーション仕様を参照してください。
ベジエ曲線
ベジエ曲線は、2次元グラフィックスアプリケーションで使用される数学的曲線です。曲線の定義：開始点、終了点（アンカーポイントとも呼ばれます）、制御点。制御点を調整することにより、ベジェ曲線の形状が変化します。1962年、フランスの数学者ピエールベジェは、このベクトル描画法を最初に研究し、詳細な計算式を作成しました。そのため、この式に従って描画された曲線は、彼の名前にちなんでBeiSel曲線と呼ばれました。
CSS3遷移タイミング機能性、その構文は次の通りれる：
1
遷移タイミング機能：線形|容易|容易イン|容易アウト|容易・イン・アウト|立方ベジェ（N、N、N、N- ）;
全体として、cubic-bezier（n、n、n、n）の形式を使用してすべての属性値を表すことができ、ここではベジェ曲線が含まれます。
ベジェ曲線がどのように機能するかを見てみましょう。ベジェ曲線には4つの値が必要です。より正確には、2組の数値が必要です。各ペアは、3次ベジェ曲線の制御点のX座標とY座標を表します。ベジェ曲線の開始点の座標は（0、0）で、終了座標は（1、1）です。2つのチェックマークを設定できます。2つの制御点のX値は[0,1]の範囲内である必要があり、各制御点のY値は[0,1]の制限を超えることができますが、そうではありません。指定されている量を明確にします。
各制御点のX値とY値がわずかに変化しても、まったく異なる曲線が得られます。2つのベジェ曲線を見てみましょう。2つのグラフは似ていますが、座標制御ノードが異なります。
そして
あなたが見ることができるように、二つのグラフはかなり異なっている、第一の制御点ベクトル差（-0.427、-0.054）（0.045、0.183）ベクトル差、及び第2の制御点ベクトル差です。
2番目の曲線のスタイルは次のとおりです：
1
遷移：変換500msキュービックベジェ（0.465、0.183、0.153、0.946）;
最初の2つの数値は最初の制御点のX座標とY座標であり、最後の2つの数値は2番目の制御点のX座標とY座標です。
パフォーマンスの最適化
アニメーションを使用する場合は、毎秒60フレームを維持する必要があります。そうしないと、ユーザーエクスペリエンスに影響します。
世界の他のすべてのように、アニメーションにもパフォーマンスのオーバーヘッドがあります。一部のプロパティのアニメーションパフォーマンスのオーバーヘッドは、他のプロパティよりも小さくなっています。たとえば、要素の幅と高さをアニメーション化すると、その幾何学的構造が変化し、ページ上の他の要素が移動したり、サイズが変化したりする可能性があります。このプロセスはレイアウトと呼ばれます。レイアウトとレンダリングについては、前回の記事で詳しく説明しました。
一般に、レイアウトや再描画をトリガーするプロパティのアニメーション化は避けてください。最近のほとんどのブラウザでは、これはアニメーションを不透明度と変換プロパティに制限することを意味します。
Will-change
は、will-changeを使用して、要素の属性を変更する予定であることをブラウザーに通知できます。これにより、ブラウザーは、変更を行う前に最も適切な最適化を行うことができます。ただし、will-changeを使いすぎないでください。使いすぎると、ブラウザがリソースを浪費し、パフォーマンスの問題が増えるためです。
意志変化の使用は、次のようにされている：
1
2
3
■は{ 意志変化：変換、不透明度; }このプロパティは、クロム、Firefoxとオペラと互換性があります。JavaScriptアニメーションとCSSアニメーションのどちらを選択するか
Google Developerによると、レンダリングスレッドはメインスレッドとコンポジタースレッドに分けられます。CSSアニメーションが変換と不透明度のみを変更する場合は、CSSアニメーション全体を合成スレッドで完了することができます（JSアニメーションはメインスレッドで実行され、合成スレッドは次のステップでトリガーされます）。 JSはいくつかの高価なタスクを実行します。メインスレッドはビジーであり、コンポジションスレッドを使用することで、CSSアニメーションをスムーズに保つことができます。
多くの場合、コンポジションスレッドは変換と不透明度プロパティ値の変更も処理できます。
フレームレートのパフォーマンスが低い低バージョンのブラウザの場合、CSS3は自然に劣化する可能性がありますが、JSでは追加のコードを記述する必要があります。
CSSアニメーションには自然なイベントサポートがあり（TransitionEnd、AnimationEndですが、ブラウザーにはすべてプレフィックスを付ける必要があります）、JSはそれ自体でイベントを書き込む必要があります。
アニメーションがペイント、レイアウト、またはその両方をトリガーする場合、作業を完了するには「メインスレッド」が必要です。これはCSSとJavaScriptベースのアニメーションの両方に当てはまり、レイアウトまたは描画のオーバーヘッドにより、CSSまたはJavaScriptの実行に関連する作業が小さくなり、問題が無意味になる可能性があります。
CSS3には互換性の問題がありますが、JSにはほとんどの場合互換性の問題はありません。
まとめ
アニメーションが単純な状態切り替えである場合、中間のプロセス制御は必要ありません。この場合、CSSアニメーションが推奨されるソリューションです。これにより、ページをJavascriptライブラリで溢れさせることなく、アニメーションロジックをスタイルファイルに配置できます。ただし、非常に複雑なリッチクライアントインターフェイスを設計している場合、または複雑なUI状態のAPPを開発している場合。次に、jsアニメーションを使用して、アニメーションの効率を維持し、ワークフローをより制御しやすくする必要があります。したがって、いくつかの小さなインタラクティブな動的効果を実装するときは、より多くのCSSアニメーションを検討してください。一部の複雑なコントロールアニメーションでは、JavaScriptを使用する方が信頼性が高くなります。