1. 为什么要编写自定义动画
很多时候需要覆盖引擎自带的默认动画，或者实现诸如 CG 平移预览等特定效果，此时只能编写新的动画。
2. 自定义动画的关键字
WebGal 提供了自定义动画的关键字，设置好每个关键帧的动画效果即可按线性播放。以下关键字参考官方文档：
| 属性名 | 释义 |
|---|---|
| alpha | 透明度，范围 0-1 |
| scale | 缩放 |
| position | 位置偏移 |
| rotation | 旋转角度，单位为弧度 |
| blur | 高斯模糊半径 |
| brightness | 调节亮度 |
| contrast | 调节对比度 |
| saturation | 调节饱和度 |
| gamma | 调节伽马值 |
| colorRed | 颜色分量：红色，范围 0-255 |
| colorGreen | 颜色分量：绿色，范围 0-255 |
| colorBlue | 颜色分量：蓝色，范围 0-255 |
| duration | 时间片持续时间，单位为毫秒 (ms) |
| oldFilm | 老电影效果，0 关闭，1 开启 |
| dotFilm | 点状电影效果，0 关闭，1 开启 |
| reflectionFilm | 反射电影效果，0 关闭，1 开启 |
| glitchFilm | 故障电影效果，0 关闭，1 开启 |
| rgbFilm | RGB 电影效果，0 关闭，1 开启 |
| godrayFilm | 光辉效果，0 关闭，1 开启 |
此外，每个关键帧尾部需包含 duration 关键字控制该阶段持续时间。例如一个简单的亮度变化动画：
[
{ "brightness": 1.0, "duration": 0 },
{ "brightness": 0.4, "duration": 600 }
]
注意：末状态不会随动画结束自动返回初始状态，如需恢复需额外编写动画。
其中，position 和 rotation 拥有子控件 x 和 y，分别对应 x 轴和 y 轴效果：
[
{
"scale": { "x": 1, : },
: { : -, : },
:
},
{
: { : , : },
: { : , : },
:
}
]
