Webフロントエンド

SVGアニメーションのハウツーガイド

塩の価値があるフロントエンドエンジニアは、デバイスの断片化されたエコシステムがもたらす課題を認識しています。画面サイズ、解像度、アスペクト比が異なると、一貫したエクスペリエンスを提供することが困難になります。ピクセルパーフェクトな体験を提供したい人にとってはなおさらです。

スケーラブルベクターグラフィックス（SVG）は、その問題の一部を解決するのに役立ち、非常にうまく機能します。 SVGには制限がありますが、SVGは特定の場面で非常に役立ちます。また、優れたデザインチームがあれば、Webブラウザーに過度の負担をかけたり、読み込み時間を妨げたりすることなく、より視覚的に魅力的なエクスペリエンスを作成できます。

過去数か月の間、私はSVGとそのアニメーションおよびエフェクト機能を多用するプロジェクトに取り組んできました。この記事では、SVGとそのアニメーション技術を使用して、Webフロントエンドの作業に新しい命を吹き込む方法を紹介します。

emacsとnotepad ++

スケーラブルベクターグラフィックス

SVGは、HTMLの動作と同じように、XMLに基づく画像形式です。マークアップで組み合わせて2次元グラフィックスを生成できる、おなじみの幾何学的形状のさまざまな要素を定義します。

ザ・ SVG仕様は、1999年にWorld Wide Web Consortium（W3C）によって開発されたオープンスタンダードです。

すべての主要なWebブラウザは SVGレンダリングのサポート今しばらくの間。

SVGグラフィックはXMLドキュメントであるため、Webブラウザーは画像との対話に使用できるDOMノードベースのAPIを提供します。写真に命を吹き込むことについて話してください！

SVGパス

SVGに強力な要素が1つある場合、それがその要素になります。

パス要素は基本的な形状であり、想像できるほぼすべての高度な2D形状を作成するために使用できます。

この要素は、一連の描画コマンドを実行することによって機能します。 1967年のLogoプログラミング言語によく似ていますが、最新化され、派手なグラフィック用に設計されています。要素は、属性dを介してこの一連の描画コマンドを受け取ります。

画面上に描画する仮想ペンを考えることができ、path要素の描画コメントは単にペンを制御するだけです。上記の例では、ペンは位置(10, 10)に移動するように指示されています。（M10 10）、(75, 10)に線を引く（L75 10）、(75, 75)に線を引くL75 75次に、開始点（Z）に戻ってパスを閉じます。

円弧（A）、2次ベジェ曲線（Q）、3次ベジェ曲線（C）などの他の描画コマンドを使用すると、SVGではるかに複雑な形状やグラフィックを作成できます。。

パス要素についてもっと学ぶことができますここに。

SVGパスとCSS

「オーケーフアン、わかった。パスは強力ですが、どうすればアニメーション化できますか？」あなたは言う。

最初の手法では、2つのSVG属性を利用します：stroke-dasharrayおよびstroke-dashoffset。

ザ・ストローク-dasharray 属性は、パスをストロークするために使用されるダッシュとギャップのパターンを制御します。インクの1つの連続したストロークではなく、ダッシュとギャップのグループとして線を描画したい場合は、これが使用する属性です。

SVG画像はWebブラウザのDOMの一部であり、stroke-dasharrayはプレゼンテーション要素であるため、CSSを使用して属性を設定することもできます。

同様に、ストローク-ダッシュオフセット属性（ダッシュパターンのどこまでダッシュを開始するかを指定する）もCSSを使用して制御できます。

これらの2つのSVG属性を一緒に使用して、SVGパスをアニメーション化すると、パスが徐々に描画されているように見せることができます。

この2次ベジェ曲線を例にとってみましょう。

div.ball

このパスを画面上に徐々にスムーズに描画されているかのようにアニメーション化するには、stroke-dasharray属性を使用して、パスの長さに等しいダッシュ（およびギャップ）の長さを設定する必要があります。これは、破線の曲線の各ダッシュとギャップの長さがパス全体の長さと等しくなるようにするためです。

次に、stroke-dashoffset属性を使用して、ダッシュオフセットを0に設定します。これにより、パスが実線の曲線として画面に表示されます（基本的に最初のダッシュを確認しており、各ダッシュはすでに全体にまたがっています。曲線の長さ）。ダッシュオフセットを曲線の長さに等しく設定すると、最終的に不可視の曲線になります（現在、曲線がギャップ全体、つまりダッシュの直後の部分としてレンダリングされていることを確認しています）。

