私は何年もの間Webアニメーションコーディングに取り組んでおり、他の人が同じことをするのを助けてきました。ただし、アニメーションを効率的に構(gòu)築する方法に焦點(diǎn)を當(dāng)てたクリーンなヒントのリストを見たことがないので、今すぐ共有してみましょう。

Greensock Animation Platform（GSAP）を使用します。シンプルで読みやすいAPIを提供し、アニメーション制作に集中できるように、クロスブラウザーの矛盾に対処します。 GSAPを使用したことがない場合でも、コードと概念は理解しやすいはずです。この記事を最大限に活用するために、最初にGSAPの基本に慣れたい場合は、GSAP（ビデオを含む）のエントリページです。

ヒント＃1：アニメーションライブラリを使用します

一部の開発者は、アニメーションライブラリを使用することは無駄だと考えています。なぜなら、ライブラリをロードせずにCSSトランジション、CSSアニメーション、WebアニメーションAPI（WAAPI）などのネイティブブラウザーテクノロジーでも同じことができるからです。場合によっては、これは正しいです。ただし、考慮すべき他の要因がいくつかあります。

• ブラウザのエラー、矛盾、互換性： GSAPなどのアニメーションライブラリは、これらの問題をあなたのために解決し、普遍的な互換性を持っています。 IE9でモーションパスを使用することもできます！ SVG要素の変換オリジンの処理、パスストローク測定、サファリの3D起源など、リストするスペースがない多くの問題など、クロスブラウザーの問題に関しては、多くの問題領(lǐng)域があります。
• アニメーションワークフロー： GSAPなどのツールを使用して中程度の複雑なアニメーションを構(gòu)築する方がはるかに高速で楽しいです。アニメーションをモジュール化し、必要に応じてそれらをネストし、タイミングを自動(dòng)的に調(diào)整できます。これにより、実験がはるかに簡単になります。私を信頼してください：CSSを使用してアニメーションシーケンスを構(gòu)築してからGSAPで構(gòu)築しようとすると、私が何を意味するかがわかります。違いの世界！將來の編集も高速になります。
• Animation Beyond Dom： Canvas、WebGL、一般的なオブジェクト、および複雑な文字列は、ネイティブテクニックを使用してアニメーション化することはできません。すべてのアニメーションに一貫したツールを使用する方が簡単です。
• ランタイムコントロール：優(yōu)れたアニメーションライブラリを使用すると、アニメーションシーケンス全體の速度を一時(shí)停止、再開、反転、検索、または徐々に変更できます。各変換コンポーネント（回転、ズーム、X、Y、チルトなど）を個(gè)別に制御できます。これらの値をいつでも取得することもできます。 JavaScriptアニメーションは、最大の柔軟性を提供します。
• 緩和オプション（リバウンド、弾性など）： CSSは、2つの緩和制御ポイントのみを提供します。 GSAPのCustomeaseを使用すると、想像できる緩和効果を作成できます。
• ヒステリシスの平滑化： CPU負(fù)荷が重すぎる場合、GSAPはジャンプを避けるために絶対タイミングまたは動(dòng)的調(diào)整を優(yōu)先することができます。
• 高度な機(jī)能： GSAPを使用すると、SVGを簡単に変形させ、物理/慣性を追加し、ブラウザでモーションパスを直接編集し、ポジショニングアウェアインターリーブを使用します。

業(yè)界のトップアニメーターのほとんどは、長年にわたってこれらの同じことについて學(xué)んだため、GSAPのようなツールを使用しています。非常に基本的なアニメーションを超えたら、JavaScriptライブラリはあなたの人生をずっと楽にし、まったく新しい可能性を開きます。

ヒント＃2：タイムラインを使用します

優(yōu)れたアニメーションライブラリは、単一のアニメーション（ Tweenと呼ばれる）を作成する方法と、タイムラインでアニメーションをソートする方法を提供します。タイムラインは、お互いの立場に従ってそれらを見つけることができるTweenの容器と考えてください。

ほとんどの場合、アニメーションが順番に実行される必要がある場合は、タイムラインを使用する必要があります。

 const tl = gsap.timeline（）;
