SVGのラインアニメーションをやってみたいがためだけにtkmh.meをリニューアルしました。

SVGのラインのアニメーションは意外と簡単でした。気をつけることはSVGの書き方くらい。下記サイトを参考にしました。

IllustratorでSVGスプライトをつくってみよう | Design Report – デザインレポート
ASCII.jp：SVG線画が美しいリッチアニメーションの作り方 (1/2)｜先端サイトに学ぶCSS3/jQueryアニメーションデザイン

SVGのCSSは以下の様な感じ(便宜上実際に使用したものとは異なります)。線を描画してから塗りをフェードインさせるというよくある感じアニメーションです。

アニメーション前は何も表示しない状態にしますが、パスの太さを2pxに設定しておきます。

svg {
  stroke: #000;
  stroke-width: 2px;
  fill: transparent;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

アニメーションさせるためのCSSは以下の様な感じ。transitionでstroke-dashoffsetを変更した後に、塗りを#000に、stroke-widthを0pxに設定しています(※後述)。

svg.animate {
  transition: stroke-dashoffset 1s ease, fill 0.4s ease 0.6s, stroke-width 0.4s ease 0.6s;
  stroke-dashoffset: 0;
  stroke-width: 0px;
  fill: #000;
}

stroke-widthで設定した線はベクターグラフィックのアウトラインの外側でもなく内側でもなく、真ん中に描画されるようです。CSSで変更もできません。

例えば「stroke-width: 2px」とすると、記述したSVGで定義されている図形のアウトラインよりも1px外側が見た目上のアウトラインになります。これは塗りと線を違う色で描画すればわかりやすいかと思います(普段からグラフィックソフトを使う人なら意味がわかると思いますが)。

線があるままだと期待通りの見た目ではないので、塗りをフェードインしながらstroke-widthを0pxにアニメーションしています。

ちなみに、Firefoxではstroke-widthの数値に単位(px)をつけないとアニメーションしてくれませんでした。

もう一つこだわったところは、最初のアニメーションで矩形が曲がり角に沿ったようにアニメーションするところ。これは「overflow: hidden」を設定した2つの面上でそれぞれ矩形を動かしてみたら、それっぽくなりました。要はアニメーションしてる矩形は2倍あるってことです(ソースを見たら容易にわかると思います)。動かすタイミングだけ合わせたら、折れ曲がった面上を沿って進んでるように見えます。

あとは適当にマウスの位置に合わせて角度を変えるインタラクションを入れてみました。そんな感じです。