Go to Qiita Advent Calendar 2024 Top
LoginSignup
12
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@takeshisakuma(takeshi sakuma)

SMILによるSVGアニメーション

Posted at

SMILはSynchronized Multimedia Integration Languageの略で、SVGのアニメーション機能です。
※IEはSMILをサポートしていません。

SMIL以外の方法でのSVGアニメーションはこちらをご参照ください。
SVGのアニメーション方法の比較

主なタグ(3種類)

  • animate
  • animateTransform
  • animateMotion

animate

単純なアニメーション

キーフレームが始点と終点のみのアニメーションに使います。

svg
<svg width="600" height="600" viewBox="0, 0, 600, 600" xmlns="http://www.w3.org/2000/svg">
  
  <circle cx="10" cy="10" r="10" fill="#3498db">
    <animate attributeType="XML" attributeName="cx" dur="5s" from="0" to="600" repeatCount="indefinite" />
  </circle>
  
</svg>
animateタグの属性 内容
attributeType attributeNameの対象の種類の指定(XML/CSS)
attributeName アニメーションの対象となる属性
dur アニメーションの1回のループにかける時間
repeatCount リピート回数の指定(0以上の数/indefinite)
from 初期値(省略時はアニメーション適用前の値)
to 目標値
by 目標値(初期値から相対で指定)

キーフレームアニメーション

キーフレームが3点以上のアニメーションにも対応可能です。
from/to/byの代わりにvaluesで各時点での値をコロン区切りで指定します。

プロパティのアニメーション

svg
<svg width="600" height="600" viewBox="0, 0, 600, 600" xmlns="http://www.w3.org/2000/svg">
 
  <circle cx="0" cy="10" r="10" fill="#27ae60" >
  　 <animate attributeType="XML" attributeName="cx" dur="5s" values="0;10;20;30;600" repeatCount="indefinite" />
  </circle>
   
</svg>

モーフィング

「d=”~”」の箇所を「value=”~”」に入れます。
pathの区切りは「;」です。
アニメーション開始時と終了時のpath要素(d属性の内容)の形式(コマンドの種類や数)が一致していなければいけないので、path要素に変更する必要があります。
コマンドの種類や数が一致していない場合、滑らかな動きにはなりません。

svg
<svg width="600" height="600" viewBox="0, 0, 600, 600" xmlns="http://www.w3.org/2000/svg">
  
  <path fill="#27ae60" d="M 0,0 L 100,0 600,600 0,100">
    <animate attributeType="XML" attributeName="d" dur="6s" repeatCount="indefinite" 
      values="
        M 0,0 L 100,0 600,600 0,100;
        M 0,0 L 600,100 100,100 100,600;
        M 0,0 L 100,0 600,600 0,100"/>
  </path>
  
</svg>

animateTransform

transform属性はanimateタグが使えないので、代わりにanimateTransformタグを使います。

タグ type属性
animate type属性不要
animateTransform type属性必要

type="translate"

平行移動のアニメーションです。
値の形式：X、Y座標を空白・コンマ区切りで並べます。

svg
<svg width="600" height="600" viewBox="0, 0, 600, 600" xmlns="http://www.w3.org/2000/svg">
  
  <circle cx="10" cy="10" r="10" fill="#27ae60">
    <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="6s" repeatCount="indefinite" values="10,10; 20,10; 600,10" />                            
  </circle>
  
</svg>

type="scale"

拡大・縮小のアニメーションです。
値の形式：X方向、Y方向の倍率を空白・コンマ区切りで並べます。
拡大・縮小の中心は原点です。

svg
<svg width="600" height="600" viewBox="0, 0, 600, 600" xmlns="http://www.w3.org/2000/svg">
      
  <circle cx="100" cy="100" r="50" fill="#27ae60">
    <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1 1; 2 1;1 1;" dur="6s" repeatCount="indefinite" />
  </circle>
  
</svg>

type="rotate"

回転のアニメーションです。
値の形式：回転角、回転中心のX、Y座標を空白・コンマ区切りで並べます。
回転の中心が指定できます。