tl.to（ "。box"、{duration：1、x：100}）
  .to（ "。box"、{duration：1、backgroundcolor： "＃f38630"}、 "= 0.5"）
  .to（ "。box"、{duration：1、x：0、回転：-360}、 "= 0.5"）

GSAPでは、デフォルトでは、タイムラインに追加されたTweenが、実行前に前のTweenが完了するのを待ちます。 = 0.5はまた、追加のオフセットまたは遅延を0.5秒に追加するため、最初のトゥイーンがどれだけ長く続いても、最初のTweenが完了してから0.5秒後に2番目のTweenが開始されます。

トゥイーンから1秒の間の時(shí)間を長くするには、= 0.5から= 1を変更するだけです！とてもシンプルです。このアプローチを使用すると、組み合わせの前の期間を計(jì)算することを心配することなく、アニメーションをすばやく反復(fù)させることができます。

ヒント＃3：相対値を使用します

「相対値」とは、次の3つのことを指します。

1. 現(xiàn)在の値に対する値をアニメーション化します。 GSAPは=および - =プレフィックスを認(rèn)識します。したがって、x： "= 200"は、現(xiàn)在のxに200ユニット（通常はピクセル）を追加します。 x： " - = 200"は、現(xiàn)在の値から200を減算します。これは、トゥイーンが互いに相対的に配置されている場合、GSAP位置パラメーターにも役立ちます。
2. 値をビューポートサイズの変更に応答する必要がある場合、相対ユニット（場合によってはVW、VH、％など）が使用されます。
3. 可能な限り（.fromto（）ではなく）。このようにして、各トゥイーンで開始値と終了値を宣言する必要はありません。はい、入力が少ない！たとえば、さまざまな色の要素がたくさんある場合、それらをすべて黒にアニメーション化できます。

ヒント＃4：キーフレームを使用します

同じターゲットを何度も何度も繰り返しアニメーション化することに気付いた場合、これはキーフレームを使用するのに最適な時(shí)期です！あなたはこのようにそれをすることができます：

 gsap.to（ "。box"、{keyframes：[
  {持続時(shí)間：1、x：100}、
  {持続時(shí)間：1、BackgroundColor： "＃f38630"、遅延：0.5}、
  {持続時(shí)間：1、x：0、回転：-360、遅延：0.5}
]}）;

タイムラインは必要ありません！ Tweenをスペースにするには、各キーフレームの遅延プロパティを使用するだけです。 （オーバーラップを作成するのは負(fù)の數(shù)になる可能性があります。）

ヒント＃5：スマートデフォルトを使用します

GSAPには、使いやすさ（ "Power1.out"）や期間（0.5秒）などのプロパティのデフォルト値があります。したがって、以下は、アニメーションを0.5秒間持続する効果的なトゥイーンです。

 gsap.to（ "。box"、{color： "black"}）

GSAPのグローバルデフォルト値を変更するには、gsap.defaults（）を使用します。

 //線形緩和と期間1を使用します
gsap.defaults（{ease： "none"、duration：1}）;

これは便利かもしれませんが、特定のタイムラインのデフォルト値を設(shè)定して、子供のみに影響するようにする方が一般的です。たとえば、親のタイムラインにデフォルト値を設(shè)定することにより、各子供のタイプ時(shí)間を避けることができます。

 const tl = gsap.timeline（{defaults：{duration：1}}）;
tl.to（ "。box"、{x：100}）
  .to（ "。box"、{backgroundcolor： "＃f38630"}、 "= 0.5"）
  .to（ "。box"、{x：0、回転：-360}、 "= 0.5"）

ヒント＃6：複數(shù)の要素を一度にアニメーション化します

これを3番目のトリックで簡単に述べましたが、それは獨(dú)自のトリックに値します。

同じ.boxクラスを共有する複數(shù)の要素がある場合、上記のコードはすべての要素を同時(shí)にアニメーション化します！

より複雑なセレクター文字列を使用して、異なるセレクターを持つ複數(shù)の要素を選択することもできます。

 gsap.to（ "。box、.circle"、{...}）;

または、要素が同じタイプ（セレクター文字列、可変參照、一般オブジェクトなど）である限り、さまざまな參照を渡すことができます。

 var box = document.queryselector（ "。box"）;
var circle = document.queryselector（ "。circle"）;

