N.Y.C. Tech Library

ホームページの制作テクニックや日常のハックを綴る

WEB制作

svgラインアニメーションを使おう

投稿日:2018年9月17日 更新日:

さて、皆さんsvg使ってますか?
少しとっつきにくいsvgですが、使えると表現の幅が広がります。
今回は、簡単に使えるsvgラインアニメーションをご紹介します。

svgの詳しい仕様についてはW3Cのドキュメントを読むと良いです。

See the Pen text animation line by yabonary (@mtbk4919naoki) on CodePen.

See the Pen text animation line and fill by yabonary (@mtbk4919naoki) on CodePen.

本記事の注意点

svgアニメーションはIE11に対応していません

IEでSVGアニメーションを見せたい場合はsvg.jsなどのSVG操作系ライブラリを使用することになります。
javascriptでアニメーション制御をするとコストが高くなるので、IEではアニメーションが見えなくてもいいように、フォールバックを表示するのがベターかと思います。

svgの埋め込み方

svgの埋め込みには4つの方法があります。

  1. objectを使用する方法
  2. imgを使用する方法
  3. cssを使用する方法
  4. インラインsvgを使用する方法(本記事)

本記事ではインラインsvgを使用します。
svgファイルの中身はどれも共通なので、見る分にはインラインsvgがわかりやすいです。
同じsvgを複数の場所で使用する場合は、後述するobjectを使用した埋め込みなどを行いましょう。

objectを使用する方法

objectを使用する方法では、以下のようにしてクラスを操作します。

imgを使用する方法

imgで埋め込んだ場合は後からクラスやスタイルの操作ができません。

cssを使用する方法

こちらもimgを使用した場合と同様に、後からクラスやスタイルの操作ができません。

インラインsvgを使用する方法

svgを書き出してテキストエディタで開くとこんな感じになってます。
これ、実はHTMLに直書きして大丈夫です。
ここにクラスやスタイルを追加していくことでアニメーションします。

文字の輪郭をなぞるラインアニメーション

See the Pen text animation line by yabonary (@mtbk4919naoki) on CodePen.

SVGのtext要素を使っているので、文字情報を保持したままアニメーションできます。

解説

strokeは線の色を指定します。
stroke-widthは線の太さを指定します。
stroke-dasharrayは破線の間隔を指定します。
stroke-dashoffsetは破線の開始位置をずらします。

ポイントはstroke-dasharrayの設定です。
実際は破線なのですが、間隔を広げることで実線に見えるようにstroke-dasharrayを設定します。
長すぎず、短すぎずが重要です。

以上を踏まえたら、あとは通常のCSSアニメーションと同様になります。

@keyframesでアニメーションの定義を行います。

0%の時点ではstroke-dasharray(破線の間隔)と同じ分だけstroke-dashoffset(破線の開始位置)があるので、ちょうど線がない状態です。

これが100%になると、stroke-dashoffset(破線の開始位置)が0になるので、今度は全てに線がある状態になります。

とても長い間隔の破線を押し出すようなイメージです。

アニメーションの開始タイミング制御

アニメーションの開始タイミングはjavascriptで制御します。
svg要素にstartクラスがついた時に開始する仕組みです。

今回は読み込み後すぐに開始させていますが、実際にはin-view.jsなどを使って、画面の表示領域に入ったら開始するようにします。

ファーストビューで使う場合はjavascriptで制御する必要はありません。
svg要素にclass=”start”を追加すれば読み込まれ次第アニメーションします。

in-view.js

 

文字の輪郭をなぞった後、塗りつぶすアニメーション

See the Pen text animation line and fill by yabonary (@mtbk4919naoki) on CodePen.

解説

fillは塗りつぶしの色を指定します。

animationに変更を加えました。
線でなぞった後に、fillをtrasnparentから#000に変化させています。

お気づきかと思いますが、svgは色を後から変更することができます。
これもsvgを使用するメリットの一つです。

ストロークフォント的アニメーション

ここまでラインアニメーションの話をしてきました。
しかし、正直なところ線の一本一本を描くようなアニメーションがやりたいのであって、アウトラインをなぞってほしいわけではない、という方も多いのではないかと思います。

それ、やり方あります。
でも下処理が少し面倒です。

See the Pen lineAnimation by vivus-instant by yabonary (@mtbk4919naoki) on CodePen.

コードサンプルだけ置いていきます、詳しい作り方は次回

-WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【lazyload】画像の遅延読み込みのメリット・デメリット

目次 画像の遅延読み込みとはメリットデメリットライブラリ・プラグインlazysizes.js(非同期読み込み)lazyload.js 1.x (jQuery依存)lazyload.js 2.x (同期 …

【lazyload】lazysizes.jsの使い方 – 基本編

javascript 前回は画像の遅延読み込み(lazyload)の概要をご紹介しました。 今回は画像の遅延読み込みを実現するlazysizes.jsの基本的な使い方をご紹介します。 目次 準備npm …

ストロークフォント風アニメーションを作ろう

前回はsvgラインアニメーションをご紹介しました。 今回はsvgアニメーションを使ったストロークフォント風アニメーションです。 See the Pen lineAnimation by vivus-i …