Web上のアニメーションのオプションを比較する

アニメーションは魅力的なトピックです。トランジションなどのインタラクションアニメーションを追加する場合でも、全画面エクスペリエンスを構築する場合でも、必要なツールはすべて揃っています。

アニメーションは魅力的なトピックです。トランジションなどのインタラクションアニメーションを追加する場合でも、フルスクリーンエクスペリエンス全体を構築する場合でも、必要なツールはすべて揃っています。

そして、あなたにはかなりの数の選択肢があり、それらはすべて完全に異なり、異なる目的を果たします。

CSSJavaScriptも非常にパフォーマンスが高い場合がありますが、一般的にパフォーマンスが高いことが知られています。それはすべて、あなたが何をする必要があるか、そして各フレームがレンダリングするのにかかる時間に依存します。

これらのオプションの概要を見て、どれが正しい選択であるかを見つけましょう。

CSSトランジション

CSSトランジション開始と終了があります。それらは、XからYに、または表示から非表示に1ポイント移動します。

これは最も単純なアニメーションであり、主にページの他の部分とうまく統合される微妙なアニメーションに使用されます。

遷移を使用すると、ある状態から別の状態に移行しますが、それ以上の状態にすることはできません。

CSSアニメーション

CSSアニメーションCSSトランジションと比較すると、2つ以上の状態を設定できます。実際、多くの状態を設定でき、より複雑なアニメーションを作成するために使用できます。

CSSアニメーションは、トランジションでは実行できない比較的単純なアニメーションが必要な場合に推奨されます。

SVGアニメーション

SVGは、SVGアニメーションの「ネイティブ」形式であるSMILを使用してアニメーションを作成できる優れたベクターベースの形式です。

SMILはChromeで非推奨になりつつありましたが、SMILにはブラウザー間の不整合がありますが(IE / Edgeはサポートしていません)、チームは抵抗のために当面この決定を覆しました。

彼らは、SMILの代わりにCSSアニメーションとWebアニメーションAPIをプッシュしたいと考えています。

CanvasAPIアニメーション

ザ・Canvas APIベクトルではなくラスターを使用して、画面にペイントする方法を提供します。

パフォーマンスは劣りますが、アニメーションは可能です

WebアニメーションAPI

Web Animations APIは、Web上のアニメーションの未来です。これは、JavaScriptを使用してより長いアニメーションを簡単に作成できるCSSアニメーションのパフォーマンスをもたらすことを目的としています。

現在、ChromeとFirefoxでのみ機能しています。 Safari、IE、Edgeはまだ検討中ですが、ポリフィルが存在しますすべてのブラウザで機能するようにします。

WebGL

WebGLを使用すると、3Dアニメーションを作成できます。より複雑ですが、没入型のフルスクリーンアニメーションエクスペリエンスやVRに適しています。


ネイティブAPIに加えて、詳細のほとんどを抽象化する優れたライブラリがあります。