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

公開: 2022-03-11

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

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

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

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

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

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

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

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

SVGパス

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

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

この要素は、一連の描画コマンドを実行することによって機能します。これは1967年のロゴプログラミング言語によく似ており、洗練されたグラフィックス用に近代化および設計されているだけです。要素は、属性dを介してこの一連の描画コマンドを受け取ります。

 <!-- A right-angled triangle --> <path d="M10 10 L75 10 L75 75 Z" />

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

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

パス要素について詳しくは、こちらをご覧ください。

SVGパスとCSS

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

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

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

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

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

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

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

 <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

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

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

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

CodePenのToptalBlog（@toptalblog）によるPen Toptal-SVG＆CSSパスを参照してください。

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

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

CodePenのToptalBlog（@toptalblog）によるPen Toptal-SVG＆CSSパスを参照してください。

ここでは、固定された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つのプロパティを組み合わせることで、次のようなアニメーションを簡単に思いつくことができます。

CodePenのToptalBlog（@toptalblog）によるPen Toptal-SVG＆CSSパスを参照してください。

ご覧のとおり、新しい要素div.ballがあります。

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

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

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

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

以前は、CSSでパスの長さをハードコーディングする必要がありました。 JavaScript関数path.getTotalLength()を使用すると、パスの長さをオンザフライで計算し、必要に応じて使用できます。詳細については、こちらをご覧ください。

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

Snap.svgを使用すると、JavaScriptを使用してSVG画像を簡単に描画できるだけでなく、 .animate({})を呼び出すのと同じくらい簡単にアニメーションを作成できます。

別のライブラリ、anime.jsを使用すると、わずか数行のコードでdiv要素をSVGパスに従わせることができます。

それ自体でより多くのことを実行するが、結果が見事に見えるライブラリを探しているなら、Vivusはあなたが探しているものです。これは、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のサポートは少しエッジが効いています（しゃれは意図されていません）。

Web用の妥協のないアニメーション

この記事では、SVGパスでCSSまたはHTML要素を使用してSVG要素をアニメーション化するいくつかの方法を説明しました。

SVGは軽量であり、画面サイズ、ズームレベル、画面解像度に関係なく、鮮明なグラフィックスを生成するために使用できます。 SVGを使用すると、標準のWebテクノロジーを使用するメリットを享受しながら、モダンで鮮やかなエクスペリエンスをこれまでになく簡単に提供できるようになります。

以上です！このSVGアニメーションチュートリアルがお役に立てば幸いです。

Toptal Engineeringブログでさらに読む：

CSSでSVGアニメーションにアプローチする方法