svg
<svg width="600" height="600" viewBox="0, 0, 600, 600" xmlns="http://www.w3.org/2000/svg">
      
  <rect x="100" y="100" width="50" height="50" fill="#27ae60">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 100,100;360 100,100" dur="6s" repeatCount="indefinite" />
  </rect>
  
</svg>

type="skewX"、type="skewY"

せん断変形のアニメーションです。
値は軸の回転角です。
変換の中心は原点です。

svg
<svg width="600" height="600" viewBox="0, 0, 600, 600" xmlns="http://www.w3.org/2000/svg">
  
  <circle cx="200" cy="100" r="50" fill="#27ae60">
    <animateTransform attributeName="transform" attributeType="XML" type="skewX"  values="30; -30; 30" dur="6s" repeatCount="indefinite" />
  </circle>
   
</svg>

animateMotion

パスで定義した軌跡をなぞって移動するアニメーションです。
animateタグとの違い　from/to/byやvalues属性は指定できません。

rotate属性

回転処理の指定を行います。

値 内容
数値を指定 対象の図形を回転される角度を指定
auto X軸が移動方向を向くように自動的に回転
auto-reverse 反対を向くように自動的に回転
svg
<svg width="600" height="600" viewBox="0, 0, 600, 600" xmlns="http://www.w3.org/2000/svg">
      
  <rect x="0" y="0" width="10" height="5" fill="#27ae60">
    <animateMotion dur="6s" repeatCount="indefinite" path="M 10,40 c 0,-80 580,80 580,0 s -580,80 -580,0" rotate="auto-reverse"/>
  </rect>
   
</svg>

キーフレームの制御

values属性によるアニメーションです。

calcMode属性

linear(デフォルト)

各キーフレーム間を一定の変化量で補完します。

svg
<svg width="600" height="600" viewBox="0, 0, 600, 600" xmlns="http://www.w3.org/2000/svg">
  
  <circle cx="0" cy="10" r="10" fill="#27ae60" >
    <animate attributeType="XML" attributeName="cx" dur="5s" values="0;100;200;400;500;550;600" repeatCount="indefinite" calcMode="linear"/>
  </circle>
  
</svg>
discrete

補完処理を行いません。

svg
<svg width="600" height="600" viewBox="0, 0, 600, 600" xmlns="http://www.w3.org/2000/svg">
  
  <circle cx="0" cy="10" r="10" fill="#27ae60">
    <animate attributeType="XML" attributeName="cx" dur="5s" values="0;100;200;400;500;550;600" repeatCount="indefinite" calcMode="discrete"/>
  </circle>
  
</svg>
spline

三次ベジェ曲線による補完
keySplines属性でベジェ曲線の制御点の指定が必要
値：空白・コンマ区切りの数値4つ「x1,y1 x2,y2」(コロン区切り)
数：キーフレームの数-1

svg
<svg width="600" height="600" viewBox="0, 0, 600, 600" xmlns="http://www.w3.org/2000/svg">
 
  <circle cx="0" cy="10" r="10" fill="#27ae60">
    <animate attributeType="XML" attributeName="cx" dur="5s" values="0;100;200;400;500;550;600" repeatCount="indefinite" calcMode="spline" keySplines="01,01 0.1,0.1;0.2,0.2 0.2,0.2;0.3,0.3 0.3,0.3;0.4,0.4 0.4,0.4;0.5,0 0.5,0.5;0.6,0.6 0.6,0.6"/>    
  </circle>
  
</svg>
paced

区間の距離と関係なくアニメーション全体にわたって一定の速度で移動

svg
<svg width="600" height="600" viewBox="0, 0, 600, 600" xmlns="http://www.w3.org/2000/svg">
 
  <circle cx="0" cy="10" r="10" fill="#27ae60">
    <animate attributeType="XML" attributeName="cx" dur="5s" values="0;100;200;400;500;550;600" repeatCount="indefinite" calcMode="paced"/>
  </circle>
  
