异常教程

animationiteration 事件（一文讲透）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在网页开发中，CSS 动画为用户提供了直观且流畅的交互体验。而 animationiteration 事件作为 CSS 动画的核心事件之一，允许开发者在动画完成一个完整循环时触发自定义逻辑。无论是游戏开发中角色的循环动作，还是复杂交互中的动态反馈，这一事件都能提供精准的控制能力。本文将从基础概念、用法、案例到进阶技巧，系统讲解如何利用 animationiteration 事件优化动画逻辑，并通过代码示例帮助读者快速上手。

一、什么是 animationiteration 事件？

1.1 基本定义

animationiteration 事件是 CSS 动画的标准事件之一，当一个动画完成完整的一次循环（从开始到结束）时触发。例如，若动画持续时间为 2s，且设置了 animation-iteration-count: infinite，则每 2 秒会触发一次此事件。

形象比喻：
可以将动画比作跑步绕圈，animationiteration 就是每次绕完一圈回到起点时发出的“滴答”声。

1.2 与相关事件的区别

  • animationstart：动画首次开始时触发。
  • animationend：动画完全停止时触发（如 animation-iteration-count 设置为有限次）。
  • animationiteration：仅在动画完成完整循环时触发（无论是否无限循环）。

对比表格：
| 事件名称 | 触发条件 | 典型应用场景 |
|--------------------|---------------------------|---------------------------|
| animationstart | 动画首次开始时 | 初始化逻辑（如加载资源） |
| animationiteration| 每完成一个完整循环 | 循环中的状态更新（如计数）|
| animationend | 动画完全停止时 | 结束后的清理或跳转操作 |

二、如何使用 animationiteration 事件？

2.1 基础用法：监听事件

通过 JavaScript 的 addEventListener 方法绑定事件监听器。

<!-- HTML 结构 -->
<div id="myAnimation" class="animate"></div>

<!-- CSS 动画定义 -->
<style>
  @keyframes example {
    0% { transform: translateX(0); }
    100% { transform: translateX(200px); }
  }
  .animate {
    width: 50px;
    height: 50px;
    background: red;
    animation: example 2s infinite;
  }
</style>

<!-- JavaScript 监听事件 -->
<script>
  const element = document.getElementById('myAnimation');
  element.addEventListener('animationiteration', (event) => {
    console.log('动画完成了一次循环！');
  });
</script>

2.2 关键属性与方法

  • event.animationName：获取触发事件的动画名称（如 example）。
  • event.elapsedTime：获取动画已运行的总时间（以秒为单位）。
element.addEventListener('animationiteration', (event) => {
  console.log(`动画名称：${event.animationName}`);
  console.log(`已运行时间：${event.elapsedTime} 秒`);
});

三、实战案例：动态更新进度条

3.1 场景描述

假设需要开发一个进度条，当动画循环时，每完成一次循环就更新进度值。

3.2 代码实现

<div class="progress-container">
  <div id="progress-bar" class="progress-bar"></div>
</div>

<style>
  .progress-container {
    width: 300px;
    height: 20px;
    background: #eee;
    border-radius: 10px;
    position: relative;
  }
  .progress-bar {
    width: 0;
    height: 100%;
    background: #4CAF50;
    border-radius: 10px;
    animation: fillProgress 2s infinite;
  }
  @keyframes fillProgress {
    0% { width: 0; }
    100% { width: 100%; }
  }
</style>

<script>
  const progressBar = document.getElementById('progress-bar');
  let progressCount = 0;

  progressBar.addEventListener('animationiteration', () => {
    progressCount++;
    console.log(`已循环次数：${progressCount}`);
    // 更新 UI 或执行其他逻辑
    document.querySelector('.progress-bar').style.backgroundColor = 
      progressCount % 2 === 0 ? '#2196F3' : '#4CAF50';
  });
</script>

3.3 运行效果

  • 进度条每 2 秒完成一次填充，触发事件后颜色交替变化。
  • 控制台输出循环次数，便于调试和逻辑扩展。

四、进阶技巧与常见问题

4.1 如何避免事件重复绑定？

多次调用 addEventListener 会导致事件重复触发。可通过 检查监听器是否存在 或 使用闭包 解决。

// 方法一：标记变量
let isListenerAttached = false;
if (!isListenerAttached) {
  element.addEventListener('animationiteration', handler);
  isListenerAttached = true;
}

// 方法二：使用闭包
function setupAnimationListener(element) {
  let count = 0;
  return (event) => {
    count++;
    // 逻辑代码
  };
}
element.addEventListener('animationiteration', setupAnimationListener(element));

4.2 与 animationend 的结合使用

若需区分循环结束与最终停止，可同时监听两个事件：

element.addEventListener('animationiteration', () => {
  console.log('循环完成');
});
element.addEventListener('animationend', () => {
  console.log('动画完全结束');
});

4.3 兼容性问题

animationiteration 在主流浏览器中支持良好（Chrome 26+、Firefox 16+、Edge 12+）。可通过 Polyfill 或 渐进增强 方案处理旧浏览器。

五、总结与展望

通过本文，我们系统学习了 animationiteration 事件的核心概念、用法及实际应用。这一事件为开发者提供了对动画循环的精准控制能力，尤其在游戏开发、交互反馈等场景中具有重要意义。

未来，随着 Web 动画 API 的持续演进，事件驱动的动画逻辑将更加灵活。建议读者：

  1. 通过代码沙盒（如 CodePen）实践案例；
  2. 尝试将事件与 requestAnimationFrame 结合，实现更复杂的动画效果；
  3. 探索 CSS 动画与 JavaScript 的深度联动，提升交互体验。

掌握 animationiteration 事件，不仅能优化代码逻辑，更能为用户带来更流畅、更智能的交互感受。

最新发布

查看更多文章