【打倒Retinaその3】SVG入門〜すぐに使える簡単アニメーション〜

2014年9月2日

Pocket

0904

これが使いたかった!!SVGアニメーション!!!
SVG第三弾 いよいよアニメーションです。
SVGを利用するとスムーズでリッチなアニメーションの実現が可能です。
基本ではありますが、これを覚えれば今後役に立つことでしょう。
それでは、SVGでどんどんアニメーションを作っていきましょう。
 
 
 
SVGでのアニメーションはanimateタグを使います。
アニメーションしたい要素の中にanimateタグを記述していきます。

<svg width="200" height="200">
   <circle cx="100" cy="100">
      <animate 属性記述/>
   </circle>
</svg>

animateタグで使用する基本的な属性

attributeName アニメーションの対象となる属性の名前
from アニメーションの開始時の値
to アニメーションの終了時の値
by アニメーションの終了時の値を開始時の値からの相対で指定
dur アニメーション時間
h:時間、min:分、s:秒、ms:ミリ秒で表記
fill アニメーション終了時、開始時の値に戻るかを指定
“remove”:開始時に戻る、”freeze”:終了時のまま止まる
begin アニメーションの開始時間
h:時間、min:分、s:秒、ms:ミリ秒で表記
repeatCount リピート数
数字:表記回数分リピート、”indefinite”:無限リピート

拡大アニメーション

byで指定toで指定

<svg width="400" height="200">
   <circle cx="100" cy="100" r="20" fill="red">
      <animate attributeName="r" from="20" by="30" dur="2s" repeatcount="indefinite"/>
   </circle>
   <text x="75" y="190" font-size="15" fill="gray">byで指定</text>

   <circle cx="250" cy="100" r="20" fill="blue">
      <animate attributeName="r" from="20" to="50" dur="2s" repeatcount="indefinite"/>
   </circle>
   <text x="225" y="190" font-size="15" fill="gray">toで指定</text>
</svg>

左はby属性を使用してアニメーションしています。byは相対な値なので、20
からプラス30大きくなり、拡大後のサイズが50になります。
左はto属性を使用してアニメーションしています。toは絶対な値なので、20
から50に大きくなり、拡大後のサイズが50になります。
 

■valuesを使って書く

<svg width="200" height="200">
   <circle cx="100" cy="100" r="20" fill="red">
      <animate attributeName="r" values="20; 50; 20" dur="4s" repeatcount="indefinite"/>
   </circle>
</svg>

values=”開始時の値; 終了時の値; 戻る値”
としたら往復するアニメーションが作れます

線アニメーション

<svg width="300" height="200">
   <line x1="50" y1="50" x2="60" y2="50" stroke-width="10" stroke="black" stroke-linecap="round">
      <animate attributeName="x2" from="50" to="250" dur="2s" begin="0s" repeatcount="indefinite"/>
   </line>
   <line x1="50" y1="100" x2="60" y2="100" stroke-width="10" stroke="black" stroke-linecap="round">
      <animate attributeName="x2" from="50" to="250" dur="2s" begin="1s" repeatcount="indefinite"/>
   </line>
</svg>

beginで開始時間をずらしています。
上は0秒
下は1秒後にアニメーションを開始します。

色アニメーション

<svg width="200" height="200">
   <circle cx="100" cy="100" r="50" fill="pink">
      <animate id="animate1" attributeName="fill" from="pink" to="yellow" dur="3s" begin="0s; animate2.end" fill="freeze"/>
      <animate id="animate2" attributeName="fill" from="yellow" to="skyblue" dur="3s" begin="animate1.end" fill="freeze"/>
   </circle>
</svg>

animate要素にidをふって、begin属性に ”id” + ”.end” と記述するとそのidのアニメーションが終了後にアニメーションが実行されます。
※fill=”freeze”を記述しないと初期値に戻ってしまいます。

グラデーションアニメーション

<svg width="200" height="200">
   <defs>
      <radialGradient id="anime_grad" gradientUnits="userSpaceOnUse" cx="100" cy="100" r="50" spreadMethod="repeat">
         <stop offset="0" stop-color="blue">
            <animate id="anim" attributeName="offset" dur="3s" values="0; 1; 0" repeatCount="indefinite"/>
         </stop>
         <stop offset="1" stop-color="#ccc" /> 
      </radialGradient>
   </defs>
   <circle cx="100" cy="100" r="50" fill="url(#anime_grad)"/>
</svg>

移動アニメーション

<svg width="300" height="100">
   <circle cx="50" cy="50" r="10" fill="blue">
      <animate attributeName="cx" dur="3s" values="50; 250; 50" repeatCount="indefinite"/>
   </circle>
</svg>

パス上移動アニメーション

<svg width="1000" height="300">
   <path id="line2"
      d="M 120 100 L 300 100 Q 300 100 320 100 T340 120
      L340 220 Q 340 220 340 240 T320 260 
      L140 260 Q 140 260 120 260 T100 240
      L100 140 Q 100 140 100 120 T120 100" 
      fill="none" stroke="black" stroke-width="2"/>
   <circle cx="0" cy="0" r="10" fill="black">
      <animateMotion dur="5s" repeatcount="indefinite">
         <mpath xlink:href="#line2"/>
      </animateMotion>
   </circle>
</svg>

pathにidをふり、
animateMotionタグを使い、xlink:hrefにパスのidを指定します。

イージング

<svg width="200" height="200">
   <circle cx="100" cy="20" r="10" fill="red">
      <animate id="f" attributeName="cy" calcMode="spline" keyTimes="0;1" keySplines="0.6 0 1.0 1.0" from="20" to="180" begin="0s; s.end" dur="2s" 
fill="freeze"/>
      <animate id="s" attributeName="cy" calcMode="spline" keyTimes="0;1" keySplines="0.0 0.0 0.5 1.0" from="180" to="20" begin="f.end" dur="2s" 
fill="freeze"/>
   </circle>
</svg>

バウンド

最後に応用してバウンドしたボールのようなアニメーションを作ってみました

<svg width="300" height="300">
   <ellipse cx="100" cy="30" rx="20" ry="20" fill="black">
      <animate id="first" attributeName="cy" calcMode="spline" keyTimes="0;1" keySplines="0.6 0 1.0 1.0" from="30" to="250" dur="1s" begin="0s; second.end" fill="freeze" />
      <animate id="second" attributeName="cy" calcMode="spline" keyTimes="0;1" keySplines="0.0 0.0 0.5 1.0" from="250" to="30" dur="1s" begin="bound_first.end" fill="freeze" />
      <animate id="bound_first" attributeName="ry" from="20" to="10" dur="0.2s" begin="first.end" fill="freeze" />
      <animate id="bound_second" attributeName="ry" from="10" to="20" dur="0.3s" begin="bound_first.end" fill="freeze" />
   </ellipse>
</svg>

 
 
 
3弾に渡ってSVGの解説をしましたが、まだまだ基本で応用したら色々できると思います。
拡大縮小に耐えられる美しいサイト制作を目指していきましょう!
 
 
【打倒Retinaその1】劣化知らず!伸縮自在のベクター画像『SVG』
【打倒Retinaその2】SVG入門〜いろいろなスタイル指定〜

このサイトについて


『意識低い系女と高い系男の一年戦争』はクリエイティブ会社エアゼの代表2人が運営するブログです。エアゼは、アプリ・Web・IoT・インタラクティブコンテンツのデザイン・開発を手がけています。

エアゼ ホームページ