YUIDEA

YUIDEA

MENU

技術

Date: 2016.07.21

Author: osa.

SVGでアニメーション(後編)

制作フローおさらい

  • Illustratorで絵を作る
  • svg形式でファイルを書き出す
  • テキストエディターでSVGファイルに効果を追記する

前々回はIllustratorを使ったSVGファイルを書き出し。
前回は実際にSVGファイルにコードを書き加えて、比較的簡単なアニメーションを解説しました。

今回は、ほんの少しレベルを上げたアニメーションの設定を紹介します。

3.続・テキストエディターでSVGファイルに効果を追記する

序二段編1 animateTransform

序二段編1-1 rotate(回転)

<g id="sippo">
</*pathとか画像を司る要素*/>
<animateTransform attributeType="XML" attributeName="transform" type="rotate" values="0 2421 242;-30 2421 242;0 2421 242" calcMode="linear" dur="0.6s" repeatCount="indefinite" />
</g>

type=”rotate”で回転を指定できます。
valuesに記述する数値は、(角度、支点となるx座標、支点となるy座標)となっており、セミコロン区切りで複数指定できます。角度は正数で時計回り、マイナス数値で反時計回りです。
ここで登場する支点となる座標の数値の調べ方ですが、再びillustratorを使用します。

Illustrator上で該当パスを選択したとき、ウィンドウ上部に9つの四角いマスと、X,Y座標が表示されるウィンドウがあります。9つのマスで色の白い部分が支点となっている位置を示し、横の座標は、その支点のX,Y座標を表しています。今回の場合、パスの右下部分を支点としているので、マスの右下を選択し、座標を調べます。

以上を踏まえて、例では「座標2421,242を支点に、0.6秒の間に、反時計回りに30度往復」する設定になります。
例では往復ですが、1回転させたい場合は、セミコロン区切りをひとつにして、角度を360に設定することで実行できます。

序二段編1-2 scale(拡大縮小)

<g transform="translate(2055,448)"> /*(5)*/
<g> /*(4)*/
<g transform="translate(-2055,-448)"> /*(2)*/
<path id="flash01" /> /*(1)*/
</g>
<animateTransform attributeName="transform" type="scale" keyTimes="0;0.5;1" values="1,1;0.2,0.2;1,1" dur="1.5s" repeatCount="indefinite" /> /*(3)*/
</g>
</g>

type=”scale”で拡大・縮小を指定できます。
ここでも事前にアニメーション対象となるパスの座標を調べておきます。(回転では右下でしたが、拡大縮小ではパスの中心を支点とします)
今回は入れ子が多く若干複雑なので、一番下の階層から順を追っていきます。
まず、画像を描画しているパス類(1)をgタグで囲み、gタグにパスの中心座標をマイナス数値で、translateを仕込みます(2)
次に、translateを仕込んだグループの外にanimateTransformを追記します(3)。typeはscaleで、valuesは拡大縮小の縦横比率を指します。(例では1.5秒間に等倍→0.2倍→等倍の繰返し)
今度は、translateを仕込んだ(2)とanimateTransformタグ(3)をgタグで囲みます(4)
最後に、(4)をgタグ(5)で囲み、こちらにパスの中心座標を、今度は正数でtranslateを仕込み完成です。
注意点としては、gタグに対する座標の仕込みがうまくいっていないと、画像が座標(0,0)地点で動いていたり、拡大縮小の際に画像が移動してしまったりなどといったことが起こります。

序二段編2 animateMotion

animateMotionタグは、パスに沿って移動するアニメーションを実現させるためのタグです。


作例のSVGでは、鳥の飛行軌道がパスで作られています。

<path id="guideline_tori" display="none" fill="none" stroke="#000000" /> /*軌道用パス*/

<g id="tori"> /*鳥本体*/
<g>
</*pathとか画像を司る要素*/>
</g>
<animateMotion dur="20s" repeatCount="indefinite">
<mpath xlink:href="#guideline_tori"></mpath> /*←軌道用パスのID*/
</animateMotion>
</g>

animateMotionタグは、パスで移動を処理するため、values属性は使いません。子要素にmpathタグを記述し、xlink:href属性で軌道用のパスのIDを参照します。
再生時間や、繰返しなどの指定は、今までと一緒です。

注意点としては、SVG保存前に軌道用パスのレイヤーを不可視にすること。

<path id="guideline_tori" display="inline" fill="none" stroke="#000000" />
/*不可視にしないとdisplay="inline"のまま*/

animateMotionで動かすオブジェクトは、あらかじめ座標を(0,0)にしてからSVG保存することの2点です。

おまけ

SVG画像の表示範囲

ここまでに複数のSVG画像を使用していますが、画像の大きさと表示範囲以外は、すべて同じデータを使用しています。
例えば、中編で最初に使用した画像

こちらのsvgタグ内にあるviewBoxの内容を変更します。

<svg width="320px" height="160px" viewBox="2450 420 160 80" >
 ↓
<svg width="320px" height="160px" viewBox="2450 420 320 160" >

すると以下のような画像になります。

これは、width、heightは画像の大きさ、viewBoxの最初の2つの数値は支点となるX座標、Y座標で、後ろ2つは支点から表示される範囲を示します。表示される範囲は、画像の大きさ(width、height)より小さければ拡大して表示され、大きければ縮小されます。
なので、変更前の画像のviewBoxは後ろ二つの数値が(160,80)と、画像の大きさ(320,160)より小さいので、大きさが合わさるように拡大されていることになります。
他の画像も、表示範囲や座標を変更することによって、表示される場所を変えています。

いかがでしたでしょうか。
初めてSVGを触りましたが、CSSやJSとの類似点もいくつかあり、それらの勝手が分かっていれば、イビツながらも何とか形になる・・・といった具合です。
作り終えた後のものを改めて見返してみると、もう少しスマートに出来た部分もあったりして、反省を踏まえつつ次回制作に生かすことができればと。

今回SVGを作成するにあたって、以下のページを参考にしました。

お世話になりました。m(__)m

osa.

アルバイトにてWebサイト制作・管理業務を経て、2006年にシータス&ゼネラルプレスの前身であるゼネラル・プレスに入社。

HTMLコーディング業務を担当し、主にCSR系Webサイトの制作を手がける。

現在はコーディング業務に加え、制作全般のディレクションにも守備範囲を広げているっぽい。