Angular Academy · 课时

关键帧与交错动画

Q: 「关键帧与交错动画」这节课中我会学到什么？

创建复杂的交错动画 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

创建复杂的交错动画

关键帧与交错动画 是 CoddyKit 上的免费 Angular Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

多步骤动画

简单过渡会从 A 变化到 B。对于多步骤运动（弹跳、脉冲、颜色渐变），Angular 提供了 keyframes；对于按顺序为多个项目设置动画，则提供了 stagger。

keyframes 函数

keyframes 接收一个 style 步骤数组，每个步骤都有一个从 0 到 1 的 offset，用于标记其在持续时间中的位置。

animate('1s', keyframes([
  style({ opacity: 0, offset: 0 }),
  style({ opacity: 0.5, offset: 0.3 }),
  style({ opacity: 1, offset: 1 })
]))

理解 offset

offset 表示总持续时间的比例。0 表示开始，1 表示结束。数组中的 offset 应逐步增大。

弹跳效果

使用关键帧可以让元素越过目标位置后再稳定下来，从而产生弹跳效果。

keyframes([
  style({ transform: 'translateY(0)', offset: 0 }),
  style({ transform: 'translateY(-20px)', offset: 0.5 }),
  style({ transform: 'translateY(0)', offset: 1 })
])

省略 offset

如果省略 offset，Angular 会在整个持续时间内均匀分配关键帧。

keyframes([
  style({ opacity: 0 }),
  style({ opacity: 1 })
])

query 函数

要为宿主元素的子元素设置动画，请在过渡中使用 query 选择这些子元素。

transition('* => *', [
  query(':enter', [
    style({ opacity: 0 })
  ])
])

stagger 函数

stagger 会在每个查询到的元素的动画之间应用时间偏移，从而产生层层展开的效果。

query(':enter', [
  style({ opacity: 0 }),
  stagger(100, [
    animate('300ms', style({ opacity: 1 }))
  ])
])

为列表设置交错动画

在列表容器的触发器中组合使用 query + stagger，让项目依次淡入。

trigger('listAnim', [
  transition('* => *', [
    query(':enter', [
      style({ opacity: 0 }),
      stagger(80, animate('250ms', style({ opacity: 1 })))
    ], { optional: true })
  ])
])

可选标志

将 { optional: true } 传递给 query，这样不存在匹配元素时，动画也不会报错。

负交错值

在 stagger 中使用负值会反转顺序，使最后的项目先执行动画，适合用于退出时的层叠效果。

stagger(-50, animate('200ms', style({ opacity: 0 })))

性能提示

为大量元素设置交错动画可能会带来较大开销。请缩短每个项目的持续时间，并优先使用 transform/opacity，使动画在 GPU 上运行。

快速检查

测试您对关键帧和交错动画的理解。

回顾

您了解到，keyframes 使用 offset 值定义多步骤运动，而 query + stagger 则以层叠方式为多个元素设置动画。请使用 { optional: true } 提高安全性，并优先选择适合 GPU 的属性。

常见问题解答

「关键帧与交错动画」课时是免费的吗？

是的 — 「关键帧与交错动画」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「关键帧与交错动画」这节课中我会学到什么？

创建复杂的交错动画你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「关键帧与交错动画」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy