North Detail / ノースディテール

BLOG ブログ

ブログ
CATEGORY
TECH

cssでsvgをアニメーションしてみる件

Please
hover.

かなり前に『cssでモーショングラフィックス風に円グラフを表示させる』という記事を書きました。その際に cssアニメーションに関して、少しだけザワついたので今更ながら詳細を解説したいと思います。
上記の例は星形をアニメーションさせてますが、これを基準に進めます。(hover してみてください)

svg を用意・作成する

アプリケーションを使って作成

ぶっちゃけ svg が出力できるのであれば、どのようなアプリを使っても問題はありません。
一番使い慣れているモノがイイですね!
おそらくですが…大半の方が illustrator を使用するのではないかと推測します。
ちなみに私は少数派だと思いますが FireWorks を使用して作成しております…

それと css を設定する際に必要になりますので、パスの長さを測っておきましょう。
illustrator の場合は【ウインドウ>ドキュメント情報>オブジェクト】でパスの長さが表示されます。
ちなみに今回の例では 1250px となっております。

座標で path を設定し作成

<path d="M 125 1 L 199 226 L 6 87 L 244 87 L 52 227 L 125 1 Z"/>

上記のソースだと、下記のような意味になります…

  1. 座標 X:125,Y:1 から開始(M)
  2. そこから座標 X:199,Y:226 に線を引く(L)
  3. そこから座標 X:6,Y:87 に線を引く(L)
  4. そこから座標 X:244,Y:87 に線を引く(L)
  5. そこから座標 X:52,Y:227 に線を引く(L)
  6. そこから座標 X:125,Y:1 に線を引いて図形を閉じる(Z)

上記ソースのように座標(X,Y)の前にある M とか L にはそれぞれ意味があります。
svg では、6タイプのパスコマンドを定義していて、全部で20個のコマンドがあります。

  • MoveTo:M, m
  • LineTo:L,l,H,h,V,v
  • 3次ベジエ曲線:C,c,S,s
  • 2次ベジエ曲線:Q,q,T,t
  • 楕円円弧曲線:A,a
  • ClosePath:Z,z

コマンドの大小文字には意味・区別があります。
大文字のコマンドは 絶対座標を指定 し、これに対して小文字のコマンドは現在位置からの 相対座標を指定 します。

ブラウザ上で svg を作成

実際に使ってみて『これは便利で簡単!』って感じたサイトをご紹介します。
※Webリテラシーが原始人並みの私でも使えました( ̄^ ̄)ゞ

  • BoxySVG
    高機能で、アプリとしてインストールすることもできます。
  • Vectr
    チュートリアルもありますが、見る必要がないほどシンプルで、最低限の機能が直感的に操作できます。

css を設定する

実際にサンプル用に書いた css が下記になります。

.sampleStar path{
  fill:none;
  stroke:#666;
  stroke-dasharray:1250;
  stroke-dashoffset:1250;
  transition:stroke-dashoffset 2.5s ease-out;
}
.sampleStar:hover path{
  stroke-dashoffset:0;
}

一応1つ1つの css 解説

  • fill:none:svg の『塗り』をナシに設定
  • stroke:#666:svg の『線』をグレーに設定
  • stroke-dasharray:1250:svg の『破線間隔』を1250pxに設定
  • stroke-dashoffset:1250:svg の『始点』を1250pxに設定
  • transition:stroke-dashoffset 2.5s ease-out:要素の stroke-dashoffset に対して対応時間・イージングを設定
  • stroke-dashoffset:0:要素に hover した際の svg の『始点』を0に設定

実際の動きを解説

stroke-dasharray:1250 にて『線部分1250px・隙間1250px』の破線が作成され、stroke-dashoffset:1250 にて『始点を1250px』ズラしてます。
結果『隙間1250px』部分が表示されます(何も表示されないってことですねw)。
要素に hover した際に transition:stroke-dashoffset 2.5s ease-outstroke-dashoffset:0 が適用になり、実質 2.5秒かけて 1250px の線が表示されていきます。

このようにして上部にある星形の動きを実装しています。
思った以上に単純・簡単ですよね? の割にはそこそこインパクトがあるのが素敵です☆

少しアレンジした例

Pugったファイル

div
  ol
    - for (var x = 0; x < 60; x++)
      li 
        <svg viewBox="0 0 250 250" x="0px" y="0px" width="250px" height="250px"><path d="M 125 1 L 199 226 L 6 87 L 244 87 L 52 227 L 125 1 Z"/></svg>

css 設定

ol{
  list-style:none;
  position:relative;
  li{
    position:absolute;
    stroke-dasharray:0 1250;
    svg{
      animation:rotate 20s linear infinite;
      path{
        fill:none;
        stroke:#333;
      }
    }
  }
}
@for $i from 0 to 60{
  li:nth-child(#{$i + 1}){
    transform:rotate(#{$i * 6}deg);
    animation:star 0.5s ease-out #{$i / 2 + 0.5}s 1 forwards;
    path{
      opacity:#{($i + 1) / 10};
    }
  }
}
@keyframes rotate{
  0% {transform:rotateZ(0turn)rotateX(0turn)rotateY(0turn);}
  100% {transform:rotateZ(1turn)rotateX(2turn)rotateY(1turn);}
}
@keyframes star{
  0%{stroke-dasharray:0 1250;}
  99.9%,to{stroke-dasharray:1250 1250;}
}

完成物

今回のサンプルと同じものを複数個用意して、時間・軸をズラして表示しただけで、ちょっとした立体的な幾何学模様になりますね…実際には使いどころとして微妙ですが、あくまでもこういうモノも簡単に svg + css のみで表現できますよんっていうアレです。

毎度恒例の『おまけ』

ゴムゴムっぽい人

メラメラっぽい人

新しいメラメラっぽい人

『おまけ』の内容はともかく、svg + cssアニメーションで、イロイロな表現ができそうですよね?
もう書き飽きましたが、ie というブラウザでは一部未対応となりますことを共有しておきます…

nanba
WRITER:nanba
高い技術力を誇る『NorthDetail』内では珍しい『チカラワザ系コーダー』
主な記事 一覧へ

一覧へ

IS 501383 / ISO 27001