ホームページ制作・大阪インフォメーションメディアデザイン

06-6809-5021

Staff Blog
スタッフブログ

  • Twitterでシェア
  • このエントリーをはてなブックマークに追加
  • Google+でシェア
  • follow us in feedly

SVGアニメーションをやってみた

SVGアニメーション

ここ最近、よく見かけるアニメーション。
昔みたいにFlashとかでやっているわけではなく、GIFでもなくってやつ。
そう、SVGでアニメーションやっているみたいです。
しかもこれ、CSSでできちゃうとか。。。
ってことで、早速やってみた。

SVGを作る

ひとまず、絵を書く。
今回はテストなので簡単に雲を書いてみる

書く

書けたら、SVGとして保存する。

svgで保存

SVGオプションはこんな感じで、特に触らないです。

svgオプション

ってよく見たら、下の方にSVGコードってボタンが有りました。
押してみたら、こんな感じでコードが出ます。

コード

このコードからSVGタグから下をコピーでOKです。

<svg version="1.1" id="cloud"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="595.28px"
     height="841.89px" viewBox="0 0 595.28 841.89" style="enable-background:new 0 0 595.28 841.89;" xml:space="preserve">
<path style="fill:none;stroke:#231815;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
    M560,362.25c0-20.485-16.609-38.352-41.262-47.893c1.477-4.11,2.262-8.417,2.262-12.857c0-28.443-32.235-51.5-72-51.5
    c-8.834,0-17.293,1.144-25.112,3.226C412.555,237.38,381.526,226,345,226c-15.162,0-29.367,1.97-41.624,5.396
    C286.536,212.424,258.499,200,226.75,200c-51.5,0-93.25,32.683-93.25,73c0,4.068,0.432,8.056,1.249,11.943
    C91.032,289,57,320.718,57,359.25C57,400.533,96.063,434,144.25,434c2.077,0,4.136-0.066,6.177-0.188
    C155.155,474.843,199.269,507,253,507c22.563,0,43.429-5.675,60.397-15.292c10.001,2.451,20.814,3.792,32.103,3.792
    c41.63,0,76.833-18.211,88.441-43.258c1.909,0.168,3.847,0.258,5.809,0.258c26.192,0,48.112-15.387,53.8-36.029
    C531.414,411.521,560,389.132,560,362.25z"/>
</svg>

こんな感じのコードが出てきます。
※IDのところはちょっと修正してます。

CSSの設定

<style>
#cloud {
stroke: salmon;
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
stroke-width: 2;
-webkit-animation: cloud_line 10s linear 0s infinite;
animation: cloud_line 10s linear 0s infinite;
}
@keyframes cloud_line {
0% { stroke-dashoffset: 2000; }
100% { stroke-dashoffset: 0; }
}
@-webkit-keyframes cloud_line {
0% { stroke-dashoffset: 2000; }
100% { stroke-dashoffset: 0; }
}
</style>

CSSはこんなかんじですね。
stroke-dasharray、stroke-dashoffsetはパスの長さを指定します。
パスより大きくても問題ないので少し大きめに書くと良いかも。

@keyframesは、CSSアニメーションですね。
こちらでアニメーションの設定をしています。

基本的には、「stroke-dasharray」、「stroke-dashoffset」これの設定を変えたらいろいろとアニメーションが変化するようですね。
実際動かしたものがしたになります。

See the Pen xZJKje by msys (@msys1582) on CodePen.

どうですかね?
いい感じで、動いてますね。
もっと複雑なものでアニメーションできそうですね。
簡単な、アニメーションだとこれを使うと結構動作の軽いものが作れそうです。
IEの古いバージョンがサポートが切れて、SVGがこれからどんどん出てくる様になると思います。
え!もうでてる?はい、でてますね。
もっと便利な使い方が出てくるはず。勉強の日々は続く!
それではまた!

この記事を共有する

髭人
投稿者:髭人
2016年02月01日月曜日 | 21:11
ネタ探しのたびに出ていいですか!

この人が書いたその他のブログ記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  • I.M.Dコーポレートサイト
お問い合わせ