//時(shí)々後で…
gsap.to（[box、circle]、{...}）;

ヒント＃7：関數(shù)ベースの値、インターリーブ、および/またはループを使用します

関數(shù)ベースの値

ほぼすべてのプロパティでは、數(shù)字/文字列の代わりに関數(shù)が使用され、GSAPは最初のターゲットがTweenをレンダリングするときに各ターゲットに対して1回その関數(shù)を呼び出します。また、関數(shù)がプロパティ値として返すものは何でも使用します！これは、単一のトゥイーンを備えた多くの異なるアニメーションを作成し、違いを追加するのに非常に便利です。

GSAPは、次のパラメーターを関數(shù)に渡します。

1. 索引
2. 影響を受ける特定の要素
3. Tweenの影響を受けるすべての要素の配列

たとえば、インデックスに基づいて動(dòng)きの方向を設(shè)定できます。

または、配列からアイテムを選択できます。

よろめい

インターリーブを使用して開始時(shí)間を相殺することにより、アニメーションをよりダイナミックで面白く見せます。単一のトゥイーンの単純なインターリーブオフセットの場合、各アニメーションの開始時(shí)間の間に0.2秒を追加して、Stagger：0.2を使用してください。

また、オブジェクトを渡して、メッシュの中心やランダム化時(shí)間から外側(cè)に分岐するインテリア効果など、より複雑なインターリーブ効果を取得することもできます。

GSAPインターリービングの詳細(xì)については、インターリーブドキュメントをご覧ください。

サイクル

特に特定のイベント（ユーザーインタラクションなど）に基づいている場合、アニメーションを作成または適用する要素のリストをループすると便利です（後で説明します）。

プロジェクトリストをループする最も簡単な方法は、.foreach（）を使用することです。ただし、これはIEで.QuerySeLectorAll（）を使用して選択された要素ではサポートされていないため、代わりにGSAPのutils.toarray（）関數(shù)を使用できます。

以下の例では、各コンテナをループして、コンテナのアニメーションに子要素に範(fàn)囲を追加しています。

ヒント＃8：アニメーションをモジュール化します

モジュール性は、プログラミングの重要な原則の1つです。コードを簡潔にし、再利用可能で、変更しやすいままにしながら、より大きな作品に組み合わせることができる、理解しやすいブロックを構(gòu)築することができます。また、パラメーターと関數(shù)スコープを使用することを可能にするため、コードの再利用性が向上します。

関數(shù)

関數(shù)を使用して、トゥイーンまたはタイムラインに戻り、メインタイムラインに挿入します。

関數(shù)doanimation（）{
  //計(jì)算などの何かを行い、多分関數(shù)に渡されたパラメーターを使用します//トゥイーンを返し、上記の計(jì)算を使用してgsap.to（ "。myelem"、{duration：1、color： "red"}）;
}

Tl.Add（doanimation（））;

ネストされたタイムラインは、あなたのアニメーションの方法を本當(dāng)に変えることができます。これにより、コードをモジュール化して読みやすくしながら、非常に複雑なアニメーションを簡単に並べ替えることができます。

関數(shù)doanimation（）{
  const tl = gsap.timeline（）;
  tl.to（...）;
  tl.to（...）;
  // ...あなたが望むだけ多くのアニメーション！

  //すべての操作を完了したら、タイムラインリターンTLに戻ります。
}

const master = gsap.timeline（）;
master.add（doanimation（））;
master.add（doanotheranimation（））;
//その他のタイムラインを追加してください！

これは、Carl Schoolffの「よりスマートなアニメーションコードを書く」投稿からの修正された実用的なケースです。

Craig RoblewskyのStar Warsテーマを使用して同じテクニックを?qū)g証する、より複雑なデモを次に示します。

アニメーションビルドルーチンを関數(shù)に包むことで、アニメーションを簡単に再作成できます（たとえば、サイズ変更後）！

 var tl; //タイムライン関數(shù)BuildAnimation（）へのアクセス可能な參照を保持します{
  var time = tl？ Tl.Time（）：0; //古い時(shí)間を保存する（存在する場合）

  //存在する場合は、古いタイムラインを閉じます（tl）{
    tl.kill（）;
  }

  //新しいタイムラインを作成するtl = gsap.timeline（）;
  tl.to（...）
    。に（...）; //アニメーションtl.time（time）を?qū)g行します。 // Playheadを前のものに一致させるように設(shè)定します}

