使用动画

这个教程只讲当前项目里真正有文档、有示例、实际在用的动画写法。

1. 常用入场动画

淡入：

{
  "animations": [
    { "type": "fadeIn", "duration": 0.4 }
  ]
}

滑入：

{
  "animations": [
    {
      "type": "slideIn",
      "direction": "up",
      "distance": 120,
      "duration": 0.6
    }
  ]
}

缩放入场：

{
  "animations": [
    {
      "type": "zoomIn",
      "duration": 0.5,
      "easing": "easeOutBack"
    }
  ]
}

2. 持续运动

{
  "animations": [
    {
      "type": "scale",
      "from": 1,
      "to": 1.08,
      "duration": 0.8,
      "loop": true,
      "easing": "easeInOutSine"
    }
  ]
}

3. 组合动画时的原则

常见且可靠的组合：

• fadeIn + slideIn
• fadeIn + zoomIn
• scale + move

除非你就是要强烈风格化效果，否则不要在同一个 clip 上堆太多入场动画。

4. keyframes 和 animations 怎么选

适合用 animations 的情况：

• 需要一个命名好的预设动作
• 需要更快写出结果

适合用 keyframes 的情况：

• 需要精确控制某个时间点的值
• 需要自定义属性曲线

5. 继续阅读

• 完整时序参考：看 动画、关键帧、转场
• 可复制示例：看 示例