ロケットの打(う)ち上(あ)げ

JavaScript のプログラムから SVG の画像がぞうを動うごかす準備じゅんびが整ととのったので、今回こんかいは、いよいよアニメーションを実現じつげんします。

2015年ねんに書かいた SVG のコードではロケットを動うごかすために、下記かきの要領ようりょうで SVG の animateアニメイト 要素ようそを使つかいました。

<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>

今回こんかいは SVG.js の animate() を使つかって以下いかのようなコードを書かきました。

//<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 のコード自体じたいは下記かきのように静止画せいしがになります。

<use xlink:href="#rocket" x="207" y="155"/>

詳細しょうさいについてはブログ「JavaScript (53) ロケット打うち上あげ」をご覧らんください。