使用动画
掌握所有动画类型和缓动函数
使用动画
学习如何用动画让视频生动起来。
动画类型
淡入淡出动画
让元素淡入和淡出：
{
"animations": [
{ "type": "fadeIn", "duration": 0.5 },
{ "type": "fadeOut", "duration": 0.5, "delay": 4.5 }
]
}| 类型 | 描述 |
|---|---|
fadeIn | 从透明淡入到可见 |
fadeOut | 从可见淡出到透明 |
滑动动画
从某个方向滑入元素：
{
"animations": [
{ "type": "slideIn", "direction": "up", "duration": 0.8 },
{ "type": "slideOut", "direction": "right", "duration": 0.5 }
]
}| 方向 | 效果 |
|---|---|
up | 从底部滑到位置 |
down | 从顶部滑到位置 |
left | 从右侧滑到位置 |
right | 从左侧滑到位置 |
缩放动画
放大和缩小元素：
{
"animations": [
{ "type": "zoomIn", "duration": 0.5 },
{ "type": "zoomOut", "duration": 0.5 }
]
}自定义动画
动画特定属性：
缩放动画
{
"animations": [
{ "type": "scale", "from": 1, "to": 1.2, "duration": 5 }
]
}适合图片的 Ken Burns 效果。
移动动画
{
"animations": [
{ "type": "move", "from": { "x": 0, "y": 0 }, "to": { "x": 100, "y": 50 }, "duration": 3 }
]
}旋转动画
{
"animations": [
{ "type": "rotate", "from": 0, "to": 360, "duration": 2, "loop": true }
]
}缓动函数
控制动画的时间和感觉：
{
"animations": [
{ "type": "zoomIn", "duration": 0.5, "easing": "easeOutBack" }
]
}可用缓动函数
| 缓动 | 描述 | 适用场景 |
|---|---|---|
linear | 恒定速度 | 旋转、连续运动 |
easeInSine | 慢速开始 | 自然减速 |
easeOutSine | 慢速结束 | 自然加速 |
easeInOutSine | 慢速开始和结束 | 平滑过渡 |
easeInQuad | 二次加速 | 建立动量 |
easeOutQuad | 二次减速 | 稳定到位 |
easeInOutQuad | 平滑二次曲线 | 通用 |
easeInCubic | 三次加速 | 强烈蓄力 |
easeOutCubic | 三次减速 | 柔和落地 |
easeInOutCubic | 平滑三次曲线 | 平滑运动 |
easeInBack | 开始前回拉 | 预期效果 |
easeOutBack | 超出后回弹 | 弹性感觉 |
easeInOutBack | 两端回弹 | 俏皮运动 |
easeInElastic | 弹性开始 | 卡通风格 |
easeOutElastic | 弹性结束 | 弹跳落地 |
easeInBounce | 弹跳开始 | 俏皮入场 |
easeOutBounce | 弹跳结束 | 自然物理 |
动画属性
时长
动画持续时间（秒）：
{ "duration": 0.5 }延迟
开始前等待（秒）：
{ "delay": 1.0 }循环
重复动画：
{ "loop": true } // 无限循环
{ "loop": 3 } // 循环 3 次组合动画
多个动画同时运行：
{
"animations": [
{ "type": "fadeIn", "duration": 0.5 },
{ "type": "slideIn", "direction": "up", "duration": 0.8 },
{ "type": "scale", "from": 0.8, "to": 1, "duration": 0.5 }
]
}关键帧动画
精确控制时使用关键帧：
{
"keyframes": [
{
"property": "opacity",
"frames": [
{ "time": 0, "value": 0 },
{ "time": 0.5, "value": 1, "easing": "easeOutCubic" },
{ "time": 4.5, "value": 1 },
{ "time": 5, "value": 0, "easing": "easeInCubic" }
]
}
]
}常用模式
有冲击力的入场
{
"animations": [
{ "type": "zoomIn", "duration": 0.5, "easing": "easeOutBack" },
{ "type": "fadeIn", "duration": 0.3 }
]
}Ken Burns 效果
{
"type": "image",
"animations": [
{ "type": "scale", "from": 1, "to": 1.1, "duration": 5 },
{ "type": "move", "from": { "x": 0, "y": 0 }, "to": { "x": 50, "y": 30 }, "duration": 5 }
]
}交错列表
{
"clips": [
{ "text": "项目 1", "start": 0, "animations": [{ "type": "fadeIn", "duration": 0.3 }] },
{ "text": "项目 2", "start": 0.2, "animations": [{ "type": "fadeIn", "duration": 0.3 }] },
{ "text": "项目 3", "start": 0.4, "animations": [{ "type": "fadeIn", "duration": 0.3 }] }
]
}脉冲效果
{
"animations": [
{ "type": "scale", "from": 1, "to": 1.05, "duration": 0.5, "loop": true, "easing": "easeInOutSine" }
]
}最佳实践
- 保持微妙：动画应该增强而非分散注意力
- 一致的时间：各元素使用相似的时长
- 交错元素：不要同时动画所有内容
- 匹配内容：动画应配合内容氛围
- 性能：移动端限制同时进行的动画数量