開発者ドキュメント

GreenSockでAlligator.ioSVGロゴを描く

getdocs

この記事を最大限に活用するには、JavaScriptをしっかりと理解していることが重要です。 この記事では、GreenSockの理解にのみ焦点を当てます。そのため、これまでJavaScriptを使用したことがない場合は、学習して戻ってきてください。

Greensockとは何ですか？

GreenSock はJavaScriptアニメーションライブラリであり、特にクロスブラウザ機能に関して、アニメーションを作成する際の多くの苦痛を軽減します。 GreenSockはGSAP（GreenSock Animation Platform）とも呼ばれ、両方を同じ意味で使用します。 GSAPは基本的に、CSSプロパティからSVG属性に至るまで、スローするすべてのプロパティをアニメーション化できます。

GSAPには、次のような複数のツールを使用できます。

GSAPはとしてインストールできます npm モジュール：

$ npm install gsap

または、スクリプトタグを介してロードします。

<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js>"></script>

GreenSockの基本

GreenSockをデモンストレーションするために、Codepenを使用します。 GreenSockがすでに設定されているここでペンをフォークできます。

基本から始めて、GSAPを使用して画面全体に赤い四角をアニメーション化してみましょう。 to 方法。 次のように赤い正方形を作成します。

<style>
  #element {
    height: 150px;
    width: 150px;
    background: red;
  }
</style>
<div id="element"></div>

これをアニメーション化するために、 3 への引数 to メソッド、引数は次のとおりです。

.to(elToAnimate, duration, propToAnimate)

したがって、この場合、アニメーション化する要素は次のとおりです。 #element、期間は 1 次に、正方形を移動したいので、最後の引数は、 x 財産。 私たちのコードは次のとおりです。

TweenMax.to("#element", 1, { x: 100 })

これにより、次のようになります。

gifについて心配する必要はありません。Codepenで見られるように、実際の生活でははるかにスムーズです。

今、正方形を回転させたいとしましょう。必要なのは次のことだけです。

TweenMax.to("#element", 3, { rotation: 360 });

あなたはこれを作ることができます rotation 追加することで無限大 repeat:-1 私たちのオブジェクトに。 を追加することもできます yoyo アニメーションを後方と前方に交互に表示するプロパティ。

を使用して別の位置から開始できます fromTo 方法。 これはに似ています to メソッドですが、アニメーションを開始する場所の追加オブジェクトを指定できます。 正方形を開始したい場合 x:300 次に、これを3番目の引数としてに渡します fromTo.

コード的には、これは次のようになります。

TweenMax.fromTo("#element", 3, {x: 300}, { x: 100 });

視覚的に：

正方形の位置を変更するだけでなく、不透明度などをターゲットにすることもできます。

TweenMax.fromTo("#element", 5, {opacity: 0}, { opacity: 1 });

ここでも、 fromTo メソッドと開始 opacity で 0 で終了します 1.

正直に言うと、上記は非常に退屈なので、あなたは今、信じられないほど刺激を受けていないと確信しています。 もっと面白いことをしましょう。 Alligator.io ロゴと何かクールなことをしてください！

Alligator.ioSVGロゴアニメーション

私は盗んだ Alligator.io ウェブサイトのロゴ、Sebが気にしないことを願っています。 これがSVGを内蔵したスターターペンです。

したがって、このアニメーションの目標は draw ロゴと緑色にフェードインします。

私たちが最初に行う必要があるのは、 stroke-dasharray と stroke-dashoffset 私たちのグラフィックに。 これらは、描画効果をシミュレートするために使用する属性です。これらのプロパティの詳細については、ここを参照してください。

CSSでは、次のように設定します。

#alligator path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  fill-opacity: 0; // we will animate the fill in
}

これで、ワニは姿を消しました。 使用してアニメートしてみましょう TweenMax.

を使用します to 上で使用した方法、次に設定します stroke-dashoffset することが 0.

TweenMax.to("#alligator path", 15, { "stroke-dashoffset": 0 })

CSSで使用したものと同じセレクターを使用します #alligator path、期間を設定します 0 次に、 stroke-dashoffset に 0. これは本当にクールな描画効果をもたらします：

なんてクールなの？ ✨

次に行う必要があるのは、色を元に戻すことです。 これを行うには、オブジェクトにプロパティを追加します。

TweenMax.to("#alligator path", 15, { "stroke-dashoffset": 0, "fill-opacity": 1 })

私たちが現在抱えている問題は、期間が非常に長く、これは少し奇妙に見えることです fill-opacity 財産。 理想的には、最初に描画し、それが終了したらグラフィックを入力します。 これを実現するための古い方法は、2つの別々のアニメーションを作成し、2番目のアニメーションの遅延を最初のアニメーションの継続時間と一致させることでした。 GreenSockは私たちに素晴らしいものを与えます TimelineMax これは私たちのためにこれを行います。

TimelineMax

最初に行う必要があるのは、のインスタンスを作成することです TimelineMax そのようなクラス：

const tl = new TimelineMax()

次に、 to インスタンスのメソッドを実行し、描画効果を渡します。

tl.to("#alligator path", 10, { "stroke-dashoffset": 0 })

次に、 to もう一度方法がありますが、今回は fill-opacity:

tl.to("#alligator path", 5, { "fill-opacity": 1 })

これで、次のようになります。

TimelineMax は非常に強力で、これは表面を傷つけているだけで、シーケンシャルアニメーションの作成がこれまでになく簡単になりました。

結論

これは、GreenSockと最も一般的な方法の簡単な紹介です。 これは非常に強力なツールであり、アニメーションの作成を楽しんでいる場合は、次のプロジェクトでの使用を検討する必要があります。

モバイルバージョンを終了