GreensockでWebでアニメーション化する方法

ウェブ上でアニメーション化する方法は本当に何千もあります。ここでは、さまざまなアニメーションテクノロジーの比較について説明しました。今日は、Greensockを使用するための私のお気に入りの方法の1つのステップバイステップガイドに飛び込みます。

（彼らは私や何も支払いません、私は本当にそれらを使うことを本当に楽しんでいます。）

Greensockを他の方法よりも好むのはなぜですか？技術的に言えば、それは多くの場合、仕事に最適なツールです。複雑な動きであっても、その使用法は非常に簡単です。ここに私がそれを使用することを好むいくつかの理由があります：

• それらをDOM要素で、およびWebGL/Canvas/3.jsコンテキスト内で使用できます。
• 緩和は非常に洗練されています。 CSSアニメーションは、簡単に2つのベジエハンドルに制限されています。つまり、たとえばバウンス効果が必要な場合は、各パスのキーフレームを上下に上下に作成する必要があります。 Greensockを使用すると、複数のbezierハンドルが高度な効果を生み出します。バウンスはコードの単一行です。あなたは彼らの使いやすさのビジュアライザーをチェックすることで私が意味することを見ることができます。
• タイムラインで動きをシーケンスできます。 CSSアニメーションは、いくつかのことを一度に調整する必要がある場合、小さなスパゲッティを取得できます。 Greensockは非常に読みやすく、タイムライン自体を制御できるようにします。アニメーションをアニメーション化することもできます！ ？
• フードの下でいくつかの計算を実行して、奇妙なクロスブラウザーの動作と、仕様が命じられるものは真実ではないはずです - スタッキングが機能する方法のように。
• プラグインの形で多くの高度な機能を提供し、さらに一歩進めたい場合に使用できます。SVG形状のモーフィング、SVGパスの描画、ドラッグとドロップ、慣性など。

他のすべての選択肢でこの特定のライブラリを使用する理由を人々は時々私に尋ねます。それは他のほとんどの人よりもさらに進んでいます - フラッシュがまだ何かだったので、彼らは周りにいました。このデモリールはかなり刺激的であり、深刻なWebアニメーターがこのツールに到達する傾向があることを超えてポイントを獲得します。

以下は、ウェブ上の動きを作成する方法の内訳です。始めましょう！

DOM要素のアニメーション

50％の境界線の値でスタイルが描かれている

で作るボールを考えてみましょう。 Greensockでスケーリングして移動する方法は次のとおりです。

 <div> </div>

 gsap.to（ '。ball'、{
  期間：1、
  X：200、
  スケール：2
}）

この場合、Greensock（GSAP）に、of.ballmove it.to（）いくつかの異なるプロパティのクラスで要素を取得するように伝えます。トランスフォームのCSSプロパティを短縮しました：Transform（200px）はRreatminedx：200（ユニットは必要ありませんが、文字列として渡すことができます）。また、transform：scale（2）を執筆しているわけではありません。これは、アニメーションで使用したい変換と、対応するCSS構文の参照です。

 X：100 //変換：translatex（100px）
Y：100 //変換：翻訳（100px）
Z：100 //変換：Translatez（100px）
// Null Transform HackやHardware Accelerationは必要ありません。
// force3d：true。これを解明したい場合は、force3d：false
スケール：2 //変換：スケール（2）
Scalex：2 //変換：Scalex（2）
スケール：2 //変換：scaley（2）
scalez：2 //変換：scalez（2）
スキュー：15 //変換：スキュー（15DEG）
Skewx：15 //変換：Skewx（15Deg）
Skewy：15 // Transform：Skewy（15Deg）
回転：180 //変換：回転（180deg）
ROTATIONX：180 // Transform：Rotatex（180deg）
ローテーション：180 //変換：Rotatey（180deg）
Rotationz：180 //変換：Rotatez（180deg）
視点：1000 //変革：視点（1000px）
Transformorigin：'50％50％ '// Transform-Origin：50％50％

期間はあなたがそれがそうであると思うかもしれないものです：それは1秒の時間です。

それで、OK、どのようにしてSVGをアニメーション化しますか？上記のSVGと同じコードを考えてみましょう。

 <svg viewbox="0 0 500 400">
  <circle cx="80" cy="80" r="80"></circle>
</svg>

 gsap.to（ '。ball'、{
  期間：1、
  X：200、
  スケール：2
}）

アニメーションの観点からは、実際にはまったく同じです。クラスで要素をつかみ、それらのプロパティを翻訳しています。 SVGは文字通りDOM要素であるため、クラスのいずれかを平手打ちし、同じようにアニメーション化できます！

素晴らしい！私たちはガスで料理をしています。

緩和します

