アニメーション 50 - SVG revision revision01 Copyright c Daikoku Manabu This tutorial is licen

5.1 アニメーションの基礎

5.1.1 アニメーションの基礎の基礎

時間の経過とともに変化するグラフィックスは、「アニメーション」(animation)と呼ばれます。

SVGは、アニメーションを作る機能を持っています。SVGでアニメーションを作る方法としては、そのための要素を書く方法と、「スクリプト」と呼ばれるものを書く方法とがあります。

この章では、SVGでアニメーションを作るための方法のうちで、そのための要素を利用するものについて説明したいと思います。

5.1.2 アニメーション要素

SVGで定義されている、アニメーションを作るための要素は、「アニメーション要素」(animation element)と呼ばれます。

アニメーション要素には、次の五つのものがあります。

animate 要素の属性を変化させる。

animateColor グラフィックスの色を変化させる。

animateTransform 座標系を変化させる。

animateMotion パスに沿って座標系を移動させる。

set 指定された時間だけ属性に値を設定する。

5.1.3 アニメーション要素の属性

アニメーション要素は、アニメーションを作るための属性として、次のようなものを持っています。

xlink:href アニメーションが変化させる対象となる要素。この属性に対して属性値が設

定されていない場合は、アニメーション要素の親になっている要素が変化の対象となる。

attributeName 変化の対象となる属性の名前。animateMotion要素を使う場合は不要。

from 開始値(starting value)、すなわち、アニメーションが開始される時点での属

性値。

to 終了値(ending value)、すなわち、アニメーションが終了する時点での属性値。

dur 持続時間(duration)、すなわち、アニメーションが開始されてから終了する

までの時間。数値の右側に時間の単位を書いたものを設定する。時間の単位は、時間(h)、分(min)、秒(s)、ミリ秒(ms)のいずれか。

repeatCount 繰り返しの回数。無限に繰り返したい場合はindefiniteを設定する。

fill アニメーションが終了したのち、属性値をどうするか。アニメーションによって設定された属性値のままで凍結させたい場合はfreezeを設定して、それを破棄して本来の属性値に戻したい場合はremoveを設定する。

5.2 属性のアニメーション

5.2.1 属性値を変化させる要素

animateというアニメーション要素は、要素の属性を変化させることによってアニメーション

を作ります。

次のSVG文書の中のanimate要素は、円を描画するcircle要素が持っているcxという属性を変化させることによって、円を左から右へ移動させるアニメーションを作ります。

SVG文書の例 attricx.svg

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg">

5.2. 属性のアニメーション 51

<animate attributeName="cx" from="15" to="85"

dur="10s" repeatCount="3" fill="freeze"/>

</circle>

</svg>

同じように、次のSVG文書の中のanimate要素は、長方形を描画するrect要素が持ってい

るopacityという属性を変化させることによって、不透明度のアニメーションを作ります。

SVG文書の例 attrio.svg

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg">

<animate attributeName="opacity" from="1" to="0"

dur="10s" repeatCount="indefinite"/>

</rect>

</svg>

5.2.2 複数の属性のアニメーション

ひとつの要素の子供としてはひとつのアニメーション要素しか書くことができない、という制約は存在しません。ですから、ひとつの要素の子供として複数のanimate要素を書くことによって、ひとつの要素の複数の属性を同時に変化させるアニメーションを作るということも可能です。

次のSVG文書は、rect要素の子供として書かれている二つのanimate要素によって、長方形の横の長さと縦の長さが同時に変化します。

SVG文書の例 attriwh.svg

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg">

<animate attributeName="width" from="10" to="80"

dur="10s" repeatCount="indefinite"/>

<animate attributeName="height" from="50" to="10"

dur="10s" repeatCount="indefinite"/>

</rect>

</svg>

5.2.3 色の変化

fillやstrokeのような、色が設定される属性を変化させるアニメーションを作りたいときは、

animate要素ではなくてanimateColorというアニメーション要素を使います。この要素の使い

方は、animate要素の使い方と同じです。

次のSVG文書の中のanimateColor要素は、楕円を描画するellipse要素が持っているfill という属性を変化させることによって、楕円の色を空色から黄緑へ変化させるアニメーションを作ります。

SVG文書の例 attrif.svg

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg">

<animateColor attributeName="fill"

from="skyblue" to="yellowgreen"

dur="5s" repeatCount="indefinite"/>

</ellipse>

52 第5章アニメーション

</svg>

5.3 座標系の変換のアニメーション

5.3.1 座標系を変化させる要素

animateTransformというアニメーション要素は、座標系を変化させることによってアニメー

ションを作ります。

animateTransform要素が持っているattributeName属性には、transformという属性の名

前を設定します。

