DrawSVGPlugin

説明

DrawSVGPlugin は、SVG <path>, <line>, <polyline>, <polygon>, <rect>, <ellipse> のストロークを段階的に表示（または非表示）することができます。ストロークの中心（または任意の位置/セグメント）から外側にアニメートすることもできます。これは、stroke-dashoffset および stroke-dasharray CSS プロパティを制御することで実現します。

drawSVG の値は、SVG 要素全体のストローク部分を記述していると考えてください（必ずしも先頭から始まる必要はありません）。例えば、drawSVG: "20% 80%"は、20%と 80% の間のストロークを描画し、両端に 20% のギャップがあることを意味します。50% 50%」から始めて「0% 100%」までアニメートすると、真ん中から外側に向かってパス全体を埋めるようにストロークが描画されます。

drawSVGの値は、アニメートさせたい値間の値を表すのではなく、アニメートさせる最終状態（from() トゥイーンを使用している場合は開始状態）を表すことを覚えておいてください。つまり、gsap.to("#path", {duration: 1, drawSVG: "20% 80%"})は、ストロークが現在ある場所から、ストロークがパスに沿った 20% と 80% の位置の間に存在する状態にアニメーション化されます。トゥイーンの間に20%から80%までアニメートするわけではありません。

これは、より柔軟性が増すので良いことです。パスの1点からスタートして、一方向にのみアニメートするという制限を受けることはありません。セグメント全体（開始位置と終了位置）をコントロールできます。したがって、gsap.fromTo("#path", {drawSVG: "0 5%"}, {duration: 1, drawSVG: "95% 100%"})のようにサイズを変更せずにパスの端から端までダッシュするアニメーションも可能です。

パーセンテージでも絶対値でもかまいません。単一の値を使用する場合、開始値は 0 と見なされるため、"100%" は "0 100%" と "true" と同じになります。

重要：ストロークをアニメーション化するには、まずCSSかSVG属性を使って実際にストロークを適用する必要があります。

多くのストロークをアニメーションさせたり、アニメーションをずらしたりするにはどうしたらいいですか？

GSAP に統合された DrawSVGPlugin の素晴らしいところは、豊富な API を利用して複雑な効果を素早く作成し、完全な制御（一時停止、再開、反転、シーク、ネストなど）ができることです。例えば、draw-me クラスが適用された 20 個の SVG 要素があり、それらを千鳥足で描画したいとします。こんなことができます。

//draws all elements with the "draw-me" class applied with staggered start times 0.1 seconds apart
gsap.from(".draw-me", {duration:1,stagger: 0.1, drawSVG: 0});

あるいは、タイムラインを作成し、そこにトゥイーンをドロップすることで、シーケンス全体を全体としてコントロールすることも可能です。

var tl = gsap.timeline();
tl.from(".draw-me", {duration: 2, drawSVG: 0}, 0.1);
//now we can control it:
tl.pause();
tl.play();
tl.reverse();
tl.seek(0.5);
...

アニメーション中に長さを再計算する "live "の追加

稀な状況として、SVG 要素自体の長さが drawSVG アニメーション中に変化することがあります（ウィンドウのサイズが変更された場合や、物事が応答的になった場合など）。そのような場合、値に "live" を追加することで、DrawSVGPlugin はアニメーションの各ティックで長さを更新することができます。例えば、drawSVG: "20% 70% live" とします。

注意事項・備考

DrawSVGPlugin は SVG の塗りつぶしのアニメーションを全く行いません - stroke-dashoffset と stroke-dasharray CSS プロパティを使用してストロークにのみ影響を及ぼします。
まれに、Firefox が要素の全長を正しく計算しないことがあり、100% にアニメートしてもパスが少し短く止まってしまうことがあります。この（まれな）シナリオでは、2 つの解決策があります。パスにアンカーを追加してコントロールポイントをパスの近くに配置するか、100% ではなく 102% を使用するなど、パーセンテージを少しオーバーシュートさせます。これはFirefoxのバグであり、DrawSVGPluginのバグではありません。
DrawSVGPluginはClub GreenSockの会員特典です。利用規約に違反することなくこのクラスを使用するには、有効なメンバーシップを取得している必要があります。登録や詳細については、Clubのページをご覧ください。
2014年12月現在、iOS Safariには、一部のケースでストロークのレンダリングが正しく行われない（太すぎたり、エッジにわずかなアーティファクトが発生したり、さらに原点を誤る）バグが存在します。最良の回避策は、をまたはに変換することです。
ブラウザが許可していないため、要素の内容を変更することはできません。まあ、トゥイーンさせることはできますが、画面上では何の変化も見ることはできません。
DrawSVGとその他のボーナスプラグインは、CDNでホストされていません。詳細については、CDN FAQをご覧ください。

よくある質問（FAQ）

このプラグインを自分のプロジェクトに組み込むにはどうしたらいいですか？

すべてのオプション（CDN、NPM、ダウンロードなど）については、インストールページをご覧ください。必要なコードを提供する対話型のヘルパーもあります。簡単ですね。あなたのプロジェクトでこのようにプラグインを登録する)ことを忘れないでください。

gsap.registerPlugin(DrawSVGPlugin);

このプラグインはGSAPコアに含まれていますか？

いいえ、GSAP のコアとは別にロード／インポートする必要があります。

Club GreenSock会員限定の特典プラグインですか？

はい、まだ会員でない方は、ぜひお試しください。あなたのアニメーションのスキルを次のレベルへ引き上げることができます。すでに会員の方は、アカウントダッシュボードからGSAPと他のクラブプラグインをダウンロードすることができます。

開発中は問題なく動作していたのに、本番ビルドで突然動かなくなった！？どうしたらいいですか？

ビルドツールが木の揺れでプラグインを落としている可能性があり、プラグインの登録)（木の揺れから保護する）を忘れている可能性があります。プラグインを登録するには、次のようにします。

gsap.registerPlugin(DrawSVGPlugin)

プラグインを複数回登録するのは悪いことですか？

いいえ、全く問題ありません。何の役にも立ちませんし、損もしません。

体験とデザイン、スタートアップについて

【翻訳】DrawSVGPlugin API（Greensock）