これで、stroke-dashoffsetプロパティをアニメーション化することで、曲線を画面に徐々に表示させることができます。

ペンを見る ApeeScape-SVGおよびCSSパス ApeeScapeブログ（ @toptalblog ）オン CodePen 。

ご覧のとおり、曲線は常にそこにあります。ダッシュ部分を少しずつ表示するために、ダッシュオフセットを変更するだけです。

同じ原則を使用して、より多くのパスを使用することで、これをさらに一歩進めることができます。

ペンを見る ApeeScape-SVGおよびCSSパス ApeeScapeブログ（ @toptalblog ）オン CodePen 。

ここには、固定された1つの黒い曲線、パスに沿って移動している赤い曲線、および赤い曲線に続いて40px後ろにある別の黒い曲線があります。

Stroke-dasharrayとstroke-dashoffsetは、SVGパスに多数のアニメーションとエフェクトを適用するために使用できる2つの非常に強力な属性です。あなたが試すことができますこの 2つの属性を試すために使用できる便利なツール。

SVGパスに沿ったオブジェクトのアニメーション化

SVGとCSSを使用すると、パスをたどるオブジェクトや要素をアニメーション化することができます。

アニメーションに使用するSVG属性は2つあります。

offset-path：offset-path CSSプロパティは、要素が配置されるオフセットパスを指定します。
offset-distance：offset-distance CSSプロパティは、offset-pathに沿った位置を指定します。

これらの2つのプロパティを組み合わせることで、次のようなアニメーションを簡単に思いつくことができます。

ペンを見る ApeeScape-SVGおよびCSSパス ApeeScapeブログ（ @toptalblog ）オン CodePen 。

ご覧のとおり、新しい要素path.getTotalLength()があります。

この要素は、div、画像、テキストなど、何でもかまいません。この例の考え方は、offset-pathとoffset-distanceを使用して、要素がたどるパスを指定し、距離をアニメーション化すると、要素がパスを移動するというものです。

JavaScriptを使用したSVGアニメーション

これらのすべてがまだ十分に凝っていない場合は、いつでもJavaScriptを使用できます。

JavaScriptを使用してSVG要素をアニメーション化することは、DOM要素をアニメーション化することによく似ています。ただし、JavaScriptを使用すると、上記で確認したアニメーション手法をより簡単に実現できます。

以前は、CSSでパスの長さをハードコーディングする必要がありました。 JavaScript関数の助けを借りて.animate({})パスの長さをオンザフライで計算し、必要に応じて使用することができます。あなたはそれについてもっと学ぶことができますここに。

その上、SVGアニメーションをこれまでよりもはるかに簡単にすることができる多くのライブラリがすでに自由に利用できます。

Snap.svg JavaScriptを使用してSVG画像を簡単に描画できるだけでなく、

|_+_|

を呼び出すのと同じくらい簡単にアニメーション化できます。

別の図書館、 Anime.js 、div要素をSVGパスにたどらせることができます。数行のコード。

それ自体でより多くのことを実行するが、結果が依然として見事に見えるライブラリを探している場合は、生活あなたが探しているものです。これは、SVGパスアニメーションに対して、異なる、より構成主導のアプローチを採用しています。このライブラリを使用すると、描画するSVG要素にIDを追加し、そのIDでVivusオブジェクトを定義するだけです。残りはVivusが担当します。

参考文献

以下は、SVG画像を処理してアニメーション化するときに役立つと思われるリソースのリストです。

SVGアニメーションについてさらに詳しく知るには、次の短い記事を読むことができます。 SVGをアニメーション化する3つの方法 CSSTricksによる画像とビデオスクリーンキャストをご覧ください。

この記事で取り上げなかったことの1つは、Synchronized Multimedia Integration Language（SMIL）を使用してSVG画像をアニメーション化することです。 SVGにCSVを使用すると、既に使い慣れたものを操作できるという利点がありますが、SMILは物事を次のレベルに引き上げます。

SMILを使用すると、SVGのみを使用してシェイプモーフィングなどの高度なアニメーション効果を実装できます。このような効果のためにSMILを使用するための短いが効果的なガイドが利用可能ですここに。

ただし、SMILのサポートはビット エッジの効いた 現時点では（しゃれは意図されていません）。