プログラミング講座(185) Anime 配列の設計

アニメーションエディタ Anime の開発が少しだけ捗（はかど）りました。以前 SVG で作ったアニメーションで以下のようなコードを使いました。

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

これはロケットの動きを記述したものです。これを Small Basic の配列で表してみました。こんな感じです。 

    anime[1] = "func=load;name=Stars1;x=0;y=0;path=stars.png;"
    anime[2] = "func=move;name=Stars1;x=0;y=428;at=0s;dur=3s;"
    anime[3] = "func=move;name=Stars1;x=-598;y=0;at=3s;"
    anime[4] = "func=move;name=Stars1;x=0;y=0;at=6s;dur=3s;"
    anime[5] = "func=move;name=Stars1;x=0;y=-428;at=12s;dur=3s;"
    anime[6] = "func=load;name=Stars2;x=0;y=-428;path=stars.png;"
    anime[7] = "func=move;name=Stars2;x=0;y=0;at=0s;dur=3s;"
    anime[8] = "func=move;name=Stars2;x=598;y=0;at=6s;dur=3s;"
    anime[9] = "func=move;name=Stars2;x=0;y=428;at=9s;"
    anime[10] = "func=move;name=Stars2;x=0;y=0;at=12s;dur=3s;"
    anime[11] = "func=load;name=Rocket;x=208;y=154;path=Rocket.sb;"
    anime[12] = "func=move;name=Rocket;x=208;y=10;at=0s;dur=3s;"
    anime[13] = "func=rotate;name=Rocket;angle=-90;at=3s;dur=3s;"
    anime[14] = "func=rotate;name=Rocket;angle=0;at=9s;dur=3s;"
    anime[15] = "func=move;name=Rocket;x=208;y=154;at=12s;dur=3s;"

11から15行目が同じくロケットの動きを表しています。プログラム全体は QXF519 として発行しました。このプログラムを実行する前に、まず File オブジェクトのコメントのマークを削除し、さらにプログラムと同じフォルダに、ロケットの図形 RQB683-6 と星空のイメージ stars.png を置いておきます。これらのファイルは GitHub にも公開しています。

今回はアニメーションの内部表現について書き進めることができました。アニメーションエディタ Anime は、この内部構造に加えどういった UI（ユーザインタフェース）にするかということを決めていくことで形ができていくと思います。できるだけ簡単で直感的な UI にしたいと思います。

関連項目

• プログラミング講座(168) アニメ
• プログラミング講座(165) SVG ビューアー
• プログラミング講座 目次