Animation

画像に動きを加える。

書き方

要素に変化を加える。

<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="20s" repeatCount="indefinite"/>

<set />

<animateMotion />

<mpath />

attributeType="CSS | XML | auto"

attributeName="属性名"

additive=""

accumulate=""

calcMode="discrete | linear | paced | spline" linear

values=""

keyTimes=""

keySplines=""

from="開始値"

to="終了値"

by=""

dur=""

begin=""

end=""

restart="always | never | whenNotActive" always

repeatCount=""

repeatDur=""

fill="remove | freeze" remove

使用例

OBJECT:

EMBED:

<text x="122" y="52" style="font-family:Verdana; font-size:20pt; fill:blue">
Jungle Life
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="20s" repeatCount="indefinite" />
</text>
<text x="120" y="50" style="font-family:Verdana; font-size:20pt; fill:red">
Jungle Life
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="10s" repeatCount="indefinite" />
</text>
<path id="path2" style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 264,182.5 A 90.5,90.5 0 1 1 83,182.5 A 90.5,90.5 0 1 1 264,182.5 z"/>
<path id="path3" style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:red;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 300 200 C 300 100 100 100 100 200 C 100 300 300 300 300 200"/>
<circle cx="0" cy="0" r="5" style="fill:none; stroke:red; stroke-width:2">
<animateMotion dur="10s" repeatCount="indefinite">
<mpath xlink:href="#path2" />
</animateMotion>
</circle>
<text x="10" y="0" style="font-family:Verdana; font-size:10pt; fill:blue" >
(^o^)/
<animateMotion dur="20s" rotate="auto" repeatCount="indefinite">
<mpath xlink:href="#path2" />
</animateMotion>
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
</text>
<text x="0" y="0" style="font-family:Verdana; font-size:14pt; fill:green">
Life
<animateMotion dur="40s" rotate="auto-reverse" repeatCount="indefinite">
<mpath xlink:href="#path3" />
</animateMotion>
</text>