YUIDEA

YUIDEA

MENU

技術

Date: 2016.06.24

Author: osa.

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

制作フローおさらい

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

前回「SVGでアニメーション(前編)」はIllustratorを使って画像の編集を行い、SVGファイルを書き出しました。
今回からはテキストエディタを使用して、SVGファイル内を加筆・修正して、効果を加えていきます。

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

Illustratorで制作したSVGファイルをテキストエディターで開きます。
(メモ帳でもDreamweaverでも、開けるものなら何でもOK)
中身はHTMLのようなタグ形式で、プロパティにはたくさんの数字が羅列していたりするものが見て取れると思います。
この中に、アニメーション用タグを追記していきます。

SVGのアニメーションには

  • animate
  • animateTransform
  • animateMotion

の、3つのタグを主に使用します。
これらのタグを、効果をつけたい要素の子要素として仕込み、プロパティを指定して動きをつけていきます。

今回のコラムでは(独断と偏見による)序の口編として、アニメーションのすべての基本となるanimateタグと、animateTransformタグの中では比較的分かりやすい移動(translate)プロパティに関して解説します。

序の口編1 animateタグ

animateタグはもっとも基本的なタグです。

<g id="light">
</*pathとか画像を司る要素*/>
<animate attributeType="XML" attributeName="opacity" values="0;1" dur="4s" calcMode="discrete" repeatCount="indefinite" />
</g>

pathタグやgタグ(グループタグ)等の中にanimateタグを仕込むことで、アニメーション効果をつけます。上の例ではid=”light”がついたgタグの中にanimateタグを入れています。
animateタグ内で指定しているプロパティは以下になります。

attributeType アニメーション対象の属性の種類。XMLかCSS、またはautoを指定します。
attributeName アニメーション対象の属性名です。xやyといった座標や、width、heightなどの大きさ、色を示すfillといったものから、transformやopacityなど、作用させたい属性を指定します。
values アニメーションの属性値をセミコロン(;)区切りで指定します。
dur アニメーションが1ループする時間です。「hh:mm:ss」またはh(時間)、min(分)、s(秒)、ms(ミリ秒)の単位で指定します。
calcMode アニメーション属性値の変化の指定です。discrete(次の値に一気に変化)や、linear(次の値に徐々に変化)などを指定します。
repeatCount アニメーションの繰返し回数です。0以上の数字かindefinite(ずっと繰返し)を指定します。

これを元に、animateタグで指定している効果を紐解くと、
「(attributeType)XMLの、(attributeName)opacity属性を、(values)透明から不透明に、(calcMode)一気に切り替わる効果を、(dur)1ループ4秒として、(repeatCount)ずっと繰り返す」
ということになります。

序の口編2 animateTransformタグ

animateタグとほぼ一緒ですが、animateタグでは指定できないtransform属性を使用する際など、移動、拡大縮小、回転などの場合にこちらを使います。
この項で出てくる新しい要素は以下の2つです。

type 変形の種類を指定します。translate(移動)、rotate(回転)、scale(拡大縮小)などから指定。
keyTimes アニメーションの変化が起こるタイミングを指定します。通常はvaluesと一緒に使用し、開始点(0)から終了(1)までの割合で表し、値はセミコロン(;)で区切ります。keyTimesを省略した場合は、valuesで区切った数の割合分が再生時間に均等に割り振られます。

序の口編2-1 translate(移動)その1

<g id="kumo">
</*pathとか画像を司る要素*/>
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0;2463 0" calcMode="linear" dur="60s" repeatCount="indefinite" />
</g>

上記でのvaluesの書き方は(x軸 y軸)での増加量を示しており、(0,0)は初期位置を表し、+x:右、-x:左、+y:下、-y:上に対応しています。例では開始点が0,0、終点が2463,0なので、「初期位置から右へ2463px移動させる」という意味になります。
これにcalcModeがlinear(徐々に変化)、時間が60秒なので、「60秒かけて初期位置から右へ2463px、徐々に移動させる」という動きになります。

序の口編2-2 translate(移動)その2

<g id="soketto">
</*pathとか画像を司る要素*/>
<animateTransform attributeType="xml" attributeName="transform" type="translate" dur="4s" values="0 0;0 0;0 -10;0 0;0 -5;0 0;0 0" keyTimes="0;0.5;0.51;0.52;0.53;0.54;1" repeatCount="indefinite" />
</g>

こちらはkeyTimesが0と1の間に5つ数字が区切られていて、計7つのポイントが設定されています。ここで設定される数字は再生時間に対する割合の位置を指します。例では4秒の時間中で2つ目のポイントが0.5なので、半分の位置の2秒目にポイントが設定されていることになります。
さらにkeyTimesの数とvaluesの数は合わせる必要があります。例では、keyTimesの3つ目(0.51)と5つ目(0.53)のポイントで、それぞれ上方向に10pxと5px動き、それ以外のポイントでは初期位置という設定です。

また、序の口編1に解説したid=”light”の内容を合わせて、再生開始から2秒後に、点灯と同時に電球が飛び上がるといった動きになっています。

序の口編2-3 translate(移動)その3

<g id="fukidashi">
</*pathとか画像を司る要素*/>
<animateTransform attributeType="xml" attributeName="transform" type="translate" additive="sum" values="0 0;0 2;0 0" calcMode="linear" dur="0.8s" repeatCount="indefinite" />
<animateTransform attributeType="xml" attributeName="transform" type="translate" additive="sum" values="0 0;2 0;0 0" calcMode="linear" dur="1.3s" repeatCount="indefinite" />
</g>

上記例はそれぞれ縦方向、横方向に小刻みに動くだけですが、それぞれの再生時間の長さを変えることで、動きの不規則性を再現しています。
また、通常はtransform効果を1つしか定義できませんが、複数定義する場合はadditive=”sum”のプロパティを設定します。

ここまで解説してきた中で、「属性」「数値」「再生時間」のプロパティが、アニメーションを司る基礎として存在している事が分かると思います。
大雑把に言ってしまえば、この3つさえ抑えておけば、あとは少々の風味付けで大抵何とかなります。

次回は少々難易度をUPして、今回より面倒な設定が増えるanimateTransformの回転(rotate)と拡大縮小(scale)、animateMotionを解説します。

osa.

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

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

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