アニメ

アニメは、animeタグを使ってレイヤーベースのアニメーションを再生する機能です。

アニメファイル

アニメファイルは、レイヤー変換のシーケンスを記述するテキストファイルです。

シーケンス

メッセージボックスを1秒で右へ100px移動するには、アニメファイルに次のシーケンスを記述します。

# ブロックはアニメーションのシーケンスを表します。
# ブロック名は任意で、動作には影響しません。
move {
    # レイヤー指定子です。
    layer: msg;

    # 時刻指定子です。（秒単位）
    start: 0.0;
    end: 1.0;

    # 開始位置指定子です。'r0' は相対値 '0' を意味します。
    from-x: r0;
    from-y: r0;

    # 開始アルファ指定子です。
    from-a: 255;

    # 終了位置指定子です。'r100' は相対値 '100' を意味します。
    to-x: r100;
    to-y: r0;

    # 終了アルファ指定子です。
    to-a: 255;
}

レイヤー構造

次に示すのは、下から上への順に並べたレイヤー構造です。

拡大縮小と回転

# `effect1` レイヤーを3秒で2.0倍に拡大し、360度回転します。
test1 {
    layer: effect1;
 
    start: 0.0;
    end: 3.0;

    from-x: 0;
    from-y: 400;
    from-a: 255;

    to-x: 0;
    to-y: 400;
    to-a: 255;

    # 拡大縮小と回転の原点
    center-x: 600;
    center-y: 100;

    # 拡大縮小率
    from-scale-x: 1.0;
    from-scale-y: 1.0;
    to-scale-x: 2.0;
    to-scale-y: 2.0;
 
    # 回転（+ は右、- は左）
    from-rotate: 0.0;
    to-rotate: -360;
}

# 逆方向。
test2 {
    layer: effect1;

    start: 3.0;
    end: 6.0;

    from-x: 0;
    from-y: 400;
    from-a: 255;

    to-x: 0;
    to-y: 400;
    to-a: 255;

    center-x: 600;
    center-y: 100;

    from-scale-x: 2.0;
    to-scale-x: 1.0;

    from-scale-y: 2.0;
    to-scale-y: 1.0;

    from-rotate: -360;
    to-rotate: 0;
}