</svg>

keyTimes属性

区間ごとの時間の調整を明示的に行う
値：開始時点を0.0、終了時点を1.0とした小数(セミコロン区切り)
数：keyTimes属性に指定する値の数はvaluesと同じ

svg
<svg width="600" height="600" viewBox="0, 0, 600, 600" xmlns="http://www.w3.org/2000/svg">
 
  <circle cx="0" cy="10" r="10" fill="#27ae60">
    <animate attributeType="XML" attributeName="cx" dur="5s" values="0;100;200;400;500;550;600" repeatCount="indefinite" keyTimes="0;0.1;0.2;0.3;0.4;0.5;1"/>
  </circle>
  
</svg>

keyPoints属性

calcMode属性とkeyTimes属性をanimateTransformとanimateMotionに使う場合、モーションパス上にキーフレームが存在しないので、キーフレームを設定するために指定します。
値：モーションパス全体の長さを1.0として指定(セミコロン区切り)
数：keyTimes属性に指定する値の数はkeyPointsと同じ

svg
<svg width="600" height="600" viewBox="0, 0, 600, 600" xmlns="http://www.w3.org/2000/svg">
 
  <circle cx="0" cy="10" r="10" fill="#27ae60">
    <animateMotion attributeType="XML" dur="6s" repeatCount="indefinite" path="M 10,10 l 550,10 10,550 Z" calcMode="linear" keyPoints="0; 0.5; 1" keyTimes="0; 0.2; 1" />
  </circle> 
   
</svg>

開始トリガー

開始/終了トリガー 内容
begin属性 開始トリガーのカスタマイズ　
end属性 終了トリガーのカスタマイズ
※begin属性とend属性の指定方法は同じです。

begin属性/end属性

begin/endタグにはセミコロン区切りで複数のトリガーを併記できます。

begin属性、end属性の値 内容
indefinite デフォルト動作をしない
アニメーションのID.イベント名(±時間) 指定したタグで指定したイベントが発生した際にアニメーションを開始
アニメーションタグのID.repeat(n)(±時間) 特定のリピートの開始をトリガーにする

fill属性

アニメーション終了後の状態を選択します。

fill属性の値 内容
remove(デフォルト) 元の値を復帰する
freeze アニメーション終了時の値を維持する

時間経過をトリガーにする

begin属性に時間指定を記述します。(マイナスも指定可)

svg
<svg width="600" height="600" viewBox="0, 0, 600, 600" xmlns="http://www.w3.org/2000/svg">
   
  <rect x="10" y="10" width="100" height="100" fill="#27ae60">
    <animate attributeType="XML" attributeName="x" dur="10s" values="10; 290; 10" repeatCount="indefinite" /> 
  </rect>
 
  <rect x="10" y="210" width="100" height="100"  fill="#f39c12">
    <animate attributeType="XML" attributeName="x" dur="10s" values="10; 290; 10" begin="1s" repeatCount="indefinite" />
  </rect>
      
</svg>

他のアニメーションの開始、終了をトリガーにする

begin属性に「アニメーションのID.begin||end (± 時間)」を指定します。

svg
<svg width="600" height="200" viewBox="0, 0, 600, 200" xmlns="http://www.w3.org/2000/svg">
  
  <circle cx="10" cy="10" r="10" fill="#e74c3c">
    <animate attributeType="XML" attributeName="cx" dur="2s" from="10" to="590" id="anime1" begin="0s; anime4.end+1s" fill="freeze" />
    <animate attributeType="XML" attributeName="cx" dur="2s" from="590" to="10" id="anime3" begin="anime2.end+1s" fill="freeze" />
  </circle> 
      
  <circle cx="10" cy="50" r="10" fill="#2980b9">
    <animate attributeType="XML" attributeName="cx" dur="1s" from="10" to="590" id="anime2" begin="anime1.end+1s" fill="freeze" />
    <animate attributeType="XML" attributeName="cx" dur="1s" from="590" to="10" id="anime4" begin="anime3.end+1s"  fill="freeze"/>
  </circle>
          
