いよいよロケットを打ち上げる時が来ました。
今回は SVG.js の animate() を使ってアニメーションを実現しました。実行結果とコードはこちらをご覧ください。下記はその animate() を呼び出している部分です。
//<rect x="0" y="0" width="598" height="428"
// fill="#000000" stroke="none"/>
var sky = draw.rect(width, height).fill('#ffffff').stroke('none')
sky.animate({duration: 2000}).fill('#000000');
sky.animate({delay: 1000, duration: 2000}).fill('#ffffff');
//<use xlink:href="#stars" x="0" y="0"/>
var use1 = draw.use(stars).move(0, 0);
use1.animate({duration: 2000}).move(0, height);
use1.animate({delay: 1000, duration: 2000}).move(0, 0);
var use2 = draw.use(stars).move(0, -height);
use2.animate({duration: 2000}).move(0, 0);
use2.animate({delay: 1000, duration: 2000}).move(0, -height);
//<use xlink:href="#rocket" x="?" y="?"/>
var use3 = draw.use(rocket).move(x, y);
use3.animate({duration: 2000}).move(x, y / 2);
use3.animate({delay: 1000, duration: 2000}).move(x, y);
生成される SVG のコードは下記のような静止画になります。
<rect width="598" height="428" fill="#ffffff" stroke="none"/>
<use xlink:href="#stars" x="0" y="0"/>
<use xlink:href="#stars" x="0" y="-428"/>
<use xlink:href="#rocket" x="207" y="155"/>
2015年に書いた SVG のコードでは、SVG のコードの中で animate 要素によってアニメーションを実現していました。下記の #g1 が上記の #stars、#g2 が #rocket に相当します。
<rect x="0" y="0" width="598" height="428"
fill="#ffffff" stroke="none">
<animate attributeName="fill" attibuteType="CSS" begin="0s"
dur="1.5s" from="#ffffff" to="#000066" />
<animate attributeName="fill" attibuteType="CSS" begin="1.5s"
dur="1.5s" from="#000066" to="#000000" />
<animate attributeName="fill" attibuteType="CSS" begin="3s"
dur="9s" from="#000000" to="#000000" />
<animate attributeName="fill" attibuteType="CSS" begin="12s"
dur="1.5s" from="#000000" to="#000066" />
<animate attributeName="fill" attibuteType="CSS" begin="13.5s"
dur="1.5s" from="#000066" to="#ffffff" />
</rect>
<use x="-598" y="-428" xlink:href="#g1">
<animate attributeName="y" begin="0s"
dur="3s" from="-428" to="0" />
<animate attributeName="y" begin="3s"
dur="9s" from="0" to="0" />
<animate attributeName="y" begin="12s"
dur="3s" from="0" to="-428" />
<animate attributeName="x" begin="6s"
dur="3s" from="-598" to="0" />
</use>
<use x="0" y="-428" xlink:href="#g1">
<animate attributeName="y" begin="0s"
dur="3s" from="-428" to="0" />
<animate attributeName="y" begin="3s"
dur="9s" from="0" to="0" />
<animate attributeName="y" begin="12s"
dur="3s" from="0" to="-428" />
<animate attributeName="x" begin="6s"
dur="3s" from="0" to="598" />
</use>
<use x="0" y="0" xlink:href="#g1">
<animate attributeName="y" begin="0s"
dur="3s" from="0" to="428" />
<animate attributeName="y" begin="3s"
dur="9s" from="428" to="428" />
<animate attributeName="y" begin="12s"
dur="3s" from="428" to="0" />
<animate attributeName="x" begin="6s"
dur="3s" from="0" to="598" />
</use>
<use x="208" y="154" xlink:href="#g2">
<animate attributeName="y" begin="0s"
dur="3s" from="154" to="78" />
<animate attributeName="y" begin="3s"
dur="9s" from="78" to="78" />
<animate attributeName="y" begin="12s"
dur="3s" from="78" to="154" />
<animateTransform attributeName="transform" begin="3s"
dur="3s" type="rotate" from="0 300 214" to="-90 300 214" />
<animateTransform attributeName="transform" begin="6s"
dur="3s" type="rotate" from="-90 300 214" to="-90 300 214" />
<animateTransform attributeName="transform" begin="9s"
dur="3s" type="rotate" from="-90 300 214" to="0 300 214" />
</use>
のんきさんの年月記 
“” への1件の返信