AMLS 多属性同步动画:同时驱动位置缩放旋转
单一属性 vs 多属性动画
给单个属性加关键帧,效果是:
- 位置动画 → 平移
- 缩放动画 → 放大缩小
- 旋转动画 → 自转
但实际创作中,几乎所有"看起来高级"的动效都是多属性同时变化的组合:
- 入场动画 = 从屏幕外 移入(位置)+ 放大(缩放)+ 从透明变清晰(不透明度)
- 出场动画 = 旋转(旋转)+ 缩小(缩放)+ 淡出(不透明度)
- 强调效果 = 弹一下(缩放)+ 颜色变亮(颜色)+ 发光(特效)
这一章专门讲如何同时给多个属性加关键帧,以及如何让它们时间对齐。
方法一:逐个属性加关键帧
最直观的方式——按顺序给每个属性加关键帧:
- 把播放头移到动画起点时间(比如 0 秒)
- 给位置属性加关键帧,值为起始位置
- 给缩放属性加关键帧,值为起始大小(比如 0%)
- 给不透明度属性加关键帧,值为 0%
- 把播放头移到动画终点时间(比如 1 秒)
- 依次修改三个属性的数值 → AMLS 自动在终点生成关键帧
- 播放预览 → 三个属性的动画同时进行
方法二:关键帧视图批量对齐
在关键帧视图里可以更清晰地管理多个属性的时间对齐:
- 切换到目标图层的关键帧视图
- 你会看到每个可动画属性在时间轴上各占一行
- 拖动时间轴定位起点 → 在每个属性行上添加关键帧
- 拖动时间轴定位终点 → 在每个属性行上添加关键帧
- 可以直接拖动关键帧的垂直位置来对齐不同属性的关键帧时间
关键帧视图的好处是直观看到所有属性的时间分布——如果某个属性的动画比其他属性短了 0.2 秒,一眼就能看出来。
组合动效模板
下面是几个高频使用的多属性组合,直接套用就能做:
入场:放大+淡入+位移
| 时间 | 位置 X | 缩放 | 不透明度 |
|---|---|---|---|
| 0s | -300 | 0% | 0% |
| 0.5s | 0 | 120% | 100% |
| 1s | 0 | 100% | 100% |
效果:从左侧快速滑入 → 稍微放大过头 → 回弹到正常大小(最后两个关键帧用 Bounce 缓动)
强调:弹性缩放
| 时间 | 缩放 |
|---|---|
| 0s | 100% |
| 0.15s | 130% |
| 0.3s | 90% |
| 0.45s | 105% |
| 0.6s | 100% |
效果:物体弹一下恢复——常用于点击反馈、强调某个元素
转场:旋转缩小淡出
| 时间 | 旋转 | 缩放 | 不透明度 |
|---|---|---|---|
| 0s | 0° | 100% | 100% |
| 1s | 360° | 0% | 0% |
效果:原地转一圈同时缩小消失
时间对齐的两个技巧
技巧一:关键帧复制批量对齐
在关键帧视图里,选中某个属性的一组关键帧 → 复制 → 选中另一个属性 → 粘贴。这样两个属性的关键帧时间点完全一致,只需要调整数值不同即可。
技巧二:标记对齐
在时间轴上添加时间标记——在时间刻度上长按可以添加红色标记。标记本身不参与渲染,但可以作为视觉参考点,让不同属性的关键帧精确对齐到同一时刻。
什么时候用哪种方法
| 场景 | 推荐方法 |
|---|---|
| 刚开始学,属性不多 | 逐个属性加关键帧 |
| 关键帧超过 10 个,需要精细对齐 | 关键帧视图批量对齐 |
| 需要让不同属性的动画有时间差(比如先放大后淡入) | 关键帧视图里错开关键帧位置 |
进阶:错峰动画
不一定所有属性都要同时开始和结束。错开一些时间反而更自然:
- 位置动画 0s~1s
- 缩放动画 0.2s~0.8s(比位置短)
- 不透明度动画 0s~1.2s(比位置长)
这种方式做出来的动效更有层次感。