2018年10月1日さて、皆さんsvg使ってますか?少しとっつきにくいsvgですが、使えると表現の幅が広がります。今回は、簡単に使えるsvgラインアニメーションをご紹介します。svgの詳しい仕様についてはW3Cのドキュメントを読むと良いです。文字の輪郭をなぞった後、塗りつぶすアニメーション解説ストロークフォント的アニメーション本記事の注意点svgアニメーションはIE11に対応していませんIEでSVGアニメーションを見せたい場合はsvg.jsなどのSVG操作系ライブラリを使用することになります。javascriptでアニメーション制御をするとコストが高くなるので、IEではアニメーションが見えなくてもいいように、フォールバックを表示するのがベターかと思います。svgの埋め込み方svgの埋め込みには4つの方法があります。objectを使用する方法imgを使用する方法cssを使用する方法インラインsvgを使用する方法(本記事)本記事ではインラインsvgを使用します。svgファイルの中身はどれも共通なので、見る分にはインラインsvgがわかりやすいです。同じsvgを複数の場所で使用する場合は、後述するobjectを使用した埋め込みなどを行いましょう。height="200"></object>objectを使用する方法では、以下のようにしてクラスを操作します。alt="">imgで埋め込んだ場合は後からクラスやスタイルの操作ができません。no-repeat;}こちらもimgを使用した場合と同様に、後からクラスやスタイルの操作ができません。/></svg>svgを書き出してテキストエディタで開くとこんな感じになってます。これ、実はHTMLに直書きして大丈夫です。ここにクラスやスタイルを追加していくことでアニメーションします。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”を追加すれば読み込まれ次第アニメーションします。CodePen.解説fillは塗りつぶしの色を指定します。animationに変更を加えました。線でなぞった後に、fillをtrasnparentから#000に変化させています。お気づきかと思いますが、svgは色を後から変更することができます。これもsvgを使用するメリットの一つです。ストロークフォント的アニメーションここまでラインアニメーションの話をしてきました。正直なところ線の一本一本を描くようなアニメーションがやりたいのであって、アウトラインをなぞってほしいわけではない、という方も多いのではないかと思います。それ、やり方あります。下処理が少し面倒です。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。