Illustratorでいくつかのイラストを作成しており、現在作業中のWebサイト用にアニメーション化する予定です。Flashを使用したCreate.jsツールキットについて聞いたことがありますが、より良い」それを行う方法？
私が目指しているアニメーションの種類の例を次に示します。http : //kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/
Illustratorでいくつかのイラストを作成しており、現在作業中のWebサイト用にアニメーション化する予定です。Flashを使用したCreate.jsツールキットについて聞いたことがありますが、より良い」それを行う方法？
私が目指しているアニメーションの種類の例を次に示します。http : //kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/
回答:
Web上のものをアニメーション化する方法はたくさんあります。アニメーションを作成してからWebアニメーションにエクスポートする方法はさらにあります。
AfterEffectsやAnimate CC（IllustratorファイルとPhotoshopファイルの両方をインポートできます）のようなものでアニメーションを設計することには、分業とグラフィカルエディターの使用という明らかな理由から大きな利点があります。
そうは言っても、最終的には常に次のいずれかにコンパイルする必要があります。
制限された対話機能：
より完全なインタラクティブ：
次に、それぞれについてもう少し詳しく説明します。
GIFは、アニメーションの操作があまり必要ない場合、動的にサイズ変更する必要がなく、比較的小さい場合に適した方法です。適切に作成されたGIFは、パフォーマンスの心配なしに、リンクしたイラストと同じくらい詳細にできます。その上に配置された透明なオーバーレイ（またはその一部）を使用したわずかな操作でも可能です。
補足：GIFファイルをオンザフライでWebMまたはMP4ビデオ形式に変換するImgurによって作成された.gifv形式があります。これにより、最終ファイルサイズが大幅に削減され、パフォーマンスが向上します。同じことを検討することもできます。
スムーズで高度なスタイルのアニメーションを維持する別の方法は、スプライトを使用することです。Googleはこのアプローチをロゴアニメーションなどに使用します。もう1つの優れた例は、このアプローチを使用した病気のタイポグラフィアニメーションがあったAlexander Engzellの古いWebサイトです。これは、GIFが大きすぎるが、あまりやり取りする必要がない場合に最適です。
また、Googleが使用するスプライトまたはGIFに似た非常に興味深いJavaScriptアニメーションを見ました（左上のChromeイメージにカーソルを合わせます-Chromeにある必要があります）が、代わりにアニメーションマスクを使用します。私は彼らがこのアプローチを使って合計ファイルサイズを制限していると推測しています。
近年、ビデオに関する優れた機能を獲得しました。この<video>要素により、これまでにない方法でビデオのやり取りと使用方法をカスタマイズできます。これで、フルスクリーンの背景ビデオを簡単に使用でき、スクロールでフレームごとに移動するなどのことができます。また、FaceBookは、特別なイベントの周りのフィードでユーザーを歓迎するときに、いくつかの単純なアニメーションにビデオを使用していることに気付きました。利点は、非常に小さなファイルサイズに圧縮でき、より幅広いアニメーション（ビデオ編集ソフトウェアでできること）ができることです。そのため、誰かが病気のビデオを作ることができれば、それをウェブページへの素晴らしい追加に変えることはかなり簡単です。
明らかに、ビデオはWeb上の大部分のアニメーション（たとえば、ボタンの切り替えなど）には適していません。したがって、どこでも使用しないでください。
以上のことから、アニメーションを動的に生成したい場合、本当に基本的な相互作用以上のものが必要な場合、3D環境を作成したい場合、そして他の多くの場合、GIF、スプライト、またはビデオは単純にそれを切ります。これが決まったら、他のいくつかのオプションがありますが、最良のものはアニメーションとニーズに依存します。
統計はありませんが、私が見たほとんどのWebアニメーションはCanvasを使用しています。Canvasは、そのパフォーマンスと作成の柔軟性のために使用するのに最適です。実際のキャンバスのように-ものを重ねて描画するだけなので、ブラウザ（DOM）要素を1つだけ使用します。JavaScriptでペイントされたものと場所を追跡することにより、非常に素晴らしいアニメーションやゲームを作成することができます。
ただし、Canvasを使用する主な欠点は、スケーリングが比較的難しいことです。多くの場合、もちろんアニメーションによっては、他の手段を使用するよりもレスポンシブCanvasアニメーションを作成するのが困難です。もう1つの欠点は、Canvasエレメントがクロールできないため、Canvasに多くのコンテンツを持つことはあまりSEOフレンドリーではないことです（該当する場合は、コンテンツのHTMLを視覚的に非表示にすることで回避できます）。同じメモで、Canvasでは（特にCreateJSのようなライブラリを使用しない場合）ユーザーのテキスト選択などは困難です。
Canvasの主な用途はGoogleのDoodleです。これは多くの場合Canvasで行われます。彼らがゲームやインタラクティブなアニメーションを持っているとき、彼らは私が見たたびにCanvasを使用します。相互作用がない場合は、GIFまたはスプライトを使用します。
Canvasの操作を簡単にするのに役立つ優れたライブラリがたくさんありますが、何をする必要があるかによっては必要ありません。Canvas 専用に作成されたものには、CreateJS（Animate CCからエクスポート可能）、Pixi.js、PaperJS、KineticJS、FabricJS（私の印象の順に配置されています）があります。Lottie（以前のBodyMovin）という名前のAfter EffectsプラグインもCanvas（またはSVG [1]）にエクスポートでき、アニメーションエンジンが組み込まれています。
もちろん、GSAPなどの大きなアニメーションライブラリをCanvasと簡単にペアにすることもできます。リンクした図のように詳細なものについては、何らかのフレームワークを使用することをお勧めしますが、多くの場合、それらは実際には必要ではなく、有用です-特にそれらのいずれかを使用する方法を知っている場合は特に。
Web上のものを簡単に応答する方法でアニメーション化する別の非常に強力な方法は、SVG（スケーラブルベクターグラフィックス）を使用することです。それらは、スケーラブルなベクターであるという目的を果たします。多くの人は最初はSVGの使用に混乱を感じますが、SVGの座標系や変換などのほとんどのものには、それらを説明するすばらしい記事があります。
SVGのすばらしい点の1つは、JavaScript、純粋なCSS（:hoverstate、transforms、transitions、およびanimationsを含む）、またはSMILアニメーション（SVGで物事をアニメーション化する「ネイティブ」な方法でアニメーション化できることですが、IEはそうではありません） tはそれをまったくサポートしておらず、徐々に減価されています）。CSSが（比較的）単純でない場合は、まずCSSを使用し、次にJavaScriptを使用することをお勧めします。SVG要素をモーフィングするには、部分的にしかサポートできない場合を除き、実際にはGSAPのMorphSVGプラグインのようなツールを使用する必要があります。
SVG要素は任意の形状にすることができるため、それらを使用してクールな効果を作成できます。Sarah Drasnerは、SVGをアニメーション化するための最適な方法を示すSVGアニメーションに関する有用なパフォーマンスベンチマークを作成しました。
アニメーション（およびブラウザーサポートの必要性）に応じて、Snap.svgやGSAP などのライブラリーが役立つ場合がありますが、多くの場合、CSSと、必要に応じて小さなカスタムJSだけで十分です。そうは言っても、Lottie（以前のBodyMovin）と呼ばれるAfter EffectsプラグインとFlash 2 SVGと呼ばれるFlash拡張機能は、SVGアニメーションの作成に非常に役立ちます。
詳細については、SVG要素のアニメーション化に関するこの関連記事をご覧ください。
PS <object>タグでSVGを使用する<svg>か、インタラクティブな場合はXML要素に直接埋め込み、インタラクティブでない場合は背景画像として使用するのが最善ですが、他の方法もあります。
私の経験では、CSSアニメーションと遷移は、主にUI要素と他の基本的な遷移とアニメーションに使用する必要があります。それでも、UIアニメーション/遷移にGSAPやVelocity.jsなどのJSアニメーションライブラリを使用することが適切な場合があります。それは本当にあなたが望む振る舞いのタイプとCSSで行うのが便利かどうかに依存します。
純粋なCSSを使用してクレイジー なものを作成することはできますが、画像を追加で操作する場合でも、CSSを使用して例として提供するような複雑なイラストを作成することは一般的に困難です。複雑なCSSアニメーションは、JavaScriptの対応するアニメーションよりも維持するのが難しい場合がよくあります。もう1つの欠点は、CSSアニメーションをJavaScriptで変更するのが難しく、JavaScriptと混合した場合にあまりうまく再生されないことです。
そうは言っても、通常、トランジションとアニメーションを使用する単純なインタラクションではCSSを使用する必要があります。デフォルトにする必要があります。CSSを使用してアニメーション化する方法の学習を開始するには、Webアニメーションの紹介をご覧ください。
また、Animate.cssのようなライブラリから便利なアニメーションやイージング関数を見つけて、自分のプロジェクトから引き出したり、プロジェクトに追加したりできます。ライブラリ全体が必要になることはほとんどなく、必要な部分だけを使用します。
DOMベースのJavaScriptアニメーションはかなり簡単です。彼らはので、jQueryのような恐ろしいアニメーションライブラリの悪評を持っていanimate()ますが、（後述）のウェブアニメーションのAPIを使用する場合は特に、彼らは特に高く、実行することができ、などの特殊なアニメーションライブラリGSAP、Velocity.js、またはmo.js（ GSAPには、 jQueryを.animate特に置き換える特別なプラグインもあります）。このようなライブラリを使用すると、多くの要素をアニメーション化するなど、より集中的なアニメーションを実現するために、他のタイプのアニメーションよりも優れていることがよくあります。
DOMベースのアニメーションを使用する必要がある主な理由は、既に作成されたDOM要素を含む多くのユーザーアニメーションまたは複雑なタイムラインがある場合です。多くの場合、すでに指定されている理由により、DOMでCanvasのようなものを試して使用するのが最善です。
GSAPのようなライブラリを使用すると、アニメーションマトリックスを追跡することで、ホバー時のアニメーションを遅くするなどのクレイジーなことができます。このようにして、DOMベースのアニメーションは、他のどの形式のアニメーションよりもカスタマイズされ、インタラクティブになります。唯一の欠点は、構築方法や必要な処理によっては、パフォーマンスが低下する場合があることです。
WebGLは、主に3D作品を作成する方法です。あなたがチェックアウトする必要があるいくつかの素晴らしいプロジェクトがあります。もちろん、すべてのWebページで使用されるわけではありませんが、言及することが重要です。
DOM要素を実際にアニメーション化して、3D（および2D）環境を作成します。ライブラリを使用する場合、WebGLはCanvasの使用に戻りますが、それでもモバイルでの優れたサポートがなく、パフォーマンスが高くなる可能性があります。一般に、WebGLを使用する必要があるかどうかは非常に明確です。
私の経験から、WebGLライブラリを使用することは実質的に必要です。ありがたいことに、いくつかの良いものがあります。ThreeJSは、PixiJSに続いて私が見た中で最も一般的です。A -FrameのようなWebGLフレームワークを使用すると、基本的なものを簡単に作成して作成することもできます。
ウェブアニメーションAPIは、アニメーションが実装され、パフォーマンスの向上とペアブラウザ間で維持されている方法を標準化しようとする試みです。SVGを含むDOM要素で使用することを意図しています。これは、CSSアニメーションの構造（JSのようなフォーム）に似ていますが、タイムラインやパフォーマンスの向上などの機能を追加します。
コンポジタースレッドにアニメーションを配置することでパフォーマンスが向上します（詳細については、このテーマに関するこのすばらしい投稿をご覧ください）。使用方法の概要については、Mozillaのドキュメントまたはこの紹介記事をご覧ください。
あなたは「求めることができるこれは、JavaScriptのアニメーションライブラリを置き換えるのだろうか？」答えは「あるうまくいけば、いくつかの」。ネイティブブラウザのアニメーションエンジンが改善されることは誰にとっても有益であり、改善されると、あまり強力でないアニメーションライブラリも役に立たなくなります。そうは言っても、より強力なアニメーションライブラリには、GSAPが指摘したような追加の利点があります。WAAPIが広くサポートされるとライブラリが必要かどうかは、ニーズによって決まります。
現在、WAAPIには十分なサポートがありませんが、現在の生産でポリフィルを使用できます。引き続き改善され、より多くのサポートが得られるようです。
非パフォーマンスのプロパティを使用したり、リフロー/再ペイントを引き起こしたりしないでください。
ページ上の要素の束をアニメーション化することは避けてください。これらの要素はより集中的であり、後で変更するのが面倒な場合もあります。
CSSを使用するtransitionときは、可能な限り（理由の範囲内で）アニメーション上でオーバーを使用します。パフォーマンスが向上し、一般的に作業が容易になります。
will-changeブラウザが事前に認識できるように、アニメーション化する大きな要素でプロパティをインテリジェントに使用します。詳細および提案については、このテーマに関するこのSitePoint記事のようなものをお読みください。
回避setIntervalのためとオプトrequestAnimationFrameJavaScriptでタイミングを行う際（あなたは自分のタイムラインを使用している場合GSAPのような良いアニメーションライブラリはあなたのためにこれを行います）。
可能であれば、WebアニメーションAPIを使用します。これには、JavaScriptにはない他のメソッドでアニメーション化する機能があるためです。
最終製品でFlashを実行しないでください。JavaScriptアニメーションのパフォーマンスは向上し、より動的になり、編集が容易になり、ダウンロードが不要になり、より多くのプラットフォームで動作し（Flashはほとんどのタブレット/携帯電話で動作しません）、かさばる古いFlashよりも応答性が高くなります。また、アクセスしにくく、SEOフレンドリーではありません。
そうは言っても、Animate CC（Flashのブランド変更）はアニメーションを作成する便利な方法であり、Create.jsを使用してCanvasにエクスポートできます。
通常、アニメーションを作成するために使用できる複数の方法があります。最善の方法は、実行する内容によって異なります。明確なより良い方法がない場合があります。多くの場合、同じプロジェクトで複数を使用しています。重要なことは、批判的に考え、アニメーションの動作を正確に理解し、それに基づいて方法を決定することです。また、それぞれに少しずつ取り組んできた場合にも役立ちます。
[1]-Lottie は、ネイティブのAndroid、iOS、およびReact Nativeにもエクスポートできます。
私の経験では、静的アニメーション（ユーザーとのやり取りを意図していないアニメーション）を行っているときに、After Effectsでイラストをアニメーション化し、その後、最終結果を.GIFファイルにエクスポートするのが最適であることがわかりました。これにより、アニメーションは完全にブラウザフレンドリーになり、どのデバイスでも同じ視覚化が保証されます。
ただし、ユーザーがやり取りする可能性のあるものを探している場合、Canvasが実際に進むべき道であり、そのため、CreateJSはEaseJSライブラリを使用するジョブに適しているように思われます。
とにかく、あなたの例によれば、アニメーションGIFファイルでも同じことができ、まったく同じ結果を得ることができます。
After Effectsを使用する場合は、Bodymovinプラグインを使用できます。モバイルおよびWebで使用できるように作業をレンダリングします。HTMLで使用できる.jsonおよびlottie.jsファイルがあります。ただし、最初に、一般的な設定で[スクリプトによるファイルへの書き込みを許可し、ネットワークにアクセスする]をオフにする必要があります。それが終わったら、Window、Extensionsに行き、Bodymovinを見つけます。コンポジションを選択し、保存する場所を設定して、レンダリングをクリックします。.jsonファイルとlottie.jsファイルをHTMLに入れれば、作業は完了です。GIFを読み込むのにより多くの時間を必要とするため、GIFは最適なソリューションではないと思います。
ここからダウンロードできます：http : //aescripts.com/bodymovin価格を追加するか、無料でご希望の場合は$ 0.00を入力してください...
ここに、Bodymovinを使用し、WebサイトでVisual Studioを使用してアニメーションを設定するためのチュートリアルがあります：youtube.com/watch?v=YmPsCD5jRDw&t=282s
HTMLとCSSの基本を知っているなら、それはあなたにとって簡単なはずです。そのチュートリアルが私を助けてくれました。これがあなたの助けになることを願っています。