GreenSockでAlligator.ioSVGロゴを描く

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

Greensockとは何ですか？

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

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

TweenLite は、その名前が示すように、軽量バージョンです。
TweenMaxこれはGSAPのすべてのパワーが満載です
TimelineLite＆ TimelineMax are sequencing tools which helps manage the timing of our animations

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 });

オブジェクトにrepeat:-1を追加することで、このrotationを無限にすることができます。 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と最も一般的な方法の簡単な紹介です。これは非常に強力なツールであり、アニメーションの作成を楽しんでいる場合は、次のプロジェクトでの使用を検討する必要があります。