BuildAnimation（）; // window.addeventlistenerを起動(dòng)する（ "resize"、buildanimation）; //サイズを処理します

同じコードを繰り返して別の変數(shù)に1つの変數(shù)を交換することに気付いた場合、これは通常、一般的な関數(shù)を作成するか、代わりにループを使用してコードを乾燥させ続ける必要があります（繰り返さないでください）。

効果

エフェクトを使用すると、カスタムアニメーションを名前付きエフェクトに変換できます。これは、新しいターゲットと構(gòu)成を使用していつでも呼び出すことができます。これは、アニメーションの標(biāo)準(zhǔn)がある場合、または異なるコンテキストから同じアニメーションを呼び出したい場合に特に便利です。

これは、概念を示すために非常にシンプルな「フェードアウト」効果を示します。

 // GSAPを使用して効果を登録します。
gsap.registereffect（{
    名前：「フェード」、
    デフォルト：{持続時(shí)間：2}、//デフォルト値は、効果に渡された「config」オブジェクトに適用されます：（ターゲット、config）=> {
        return gsap.to（ターゲット、{duration：config.duration、opacity：0}）;
    }
}）;

//これで、次のように使用できます。
gsap.effects.fade（ "。box"）;
//またはデフォルト値をオーバーライドします。
gsap.effects.fade（ "。box"、{duration：1}）;

ヒント＃9：制御方法を使用します

GSAPは、トゥイーンまたはタイムラインの狀態(tài)を制御する多くの方法を提供します。それらには、.play（）、.pause（）、.reverse（）、.progress（）、.seek（）、.restart（）、.timescale（）、およびその他のメソッドが含まれます。

制御方法を使用すると、アニメーション間の移行をよりスムーズに（たとえば、ミッドウェイを逆転させることができる）、より良いパフォーマンス（毎回新しいインスタンスを作成するのではなく、同じTween/Timelineを再利用することにより）を行うことができます。また、アニメーションの狀態(tài)をより詳細(xì)に制御できるようにすることで、デバッグにも役立ちます。

簡単な例を次に示します。

素晴らしいユースケースは、タイムラインのタイムスケールを調(diào)整することです！

ユースケース：アニメーションをトリガーするインタラクティブなイベント

ユーザーインタラクションイベントのリスナーでは、制御方法を使用してアニメーションの再生ステータスを細(xì)かく制御できます。

以下の例では、各要素のタイムラインを作成し（すべてのインスタンスに対して同じアニメーションをトリガーしないように）、そのタイムラインへの參照を要素自體に追加し、要素がホバリングされているときに関連するタイムラインを再生し、マウスが去るときに逆にします。

ユースケース：タイムライン內(nèi)の複數(shù)の狀態(tài)間でアニメーション化します

アニメーションのセットが同じ要素の同じプロパティに影響を與えることを望むかもしれませんが、一部のシーケンス（たとえば、アクティブ/非アクティブな狀態(tài)、それぞれがマウスオーバー/マウスアウト狀態(tài)を持つ）のみです。管理するのは難しい場合があります。タイムラインの狀態(tài)とコントロールイベントを使用して、それを簡素化できます。

ユースケース：スクロール位置に基づくアニメーション

制御方法を使用して、スクロール位置に基づいてアニメーションを簡単にトリガーできます。たとえば、このデモンストレーションは、スクロール位置に到達(dá)した後、完全なアニメーションを再生します。

また、アニメーションの進(jìn)行狀況をスクロール位置に添付して、より洗練されたスクロール効果を添付することもできます。

ただし、これを行いたい場合は、パフォーマンスの理由でスクロールリスナーを制限することをお?jiǎng)幛幛筏蓼埂?/p>

ただし、この操作の設(shè)定は、スクロール中にアニメーション化する必要があるたびに面倒です。 Greensockの公式スクロールプラグインスクロールトリガーを使用して、これを行うことができます。

追加のヒント：GSAPを使用したプラグイン、ユーティリティ方法、ヘルパー機(jī)能

