让人眼前一亮！基于 JavaScript 的定时器动画揭秘

2023-09-06 19:48:26

探索 JavaScript 定时器动画：打造引人入胜的网页体验

1. JavaScript 定时器的基本概念

JavaScript 定时器是让您的网页在特定时间间隔后执行代码的神奇工具。我们有两大法宝：setTimeout() 和 setInterval()。

setTimeout() 就像一个闹钟，它会延时触发一次函数。而 setInterval() 则是一台永不疲倦的引擎，不停地执行函数，直到你按下停止按钮。

2. 用 JavaScript 定时器实现基本动画

理论固然重要，但实践才是王道。让我们创造一个在页面上蹦蹦跳跳的小球，展示定时的魅力：

// 制作一个红色小球
const ball = document.createElement('div');
ball.style.width = ball.style.height = '50px';
ball.style.borderRadius = '50%';
ball.style.backgroundColor = 'red';
ball.style.position = 'absolute';
ball.style.left = '50%';
ball.style.top = '50%';

// 每 10 毫秒，让小球往上蹦一蹦
const timer = setInterval(() => {
  let top = parseInt(ball.style.top);
  top += 10;
  ball.style.top = `${top}px`;

  // 到头了？再从头来过！
  if (top > window.innerHeight) {
    ball.style.top = '0px';
  }
}, 10);

// 把小球放进页面里
document.body.appendChild(ball);

这段代码会创造一个红色小球，每 10 毫秒向上跳 10 像素。当它跳出窗口顶部时，它会从底部重新开始。

3. JavaScript 定时器动画的技巧和最佳实践

现在我们已经掌握了基础，是时候探索一些进阶技巧，让你的动画更流畅、更精彩：

拥抱 requestAnimationFrame()： 这款高性能工具会紧跟浏览器刷新率，让你的动画在任何设备上都流畅运行。
利用动画库： GreenSock Animation Platform (GSAP)、Anime.js 和 Velocity.js 等库提供了预设动画和便捷工具，节省你的时间和精力。
关注性能： 动画不要太复杂，避免频繁操作 DOM 或计算。善用 requestAnimationFrame() 和动画库提升性能。
代码要清晰易懂： 变量取名要明确，代码组织要条理，注释要完善，这样你和其他开发者都能轻松理解和修改代码。

4. 更具创意的动画示例

了解了基本知识，现在让我们探索一些更具创意的动画，激发你的灵感：