私は前に、私のお気に入りの機能の1つであることを緩和します。それらをどのように使用するかを見てみましょう。

オリジナルのボールを取りましょう。たぶん、私たちはそれらのよりユニークなバウンスの緩和の1つを試してみたいと思っています。これは次のようになります：

 gsap.to（ '。ball'、{
  期間：1.5、
  X：200、
  スケール：2、
  使いやすさ：「バウンス」
}）

それでおしまい！ Greensockのこのバージョンでは、Ease-Outtimingを使用すること（これは入り口に適している）を想定しているため、デフォルトとして適用されます。あなたがしなければならないのは、「バウンス」を文字列として指定することだけで、あなたはレースに出かけます。

また、私たちも期間を少し長くしていることに気づいたかもしれません。これは、ボールが初期状態と終了状態の間でさらに「作業」しなければならないからです。 1秒間の期間は、線形やサインの緩和には素敵ですが、バウンスや弾力性の容易さには少し速すぎます。

遅延とタイムライン

DefaultEase-Outtiming関数は入り口に適していると述べました。 Anease-Inorの使いやすさはどうですか？それもしましょう。

 gsap.to（ '。ball'、{
  期間：1.5、
  X：200、
  スケール：2、
  使いやすさ：「バウンス」
}）

gsap.to（ '。ball'、{
  期間：1.5、
  遅延：1.5、
  x：0、
  スケール：1、
  使いやすさ： 'back.inout（3）'
}）

いくつかのことが起こっていることに気づいたかもしれません。たとえば、最後から2番目の行を使用しませんでした（簡単： 'back.inout（3）'）。代わりに、Backforease-in-outと呼ばれる別の簡単さを使用しました。また、Greensockの使いやすさのVisualizerツールでわかるように、その簡単なデフォルトの構成だけに限定されないため、構成オプションも渡しました。ニーズに合わせて調整できます。きちんとした！

また、遅延を使用してアニメーションをチェックしたことに気付いたかもしれません。最初のアニメーションの期間の長さを取り、次のアニメーションに一致する遅延があることを確認しました。今、それはここで機能しますが、それはかなり脆いです。最初のものの長さを変更したい場合はどうなりますか？さて、今、私たちは戻って、続く遅延を変更する必要があります。その後、別のアニメーションがある場合はどうなりますか？そしてその後のもう1つ？さて、私たちは戻って、他のすべての遅延をラインに計算する必要があります。それは多くの手動の仕事です。

その動作をコンピューターにオフロードできます。私のより複雑なアニメーションのいくつかは、何百ものチェーンアニメーションです！仕事を終えて、最初に何かを調整したい場合は、すべてに戻る必要はありません。タイムラインを入力してください：

 GSAP
  .timeline（）
  .to（'。ball '、{
    期間：1.5、
    X：200、
    スケール：2、
    使いやすさ：「バウンス」
  }）
  .to（'。ball '、{
    期間：1.5、
    x：0、
    スケール：1、
    使いやすさ：「back.inout（3）」
  }）;

これにより、タイムラインがインスタンス化され、2つのアニメーションを接続します。

しかし、各アニメーションで同じ期間を使用し続けるという少し繰り返しがあります。タイムラインに渡されたオプションとして、そのためのデフォルトを作成しましょう。

 GSAP
  .timeline（{
    デフォルト：{
      期間：1.5
    }
  }）
  .to（'。ball '、{
    X：200、
    スケール：2、
    使いやすさ：「バウンス」
  }）
  .to（'。ball '、{
    x：0、
    スケール：1、
    使いやすさ：「back.inout（3）」
  }）;

それはかなりクールです！さて、あなたはおそらくこのように物事がどのように構築されているかを見始めているでしょう。アニメーションでは大したことではないかもしれませんが、このシンプルなアニメーションとタイムラインは、本当に複雑なアニメーションでコードを本当に維持できます。

さて、この動きをボールで反対方向にミラーリングし、ただ…それを続けておきたいとしたらどうでしょうか？言い換えれば、ループが必要な場合はどうなりますか？そのとき、私たちがAddRepeat：-1、これは単一のアニメーションまたはタイムライン全体に適用できます。

 GSAP
  .timeline（{
    繰り返し：-1、
    デフォルト：{
      期間：1.5
    }
  }）
  .to（'。ball '、{
    X：200、
    スケール：2、
    使いやすさ：「バウンス」
  }）
  .to（'。ball '、{
    x：0、
    スケール：1、
    使いやすさ：「back.inout（3）」
  }）
  .to（'。ball '、{
    X：-200、
    スケール：2、
    使いやすさ：「バウンス」
  }）
  .to（'。ball '、{
    x：0、
    スケール：1、
    使いやすさ：「back.inout（3）」
  }）;