animateTransform要素は、typeという属性を持っています。この属性には、座標系の変化

のタイプをあらわす名前を設定します。設定することのできる変化のタイプは、次の五つです。

translate 移動

scale 拡大

rotate 回転

skewX x軸に沿った剪断

skewY y軸に沿った剪断

アニメーションの開始値と終了値は、ほかのアニメーション要素と同じように、from属性とto 属性に設定します。

5.3.2 移動のアニメーション

animateTransform要素を使って移動のアニメーションを作る場合、from属性とto属性には、

それぞれ、

x, y

という形式の属性値を設定します。xはx軸方向への移動距離で、yはy軸方向への移動距離です。

SVG文書の例 animtra.svg

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg">

<animateTransform attributeName="transform"

type="translate" from="0, 0" to="100, 70"

dur="5s" repeatCount="indefinite"/>

</g>

</svg>

5.3.3 拡大のアニメーション

animateTransform要素を使って拡大のアニメーションを作る場合、from属性とto属性には、

それぞれ、

x, y

という形式の属性値を設定します。xはx軸方向の拡大率で、yはy軸方向の拡大率です（コンマとyを省略してxだけを書いた場合、y軸方向の拡大率はx軸方向と同じだと解釈されます）。

SVG文書の例 animsca.svg

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg">

5.3. 座標系の変換のアニメーション 53

<text x="-40" y="0" font-size="10" font-family="serif"

fill="darkgreen">

animateTransform

<animateTransform attributeName="transform"

type="scale" from="1" to="20"

dur="10s" repeatCount="indefinite"/>

</text>

</g>

</svg>

5.3.4 回転のアニメーション

animateTransform要素を使って回転のアニメーションを作る場合、from属性とto属性には、

それぞれ、

θ, x, y

という形式の属性値を設定します。θは回転の角度で、xとyは回転の中心の座標です。

SVG文書の例 animrot.svg

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg">

<g>

</g>

<text x="55" y="45" font-size="14" font-family="serif"

fill="cadetblue">

rotate

</text>

<animateTransform attributeName="transform"

type="rotate" from="0, 50, 35" to="360, 50, 35"

dur="5s" repeatCount="indefinite"/>

</g>

</svg>

5.3.5 剪断のアニメーション

animateTransform要素を使って剪断のアニメーションを作る場合、from属性とto属性には、

それぞれ、剪断の角度を設定します。

SVG文書の例 animske.svg

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

</symbol>

<animateTransform attributeName="transform"

type="skewX" from="0" to="70"

dur="5s" repeatCount="indefinite"/>

</use>

<animateTransform attributeName="transform"

type="skewY" from="0" to="70"

dur="5s" repeatCount="indefinite"/>

</use>

54 第5章アニメーション

</svg>

5.4 パスに沿った移動のアニメーション

5.4.1 パスに沿ってグラフィックスを移動させる要素

animateMotionというアニメーション要素は、パスに沿って座標系を移動させることによって

アニメーションを作ります。

animateMotion要素が持っているattributeName属性には、属性値を何も設定する必要はあ

りません。

座標系がそれに沿って移動するパスを指定する方法は、二つあります。

ひとつは、animateMotion要素が持っているpathという属性に対してパスデータを設定するという方法です。そしてもうひとつは、path要素に名前を付けておいて、それを名前で参照するという方法です。

path要素を名前で参照したいときは、まず、path要素が持っているidという属性に名前を設定することによって、それに名前を与えます。そのとき、path要素をdefsという要素型の要素の子供にしておくと、パスを描画しないでpath要素に名前を与えることができます。

path要素を名前で参照したいときは、animateMotion要素の子供としてmpathという要素型の要素を書きます。mpath要素のタグの中には、

というように、path要素を参照するURIをxlink:href属性に設定する属性指定を書きます。

SVG文書の例 animoti.svg

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>

<path id="path1"

d="M65,10 a25,25 0 1,1 0,50 l-30,0 a25,25 0 1,1 0,-50 z"/>

</defs>

<use xlink:href="#path1"

stroke-width="0.3" stroke="blue" fill="none"/>

</animateMotion>

</rect>

</svg>

5.4.2 パスの向きに応じた角度の変化

animateMotion要素は、rotateという属性を持っています。これは、グラフィックスを回転

させる角度を設定する属性なのですが、この属性にautoという属性値を設定すると、グラフィックスの角度が、パスの向きに応じて自動的に変化するようになります。

SVG文書の例 autoro.svg

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>

<path id="path1"

d="M65,10 a25,25 0 1,1 0,50 l-30,0 a25,25 0 1,1 0,-50 z"/>

ドキュメント内 SVG revision revision01 Copyright c Daikoku Manabu This tutorial is licen (ページ 50-55)