第 8 章 DOM 67
9.1 アニメーションの制御
9.1.1 アニメーションの開始
この節では、スクリプトを使ってアニメーションを制御する方法について説明したいと思い ます。
まず最初に、スクリプトでアニメーションを開始させる方法を紹介しましょう。
アニメーション要素の要素オブジェクトは、beginElementというメソッドを持っています。
このメソッドを呼び出すことによって（引数は不要です）、アニメーションを開始させることがで きます。ただし、このメソッドでアニメーションを開始させるためには、あらかじめ、アニメー
9.1. アニメーションの制御 79 ション要素が持っているbeginという属性に、indefiniteという属性値を設定しておく必要が あります。
たとえば、次のSVG文書は、円をクリックすることによって、長方形の高さを変化させるア ニメーションを開始させることができます。
SVG文書の例 begin.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">
<svg width="320pt" height="224pt" viewBox="0 0 100 70"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="80" height="40" fill="violet">
<animate id="animate" begin="indefinite"
attributeName="height" from="0" to="40" dur="5s"
repeatCount="1" fill="freeze"/>
</rect>
<g fill="darkorchid" onclick="begin()">
<circle cx="30" cy="60" r="5"/>
<text x="40" y="64" font-size="12">begin</text>
</g>
<script type="text/ecmascript"><![CDATA[
var animateobj = document.getElementById("animate");
function begin() {
animateobj.beginElement();
]]></script>}
</svg>
9.1.2 アニメーションの終了
次に、スクリプトでアニメーションを終了させる方法を紹介しましょう。
アニメーション要素の要素オブジェクトは、endElementというメソッドを持っています。こ のメソッドを呼び出すことによって（引数は不要です）、アニメーションを終了させることがで きます。ただし、このメソッドでアニメーションを終了させるためには、あらかじめ、アニメー ション要素が持っているendという属性に、indefiniteという属性値を設定しておく必要があ ります。
デフォルトでは、アニメーションの動作中にbeginElementが呼び出されると、その時点でア ニメーションは最初の状態に戻って繰り返されます。
しかし、アニメーション要素が持っているrestartという属性に、whenNotActiveという属 性値を設定しておくことによって、アニメーションの動作中にbeginElementが呼び出されたと しても、それを無視してアニメーションを続行させることができます。
たとえば、次のSVG文書は、円をクリックすることによって、パスに沿って座標系を移動さ せるアニメーションを、開始させたり終了させたりすることができます。
SVG文書の例 end.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">
<svg width="320pt" height="224pt" viewBox="0 0 100 70"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="path1"
d="M0,0 a25,25 0 1,1 0,50 l-30,0 a25,25 0 1,1 0,-50 z"/>
</defs>
<circle cx="65" cy="10" r="5" fill="limegreen">
<animateMotion id="animoti" dur="10s" begin="indefinite"
end="indefinite" repeatCount="indefinite"
restart="whenNotActive">
<mpath xlink:href="#path1"/>
</animateMotion>
</circle>
80 第9章 スクリプトとアニメーション
<g font-size="12" font-family="serif">
<g fill="deepskyblue" onclick="begin()">
<circle cx="35" cy="25" r="5"/>
<text x="45" y="28">begin</text>
</g>
<g fill="orangered" onclick="end()">
<circle cx="35" cy="45" r="5"/>
<text x="45" y="48">end</text>
</g>
</g>
<script type="text/ecmascript"><![CDATA[
var animotiobj = document.getElementById("animoti");
function begin() {
animotiobj.beginElement();
}
function end() {
animotiobj.endElement();
]]></script>}
</svg>
9.1.3 アニメーションイベント属性
アニメーション要素は、「アニメーションイベント属性」(animation event attribute)と呼ば れるいくつかの属性を持っています。それらの属性にスクリプトを設定しておくと、そのスクリ プトは、アニメーションに関連するイベントが発生したときに実行されます。
アニメーションイベント属性としては、次のようなものがあります。
onbegin アニメーションが始まった。
onend アニメーションが終了した。
onrepeat アニメーションの繰り返しが始まった。
たとえば、次のSVG文書は、アニメーションの繰り返しが始まるたびに、数字を1ずつ大き くしていきます。
SVG文書の例 onrepeat.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">
<svg width="320pt" height="224pt" viewBox="0 0 100 70"
xmlns="http://www.w3.org/2000/svg">
<line x1="50" y1="40" x2="50" y2="5" stroke-width="2"
stroke="cornflowerblue">
<animateTransform attributeName="transform" type="rotate"
from="0,50,35" to="360,50,35" dur="1s"
repeatCount="indefinite" onrepeat="countup()"/>
</line>
<text id="times" x="10" y="30" font-size="24"
font-family="serif" fill="olive">0</text>
<script type="text/ecmascript"><![CDATA[
var count = 0;
var timesobj =
document.getElementById("times").firstChild;
function countup() {
timesobj.data = ++count;
]]></script>}
</svg>