动画

Anime 是一个透过 anime 标签播放以图层为基础的动画功能。

Anime 档案

Anime 档案是一种文字档，用来描述图层转换的序列。

序列

若要让讯息视窗在一秒内向右移动 100px，请在 anime 档案中写入以下序列。

# 一个区块描述一段动画序列。
# 区块名称可以随意命名，不会影响任何事。
move {
    # 这是图层指定子。
    layer: msg;

    # 这些是时间指定子。（单位：秒）
    start: 0.0;
    end: 1.0;

    # 这些是起始位置指定子。`r0` 代表相对位置 0。
    from-x: r0;
    from-y: r0;

    # 这是起始 alpha 指定子。
    from-a: 255;

    # 这些是结束位置指定子。`r100` 代表相对位置 100。
    to-x: r100;
    to-y: r0;

    # 这是结束 alpha 指定子。
    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;
}