svgをcssでアニメーションさせる
これをやるにはsvg形式のファイルが必要
イラストレーターで書き出しましょう
googleによると
『Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG）は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。 アニメーションやユーザインタラクションもサポートしている。 SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。』
だそうです。
拡大縮小にすごく強い画像形式だと思います
ここで紹介しているってことはwebでもイケます
複雑なsvgアニメーションはアフターエフェクトを使うと簡単にできますよ
svg形式のファイルの扱い方
imgタグであったり背景画像の設定であったり普通の画像と同じように使えます
cssと組み合わせてアニメーションさせる場合はsvg形式のファイルを「テキストエディタ」で開き 書いてあるコードをHTMLの貼り付けたい場所にコピペしましょう
イラレで作った時に出てくるタグ
| svg | svgを埋め込むときに全体を囲むためのタグ |
| defs | 描画オブジェクトの定義をするタグ イラストレーターで作るとstyle属性が入っていて描画用のcssが設定されている ※アニメーション設定をする際に邪魔になる場合があるので消すことも可能 設定はcssの方でした方が管理しやすい |
| title | svgのタイトルを設定するタグ マウスカーソルをsvgに乗せるとここで設定したタイトルが小さく表示される |
| path | パスを描画するときの情報が入っているタグ 線はstrokeプロパティ 塗はfillプロパティで色の設定ができる |
| circle | 円を描画するときの情報が入っているタグ 線はstrokeプロパティ 塗はfillプロパティで色の設定ができる |
| line | 直線を描画するときの情報が入っているタグ 線はstrokeプロパティ 塗はfillプロパティで色の設定ができる |
ぬけがあるかもしれません
基本的にこれらのタグを操作すると描画がおかしくなったりするのでそのまま使う
実際に使ってみる
今回は下のようなsvg形式のファイルを用意しました
輪郭はパス
目は塗
口は直線でそれぞれ作りました
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<svg id="usagi" data-name="usagi" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.08 66.29"> <defs> <style> .cls-1 { fill: none; } .cls-1, .cls-3 { stroke: #000; } .cls-1, .cls-2, .cls-3 { stroke-miterlimit: 10; } .cls-2 { stroke: transpearent; } .cls-3 { fill: #fff; } </style> </defs> <title>mッフィーサンプル</title> <path class="cls-1" d="M41.5,33.5s-8-27-1-28,11-1,8,27c0,0,4-1,7,0,0,0-6-28,4-27s2,28,2,28,11,5,11,20-16,17-23,17-20-4-21-17S36.5,33.5,41.5,33.5Z" transform="translate(-27.92 -4.71)"></path> <circle class="cls-2" cx="10.08" cy="44.29" r="1.5"></circle> <circle class="cls-2" cx="33.08" cy="44.29" r="1.5"></circle> <line class="cls-3" x1="18.58" y1="51.79" x2="22.58" y2="54.79"></line> <line class="cls-1" x1="22.58" y1="51.79" x2="18.58" y2="54.79"></line> </svg> |
これをアニメーション付きで表示していきたいと思います
svgをテキストエディタで開く
なにも設定をいじっていない状態であればアイコンはIEになっているはず
これをテキストエディタ開くとコードが出現しますので貼り付けたいところにコピペしましょう
cssを記述する
svg用のプロパティ
| stroke | 線の色の設定をするプロパティ |
| fill | 塗の色を設定するプロパティ |
| stroke-width | 線の太さを設定するプロパティ |
| stroke-opacity | 線の不透明度を設定するプロパティ |
| stroke-linecap | 線の端部分の設定 round：丸 butt：平ら square：四角 |
| stroke-linejoin | 線の頂点の設定 miter：鋭角 round：丸 bevel：面取り |
| stroke-dasharray | 点線や破線のパターンを設定 長さの数値をカンマ区切りで設定する |
| stroke-dashoffset | 線の開始位置の設定 |
今回は輪郭を描画する→目を描画する→口を描画する
という順番で表示していきたいと思います
輪郭はpathタグ
目はcircleタグ
口はlineタグで生成されていますのでそれぞれに対してアニメーションの設定をします
今回は線の開始位置をずらしておき、見えなくし、
徐々に開始位置を戻して線をを書いてるように表示するためanimationと@keyframesを使い簡単なアニメーションにしました
参考に各部位のcssのコードを紹介しておきます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@keyframes rinkaku{ 0%{ stroke-dashoffset:280; } 50%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:0; } } path{ fill:rgba(0,0,0,0); stroke-dasharray:280; stroke-dashoffset:280; stroke-linecap: round; animation:rinkaku 10s linear forwards; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@keyframes me{ 0%{ fill:rgba(0,0,0,0); } 55%{ fill:rgba(0,0,0,0); } 65%{ fill:rgba(0,0,0,1); } 100%{ fill:rgba(0,0,0,1); } } circle{ animation:me 10s linear forwards; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@keyframes kuchi{ 0%{ stroke-dashoffset:10; } 70%{ stroke-dashoffset:10; } 80%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:0; } } line{ stroke-dasharray:10; stroke-dashoffset:10; stroke-linecap: round; animation:kuchi 10s linear forwards; } |
