Weblasts

svgをcssでアニメーションさせる

これをやるにはsvg形式のファイルが必要
イラストレーターで書き出しましょう

svg形式?

googleによると

『Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス、SVG)は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。 アニメーションやユーザインタラクションもサポートしている。 SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。』

だそうです。
拡大縮小にすごく強い画像形式だと思います
ここで紹介しているってことはwebでもイケます

svg形式のファイルの扱い方

imgタグであったり背景画像の設定であったり普通の画像と同じように使えます

cssと組み合わせてアニメーションさせる場合はsvg形式のファイルを「テキストエディタ」で開き 書いてあるコードをHTMLの貼り付けたい場所にコピペしましょう

イラレで作った時に出てくるタグ

svgsvgを埋め込むときに全体を囲むためのタグ
defs描画オブジェクトの定義をするタグ
イラストレーターで作るとstyle属性が入っていて描画用のcssが設定されている
※アニメーション設定をする際に邪魔になる場合があるので消すことも可能
設定はcssの方でした方が管理しやすい
titlesvgのタイトルを設定するタグ
マウスカーソルをsvgに乗せるとここで設定したタイトルが小さく表示される
pathパスを描画するときの情報が入っているタグ
線はstrokeプロパティ
塗はfillプロパティで色の設定ができる
circle円を描画するときの情報が入っているタグ
線はstrokeプロパティ
塗はfillプロパティで色の設定ができる
line直線を描画するときの情報が入っているタグ
線はstrokeプロパティ
塗はfillプロパティで色の設定ができる

ぬけがあるかもしれません
基本的にこれらのタグを操作すると描画がおかしくなったりするのでそのまま使う

実際に使ってみる

今回は下のような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のコードを紹介しておきます

輪郭のコード

@keyframes ono{
  0%{
    stroke-dashoffset:2000;
  }
  50%{
    stroke-dashoffset:1800;
  }
  100%{
    stroke-dashoffset:0;
  }
}

path{
  fill:rgba(0,0,0,0);
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  stroke-linecap: round;
  animation:ono 2s forwards;
}
目のコード

@keyframes ono2{
  0%{
    fill:rgba(0,0,0,0);
  }
  100%{
    fill:rgba(0,0,0,1);
  }
}

circle{
  animation:ono2 2s step-end forwards;
}
口のコード

@keyframes ono3{
  0%{
    stroke-dashoffset:2000;
  }

  100%{
    stroke-dashoffset:0;
  }
}

line{
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  stroke-linecap: round;
  animation:ono3 3s step-end forwards;
}

更に参考

上のはgifなので本物をアップロードしてみました

sample10

Recommend Post