先日、シンプルなHTMLといくつかのJSライブラリを使用して、GSAPプラットフォーム上のCreateJSにエクスポートして、Animate CCで以前に行ったバナーを再描画しようとしました。
私はすぐに、その研究はほとんど研究的性質のものであることが判明したと言わなければならず、これまでのところ、この記事の最後に記載されているいくつかの理由で、この基礎を使用しません。 それでも、このツールは「最初から」非常に使いやすいことが判明したため、さまざまな「効果」をページに追加したい人にはお勧めします。
少し前、自動車工場からバナーが送られてきました。このバナーには、地元のリソースに広告を掲載するためのディーラーの連絡先情報を挿入する必要がありました。 アーカイブを展開した後、完成したhtmlと画像とスクリプトを含むフォルダー以外には何も表示されませんでした。 それはソースのないバナーだと思い（私は常にAnimate CCに取り組んでいます）、その中に何があるかを見るために登りました。 内部は通常のレイアウトで、20行のスクリプトがすべてのシンプルなインテリアをアニメーション化しました。 バナーを変更して、GSAPとTimelineLiteが何であるかを確認しました。
シンプルで直感的なサンプル動画
少し前までは空き時間があり、既製のバナーの1つをGSAPにリロードしました
| Createjs | GSAP |
|---|---|
 |  |
私は特にGSAPドキュメントにフォントを含めませんでしたが、誰もがHTMLドキュメントに独自のフォントを挿入する方法を知っていますが、Animate CCではこのプロセスは少し重要です。
GSAP Pros
- CSSプロパティをアニメーション化します。 痛み、悲しみ、恥ずかしさAnimate CC / CreateJSとデフォルトのAnimate CCムービー-長い期間CSSに存在していたが、キャンバスCreateJS内でサポートされていない（またはサポートが不十分な）ぼかし、影、その他のもの
- ネイティブフォントとアンチエイリアス。 どんなフォントでも、HTMLドキュメントに挿入できますが、わずらわしいことはありません。ドキュメントで使用される文字のセットによっては、結果のファイルは大きくなりません。 CSSのいくつかの単語を使用してバナー全体のフォントを変更する
- 箱から出して簡単に。 Aniimate CCでは、イージング関数の曲線を常にドラッグする必要があります。ここでは、要素の美しいスローダウンを得るために何もしませんでした
- FPS Animateドキュメントでは、FPSへのパフォーマンスの強い依存性を観察できます。CPUリソースを大量に消費しないように、特定のケースごとに最適な値を常に選択する必要があります。 コンピューターでの私の例では、違いはそれほど大きくありませんでしたが、電話ではかなり強かったです。 そして、推奨事項を読んだ後は、 そこで減速していないものしか考えられません
- 適応性。 メディアクエリは、映画のスクリプト内の幅/高さを数えるよりもずっと簡単です。 ラバーキャンバス要素とは異なり、ラバーdivはリソースをまったく消費しません
- ページ上の要素のアニメーション。 わずか数分で既存のレイアウトを簡単に「色付け」できます
- 主要な人員の概念の不在（または変更）。 たとえば、要素はその場所に配置され、アニメーションの最後にあるべきプロパティとfromディレクティブの助けを借りて、アニメーション化されたプロパティを現在の状態に設定します。 または、toディレクティブを使用して、最終状態が示されます
- 比較的シンプル。 追加のソフトウェアは必要ありません。コードは非常にシンプルでコンパクトです
Animate CCの長所
バナーに適用できます。ページ上の要素のアニメーションでは、これらの問題は軽微です。
- タイムラインとレイヤー。 裸のHTMLのマルチレイヤーバナーでは、z-indexを常に作成する必要があります。Animateでは、レイヤーの順序を好きなように簡単に変更できます。 複数のレイヤーの同時アニメーションも視覚的に表示されません。 Animate CCでのフレームの並べ替えも視覚的に簡単です。
- 独自のアニメーションを含むネストされたムービークリップ。 GSAPでこれを行う方法を理解していませんが、別のタイムラインに別の関数を作成する必要があることを理解しています
結果は何ですか
古典的な両刃の剣があります。任意のエディターを使用できますが、レイヤーの場所を監視し、頭のz-indexを再計算する必要があります。 パフォーマンスとシンプルさの向上により、視覚的なタイムライン編集ツールの不足を克服できます。 逆に、誰かがスクリプト化されたアニメーションのみを好む場合があります。 GSAPバナーの開発時間は、コンテナ内の要素の数に直接比例します。 既製ページの要素をアニメーション化するのが簡単であることは間違いなくこのライブラリのプラスであり、将来的にはウェブサイトで間違いなく使用しますが、バナーの場合、開発時間はこれまでのところ非常に重要です。