また、ヨーヨのように、繰り返すだけでなく、繰り返して再生を起こすこともできます。だから私たちはこれをヨーオと呼んでいます：本当です。ポイントを明確にするために、最初のアニメーションだけでこれを示します。あなたはそれが前方に再生されるのを見ることができ、それからそれは逆に再生されます。

 GSAP
  .timeline（{
    繰り返し：-1、
    ヨーヨ：本当、
    デフォルト：{
      期間：1.5
    }
  }）
  .to（'。ball '、{
    X：200、
    スケール：2、
    使いやすさ：「バウンス」
  }）

重複とラベル

アニメーションを簡単にチェーンできるのは素晴らしいことですが、現実の動きはこのように正確に機能するわけではありません。一杯の水を手に入れるために部屋を横切って歩いても、歩いてはいけません。その後、停止します。その後、水を拾います。それからそれを飲みます。あなたは一つの継続的な動きで物事をする可能性が高くなります。それでは、動きを重複させ、物事を一度に発射する方法について簡単に話しましょう。

タイムラインで物事が少し前後に発射することを確認したい場合は、インクリメンタまたはデクショナーを使用できます。 3つのボールが次々とアニメーション化することを示す次の例を挙げた場合、少し硬いと感じます。

 GSAP
  .timeline（{
    デフォルト：{
      期間：1.5
    }
  }）
  .to（'。ball '、{
    X：300、
    スケール：2、
    使いやすさ：「バウンス」
  }）
  .to（'。ball2 '、{
    X：300、
    スケール：2、
    使いやすさ：「バウンス」
  }）
  .to（'。ball3 '、{
    X：300、
    スケール：2、
    使いやすさ：「バウンス」
  }）

文字列として渡されたデクショナーを使用して、動きとわずかにオーバーラップすると、物事はより滑らかになります。

 GSAP
  .timeline（{
    デフォルト：{
      期間：1.5
    }
  }）
  .to（'。ball '、{
    X：300、
    スケール：2、
    使いやすさ：「バウンス」
  }）
  .to（'。ball2 '、{
    X：300、
    スケール：2、
    使いやすさ：「バウンス」
  }、 ' -  = 1'）
  .to（'。ball3 '、{
    X：300、
    スケール：2、
    使いやすさ：「バウンス」
  }、 ' -  = 1'）

これを行う別の方法は、ラベルと呼ばれるものを使用することです。ラベルは、アニメーションのプレイヘッドで特定の時点で物事が発生することを確認します。このように見えます：.add（ 'labelName'）

 GSAP
  .timeline（{
    デフォルト：{
      期間：1.5
    }
  }）
  .add（ 'start'）
  .to（'。ball '、{
    X：300、
    スケール：2、
    使いやすさ：「バウンス」
  }、 '始める'）
  .to（'。ball2 '、{
    X：300、
    スケール：2、
    使いやすさ：「バウンス」
  }、 '始める'）
  .to（'。ball3 '、{
    X：300、
    スケール：2、
    使いやすさ：「バウンス」
  }、 '始める'） 

ラベルからインクリメントして減少することもできます。私は実際に私のアニメーションでこれをたくさんしています。このように見えます= 0.25 '。

 GSAP
  .timeline（{
    デフォルト：{
      期間：1.5
    }
  }）
  .add（ 'start'）
  .to（'。ball '、{
    X：300、
    スケール：2、
    使いやすさ：「バウンス」
  }、 '始める'）
  .to（'。ball2 '、{
    X：300、
    スケール：2、
    使いやすさ：「バウンス」
  }、 'start = 0.25'）
  .to（'。ball3 '、{
    X：300、
    スケール：2、
    使いやすさ：「バウンス」
  }、 'start = 0.5'） 
 

なんて！これで多くのことができます！これらの施設の多くをまとめるアニメーションの例は、Vanilla JavaScriptを使用した相互作用を少し紹介します。必ずベルをクリックしてください。

Greensockを使用したフレームワークベースのアニメーションをもっと探しているなら、Vueでこれをカバーすると書いたAnarticleがあります。

しかし、スタガー、SVGのモーフィング、SVGの描画、画面の周りに物を投げ、パスに沿って物を移動し、テキストをアニメーション化するなど、カバーしていないことはまだたくさんあります。これらの詳細については、Togreensockのドキュメントに向かうことをお勧めします。また、フロントエンドのマスターズには、これらすべてがはるかに深さで覆われているので、githubの材料がソースを描いています。また、フォークやプレイするためのオープンソースである多くのペンもあります。

これがあなたがウェブ上でアニメーションの作業を開始することを願っています！あなたが作るものを見るのが待ちきれません！

以上がGreensockでWebでアニメーション化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。