</svg>

リピート回数をトリガーにして値を変更

setタグ

トリガーを受けて、一度だけto属性の値を対象の属性に設定します。

svg
<svg width="600" height="200" viewBox="0, 0, 600, 200" xmlns="http://www.w3.org/2000/svg">
  
  <circle cx="40" cy="40" r="10" fill="#27ae60">
    <animate repeatCount="3" attributeType="XML" attributeName="cx" dur="3s" values="40; 560;" id="move" begin="0s;move.end"/>   
      <set attributeType="XML" attributeName="r" begin="move.repeat(1)" to="20" />
      <set attributeType="XML" attributeName="fill" begin="move.repeat(1)" to="#3498db" />
      <set attributeType="XML" attributeName="r" begin="move.repeat(2)" to="40" />
      <set attributeType="XML" attributeName="fill" begin="move.repeat(2)" to="#34495e" />
  </circle>
     
</svg>

ユーザーの操作をトリガーにする

restart属性

2回目以降の開始トリガーの処理を指定します。

restartの値 内容
always(デフォルト 常に開始する
whenNotActive アニメーション中でなければ開始する
never 2回目以降は開始しない
svg
<svg width="600" height="200" viewBox="0, 0, 600, 200" xmlns="http://www.w3.org/2000/svg">
  
  <circle cx="20" cy="20" r="20" fill="#27ae60">
    <animate attributeType="XML" attributeName="cx" dur="1s" values="20; 580" begin="move.click"/>
  </circle>
 
  <circle cx="318" cy="100" r="30" id="move" fill="#f1c40f" />
  <text x="300" y="105" pointer-events="none" fill="#fff">
    push
  </text>
     
</svg>

複数プロパティのアニメーション

svg
 <svg width="600" height="200" viewBox="0, 0, 600, 200" xmlns="http://www.w3.org/2000/svg">
   <circle cx="40" cy="40" r="20" fill="#3498db">
   <animate attributeType="XML" attributeName="cx" dur="3s" values="40;560;" repeatCount="indefinite" />
    <animate attributeType="XML" attributeName="r" dur="3s" values="20;40;" repeatCount="indefinite" />
    <animate attributeType="XML" attributeName="fill" dur="3s" values="#2ecc71;#8e44ad;" repeatCount="indefinite" />
  </circle>
</svg>

additive属性

アニメーションで計算された値を属性値に反映させる処理を指定します。
animateTransformタグの変形アニメーションは移動・回転・スケーリング・せん断が全部transform属性なので「additive="sum"」の指定が必要です。

additiveの値 内容
replace(デフォルト) 上書き
sum 元の値に加算
svg
<svg width="600" height="200" viewBox="0, 0, 600, 200" xmlns="http://www.w3.org/2000/svg">
  
  <rect x="20" y="20" width="40" height="40" fill="#3498db">
    <animateTransform attributeName="transform" attributeType="XML" type="translate" values="40,60; 520,60;" dur="3s" repeatCount="indefinite" additive="sum"/>
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 15,15" to="360 15,15" dur="3s" repeatCount="indefinite" additive="sum" />
  </rect>
         
</svg>

accumulate属性

アニメーションのリピート時の動作を指定します。

accumulateの値 内容
replace(デフォルト) 上書き
sum 前回のアニメーション終了位置から続ける
svg
<svg width="600" height="200" viewBox="0, 0, 600, 200" xmlns="http://www.w3.org/2000/svg">
  
  <rect x="20" y="20"  width="40" height="40" fill="#3498db">
    <animate attributeType="XML" attributeName="x" dur="1s" values="0; 100" id="move" begin="0s; move.end" repeatCount="4" accumulate="replace" />
  </rect>

  <rect x="20" y="80"  width="40" height="40" fill="#e74c3c">
    <animate attributeType="XML" attributeName="x" dur="1s" values="0; 100" id="move" begin="0s; move.end" repeatCount="4" accumulate="sum" />
  </rect>
     
</svg>
12
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?