CSSで簡単なSVGアニメーションを実装

こんにちは、つみきのフロントエンドエンジニアの佐藤です。

今回は、SVGデータとCSSで実装する簡単なアニメーションの仕方をご紹介してみたいと思います。


弊社ロゴでサンプルを用意しました。

JavaScript では、表示・非表示の class 属性をそれぞれ付け外ししているのみで、アニメーション部分には CSS の transition プロパティを利用しています。

transition プロパティのおさらいとしては以下をご参照ください。

CSS プロパティが変化する際のアニメーションスピードの操作法を提供します。アニメーションによる変化は即座に反映されるのではなく、指定された時間の間に渡ってプロパティが変化します。例えば、ある要素の前景色を白色から黒色に変更する場合、通常は即座に前景色が替わります。transitions が有効な CSS では、指定した時間をかけて、またカスタマイズした加速度曲線に従って変化していきます。

https://developer.mozilla.org/ja/docs/Web/Guide/CSS/UsingCSStransitions

要は、プロパティの値に変化が生じた場合に、その間の値を補完することでアニメーションを実現させている、というような感じかと思います。


線アニメーション

線アニメーションのポイントとしては、SVG 要素のスタイルに指定可能な、 stroke-dasharray プロパティstroke-dashoffset プロパティです。

stroke-dasharray プロパティは パスのストロークを点線や破線にするプロパティで、 stroke-dashoffset プロパティはパス開始のオフセット値を指定します。

これらそれぞれに、線アニメーションするパスの長さを指定することで初期表示では非表示となっています。

そして、 stroke-dashoffset プロパティの値を 0 にする class 属性を付与することで、オフセット値が 0 となり、 transition プロパティを指定していることでその間の値を補完してくれるのでアニメーションが実現されています。

サンプルでは transition プロパティを以下のように指定しています。

-webkit-transition: stroke-dashoffset 1s ease-out;
transition: stroke-dashoffset 1s ease-out;

stroke-dashoffset プロパティの値を、 1 秒かけて、 ease-out というイージングをさせながら補完する、いうような感じです。

なお、 Android 4.3 以下では ベンダープレフィックス( -webkit- )の指定が必要です。

カラーアニメーション

こちらは SVG 要素の fill プロパティを操作することでアニメーションさせています。

最初は transparent を指定することで、アニメーション可能です。

こちらもそれぞれの色を指定する class 属性を付与することでアニメーションさせています。

サンプルの transition プロパティを以下のように指定しています。

-webkit-transition: fill 1s ease-out;
transition: fill 1s ease-out;

まとめ

この例では、 CSS の値を class 属性で操作するだけですので、とても簡単に実現可能かと思います。

弊社スマートフォンサイトでもこれを利用しているので、ぜひ御覧いただければと思います。

スマホアプリ制作、Web制作、UIコンサルなどのご依頼はこちら

お問い合わせ