amls 中文文档 下载 App

AMLS 多属性同步动画:同时驱动位置缩放旋转

单一属性 vs 多属性动画

给单个属性加关键帧,效果是:

但实际创作中,几乎所有"看起来高级"的动效都是多属性同时变化的组合:

这一章专门讲如何同时给多个属性加关键帧,以及如何让它们时间对齐。

方法一:逐个属性加关键帧

最直观的方式——按顺序给每个属性加关键帧:

  1. 把播放头移到动画起点时间(比如 0 秒)
  2. 给位置属性加关键帧,值为起始位置
  3. 给缩放属性加关键帧,值为起始大小(比如 0%)
  4. 给不透明度属性加关键帧,值为 0%
  5. 把播放头移到动画终点时间(比如 1 秒)
  6. 依次修改三个属性的数值 → AMLS 自动在终点生成关键帧
  7. 播放预览 → 三个属性的动画同时进行

方法二:关键帧视图批量对齐

在关键帧视图里可以更清晰地管理多个属性的时间对齐:

  1. 切换到目标图层的关键帧视图
  2. 你会看到每个可动画属性在时间轴上各占一行
  3. 拖动时间轴定位起点 → 在每个属性行上添加关键帧
  4. 拖动时间轴定位终点 → 在每个属性行上添加关键帧
  5. 可以直接拖动关键帧的垂直位置来对齐不同属性的关键帧时间

关键帧视图的好处是直观看到所有属性的时间分布——如果某个属性的动画比其他属性短了 0.2 秒,一眼就能看出来。

组合动效模板

下面是几个高频使用的多属性组合,直接套用就能做:

入场:放大+淡入+位移

时间位置 X缩放不透明度
0s-3000%0%
0.5s0120%100%
1s0100%100%

效果:从左侧快速滑入 → 稍微放大过头 → 回弹到正常大小(最后两个关键帧用 Bounce 缓动)

强调:弹性缩放

时间缩放
0s100%
0.15s130%
0.3s90%
0.45s105%
0.6s100%

效果:物体弹一下恢复——常用于点击反馈、强调某个元素

转场:旋转缩小淡出

时间旋转缩放不透明度
0s0°100%100%
1s360°0%0%

效果:原地转一圈同时缩小消失

时间对齐的两个技巧

技巧一:关键帧复制批量对齐

在关键帧视图里,选中某个属性的一组关键帧 → 复制 → 选中另一个属性 → 粘贴。这样两个属性的关键帧时间点完全一致,只需要调整数值不同即可。

技巧二:标记对齐

在时间轴上添加时间标记——在时间刻度上长按可以添加红色标记。标记本身不参与渲染,但可以作为视觉参考点,让不同属性的关键帧精确对齐到同一时刻。

什么时候用哪种方法

场景推荐方法
刚开始学,属性不多逐个属性加关键帧
关键帧超过 10 个,需要精细对齐关键帧视图批量对齐
需要让不同属性的动画有时间差(比如先放大后淡入)关键帧视图里错开关键帧位置

进阶:错峰动画

不一定所有属性都要同时开始和结束。错开一些时间反而更自然:

这种方式做出来的动效更有层次感。