Greensockプラグインを使用して、派手なWebアニメーションが簡単になりました

Greensockプラグインを使用して見事なWebアニメーションのロックを解除：ディープダイビング

このチュートリアルでは、Greensock（GSAP）の強力なプラグインを探り、従来のCSSやSmilと比較して、複雑なWebアニメーションに対する合理化されたアプローチを提供します。 キープラグインをカバーし、プロのグレードの結果を効率的に達成する方法を示します。

この分割払いは、いくつかの例外的なGSAPプラグインに焦点を当てています

bezierplugin：

湾曲したベジエパスに沿って要素を楽にアニメーション化し、一貫したクロスブラウザーの互換性を確保し、CSSまたは笑顔の制限を上回ります。

• draggable＆shroppropsplugin：卓越したパフォーマンスと幅広いデバイス/ブラウザのサポートを備えたインタラクティブな物理ベースのドラッグアンドドロップアニメーションを構築します。
DrawSVGPlugin：
• 動的なSVGストロークアニメーションを作成し、CSSよりも優れた制御と柔軟性を提供します。特にレスポンシブデザインに有益です。 morphsvgplugin：
• splittext：テキストを個々の操作のために行、単語、または文字に分割することにより、魅力的なテキストアニメーション効果を生成します。
これらのプラグインをマスターすると、複雑なWebアニメーションの開発時間が劇的に短縮されます。
• bezierplugin
とのパスに沿ったアニメーション
• 事前に定義されたパスに沿ってオブジェクトをアニメーション化する（曲線、ジグザグなど）。リアリズムが追加されます。 Smilは時代遅れであり、CSSのサポートは限られていますが、BezierPluginは堅牢でクロスブラウザーソリューションを提供します。 TweenMaxに含まれる無料のプラグインです bezierplugin基本：

HTMLにTweenMaxを含めます。 基本的な構文は次のとおりです

多数の座標の場合、変数でそれらをキャッシュします：

「x」と「y」を使用して、要素の現在の場所に対する位置を調整します。

bezierpluginオファー

（座標は磁石として機能する）および

（デフォルト、パス張力にを使用します）。 パスに沿って要素を回転させます。 CodePenデモは、これらのプロパティを示しています

codepen demo

<code class="language-javascript">TweenMax.to(document.getElementById('myDiv'), 5, {
  bezier:[
    {left:100, top:250}, 
    {left:300, top:0}, 
    {left:500, top:400}
  ], 
  ease:Power1.easeInOut
});</code>

を参照してください

Greensock Premiumプラグインとユーティリティ

<code class="language-javascript">const points = [ /* ... your points */ ];
TweenMax.to(document.getElementById('myDiv'), 5, { bezier: points, ease:Power1.easeInOut });</code>

TweenMaxは多くを提供していますが、Club Greensockメンバーシップはプレミアムプラグインとユーティリティのロックを解除します。 衝撃的なグリーンメンバーシップは、これらのリソースをダウンロードするためにアクセスを付与します。 ただし、Codepen Demosにより、Codepen環境内のプレミアムプラグインを使用した無料の実験を可能にします。

ドラッグアンドドラッグアンドドロップとドラッグアンドドロップ

Draggableは、ドラッグアンドドロップアニメーションを簡素化し、クロスブラウザーの互換性、タッチスクリーンのサポート、パフォーマンスを提供します。 ThropPropspluginは、物理学ベースの滑走滑らかで滑らかに追加されます

基本的な実装：

<code class="language-javascript">TweenMax.to(document.getElementById('myDiv'), 5, {
  bezier:[
    {left:100, top:250}, 
    {left:300, top:0}, 
    {left:500, top:400}
  ], 
  ease:Power1.easeInOut
});</code>

で動きを制約し、bounds：throwPropsで滑空を有効にします

<code class="language-javascript">const points = [ /* ... your points */ ];
TweenMax.to(document.getElementById('myDiv'), 5, { bezier: points, ease:Power1.easeInOut });</code>

（水平）またはtype: 'x'（垂直）を使用してドラッグ方向をロックします。 type: 'y'回転ドラッグを有効にします type: 'rotation'

codepen demo

を参照してください

drawsvgpluginを使用したライブドラウングSVGストローク

DrawSVGPluginは、SVG描画自体の効果を作成します。 それは

の欠如の単純な形状を処理し、CSSの制限を上回り、応答性のあるスケーリングに適応します。

基本的な使用法：getTotalLength()

SVGが定義されたストローク（SVGまたはCSSのいずれか）があることを確認してください。 GSAPのよろめき方法を使用して複数のストロークをよろめます。

<code class="language-javascript">Draggable.create('#yourID');</code>

codepen demo

を参照してください morphsvgplugin

でシフトシフト morphsvgpluginは、ポイントカウントが異なっていても、1つのSVG形状を別のSVG形状にモーフィングします。 単純な使用法：

パスデータを直接提供するか、単純な形状に

を使用できます。

<code class="language-javascript">Draggable.create('#yourID', { bounds: '.container', throwProps: true });</code>

codepen demo

MorphSVGPlugin.convertToPath()を参照してください

splittext splittextは、ターゲットアニメーションのためにテキストを線、単語、または文字に分割します。

基本的な使用法：

aNIMATE

、

、または

個別に。アニメーション後に追加されたマークアップを削除するには、

を使用してください。

<code class="language-javascript">TweenLite.fromTo("#path", 1, { drawSVG:"0 5%" }, { drawSVG:"95% 100%" });</code>

codepen demo split.linessplit.wordsを参照してください split.charssplit.revert()結論

Greensockのプラグインは、洗練されたWebアニメーションを効率的に作成することができます。 ドキュメントとコミュニティフォーラムを探索して、その機能を習得し、Webデザインを高めます。 プレースホルダーCodePenリンクを作成したデモへの実際のリンクに置き換えることを忘れないでください。

以上がGreensockプラグインを使用して、派手なWebアニメーションが簡単になりましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。