GSAPプラグインは、GSAPのコアに追加の機(jī)能を追加します。一部のプラグインを使用すると、PixijsやEaseljsなどのレンダリングライブラリを使用しやすくなりますが、他のプラグは変形SVG、ドラッグ、ドロップ機(jī)能などの超大國を追加します。これにより、GSAPコアが比較的小さくなり、必要に応じて機(jī)能を追加できます。

プラグイン

Scrolltriggerは、コードを最小限に抑えた驚くべきスクロールベースのアニメーションを作成します。または、アニメーションとは何の関係もない場合でも、スクロール関連のイベントをトリガーします。

MorphSVGは、ポイント數(shù)に関係なく、任意の2つのSVG形狀の間で変形し、形狀の変形方法を細(xì)かく制御できます。

DrawSVG段階的なSVG要素のストロークを段階的に表示（または隠す）ため、描畫されているように見えるようにします。典型的なストロークダッシュオフセットアニメーションに影響を與えるさまざまなブラウザエラーを解決します。

MotionPathアニメーションは、ブラウザのモーションパスに沿って、任意のコンテンツ（SVG、DOM、CANVAS、一般的なオブジェクトなど）。 MotionPathhelperを使用して、ブラウザのパスを編集することもできます！

GSDevtoolsは、高度な再生コントロール、キーボードショートカット、グローバル同期などを含むGSAPアニメーションとの対話およびデバッグの視覚的なUIを提供します。

Draggableは、マウスまたはタッチイベントを使用して、ほとんどすべてのDOM要素をドラッグ、回転、スロー可能、さらにはすばやくスクロールできるようにするための非常に簡単な方法を提供します。 Draggableはinertiaplugin（オプション）と完全に統(tǒng)合されているため、ユーザーは勢いに応じて動(dòng)きをスムーズに減速させることができます。

Customease（CustomBounceおよびCustomWiggle）は、必要な緩和効果を登録できるようにすることにより、GSAPのすでに広範(fàn)な緩和機(jī)能を強(qiáng)化します。

Splittextは、HTMLテキストを文字、単語、行に分割できるようにする使いやすいJavaScriptユーティリティです。使いやすく、非常に柔軟で、IE9に戻り、特殊文字を処理します。

ScrambleTextは、ランダムな文字を使用してテキストをDOM要素でスクランブルし、通常の間隔で新しいランダム文字を更新し、トゥイーンプロセス中に新しいテキスト（または元のテキスト）を徐々に表示します。視覚的には、コンピューターが一連のテキストをデコードしているように見えます。

Physics2Dを使用すると、特定の値になるのではなく、速度と加速に基づいて要素の位置をアニメーション化できます。 PhysicsPropsは似ていますが、2次元座標(biāo)だけでなく、あらゆる財(cái)産で機(jī)能します。

ユーティリティ方法

GSAPには、特定の一般的なタスクを容易にすることができる組み込みのユーティリティ方法があります。ほとんどの場合、特定の方法で値の操作に焦點(diǎn)を當(dāng)てています。これは、アニメーション値を生成または変更するときに特に役立ちます。 .wrap（）、.random、.interporate（）、.distribute（）、.pipe（）、および.unitize（）をよく使用しますが、便利な方法は他にもたくさんあります。

ヘルパー機(jī)能

同様に、GSAPのコアに組み込まれていないが、Greensockが特定のユースケースを処理するために長年にわたって作成したヘルパー機(jī)能です。これらの関數(shù)により、アニメーションを簡単にめくり、曲線の緩和に基づいて亂數(shù)を返し、2つの緩和曲線などを混ぜることができます。チェックすることを強(qiáng)くお?jiǎng)幛幛筏蓼梗?/p>

結(jié)論は

あなたは終わった！うまくいけば、あなたは途中で何かを?qū)Wび、この記事は今後何年もあなたのリソースであり続けるでしょう。

いつものように、GSAPについてご質(zhì)問がある場合は、Greensockフォーラムにアクセスしてください。彼らはとても親切で歓迎しています！グリーンソックの従業(yè)員として、私はしばしばそこにたむろします。私は人々がアニメーションに関連する課題を解決するのを助けるのが大好きです！

以上がアニメーションコードを効率的に作成するためのヒントの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。