Webフロントエンド

ガイド：SVGでアニメーション化する方法

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

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

SVGを備えたWebブラウザ

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

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

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

llc s corp vs c corp

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

すべての主要なWebブラウザは SVGレンダリングのサポート昔から。

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

Svgパス

SVGにオーバーロードされた要素がある場合、それが要素になります。

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

この要素は、描画スクリプトを使用することで機能します。 1967年のLogoプログラミング言語によく似ており、洗練されたグラフィックス用に最新化および設計されています。この要素は、この描画スクリプトをd属性を介して取得します。

C ++を使用してロボットをプログラムする方法

(10, 10)

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

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

パス要素についてさらに詳しく知ることができますここに。

SVGおよびCSSパス

「オーケーフアン、わかりました。パスは強力ですが、どうすればそれらを奨励できますか？」あなたは言う

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

ダッシュとギャップ

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

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

同様に、属性ストローク-ダッシュオフセット（スクリプトを開始するためのボードからのパターン内の距離を指定します）は、CSSを使用して制御することもできます。

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

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

path.getTotalLength ()

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

次に、stroke-dashoffset属性を使用して、ダッシュオフセットを0に設定します。これにより、パスが実線の曲線として画面に表示されます（基本的に最初のストロークを確認しており、すでにそれぞれを作成しています。スパンは曲線の全長にまたがります）。ボードオフセットを曲線の長さに等しく設定すると、最終的には非表示の曲線になります（現在、曲線が完全なスペース、つまりダッシュの直後の部分としてレンダリングされていることを確認しています）。

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

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

ご覧のとおり、曲線は常にそこにあります。ボードのオフセットを少しずつ変更して、点線部分が表示されるようにします。

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

とscorpとccorpの違い

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

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

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

SVGパスに沿ってオブジェクトをアニメーション化する

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

パターンは要素または原則です

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

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

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

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

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

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

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

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

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

以前は、CSSでパスの長さをコーディングする必要がありました。 JavaScript関数

を使用すると、パスの長さをその場で計算し、必要に応じて使用することができます。あなたはそれについてのより多くの情報を得ることができますここに。

また、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のサポートは若干邪魔現在（しゃれは意図されていません）。