深入理解ruanyf/jstutorial中的requestAnimationFrame动画优化技术-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00767/article/details/148505493

深入理解ruanyf/jstutorial中的requestAnimationFrame动画优化技术

jstutorial Javascript tutorial book 项目地址: https://gitcode.com/gh_mirrors/js/jstutorial

前言

在现代Web开发中，动画效果已经成为提升用户体验的重要组成部分。传统的JavaScript动画实现方式如setTimeout和setInterval虽然能够实现动画效果，但在性能和能效方面存在明显不足。本文将深入探讨requestAnimationFrame这一现代浏览器提供的动画API，它是ruanyf/jstutorial项目中重点介绍的HTML5关键技术之一。

requestAnimationFrame的核心优势

requestAnimationFrame是浏览器专门为动画优化设计的API，相比传统定时器具有三大核心优势：

与浏览器刷新率同步：自动匹配显示器刷新频率（通常60Hz），避免不必要的重绘
智能节能机制：当页面处于非活动状态时自动暂停动画，节省CPU/GPU资源
浏览器优化集成：浏览器可以合并多个动画请求，进行统一处理

基本使用方法

启动动画

let animationId;

function animate() {
  // 动画逻辑代码
  animationId = requestAnimationFrame(animate);
}

// 开始动画
animationId = requestAnimationFrame(animate);

停止动画

cancelAnimationFrame(animationId);

浏览器兼容性处理

虽然现代浏览器都已支持requestAnimationFrame，但在实际项目中我们仍需处理兼容性问题：

window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
         window.webkitRequestAnimationFrame ||
         window.mozRequestAnimationFrame ||
         window.oRequestAnimationFrame ||
         window.msRequestAnimationFrame ||
         function(callback) {
           // 60FPS的回退方案
           window.setTimeout(callback, 1000 / 60);
         };
})();

这种封装方式在ruanyf/jstutorial中被推荐使用，它确保了在不支持原生API的浏览器中仍能保持相对流畅的动画效果。

性能优化实践

1. 避免频繁的DOM操作

requestAnimationFrame虽然优化了绘制时机，但频繁的DOM操作仍会导致性能问题。最佳实践是将多个DOM操作合并处理。

2. 使用高精度时间戳

回调函数会接收一个高精度时间戳参数，利用它可以实现更精确的动画控制：

function animate(timestamp) {
  if (!startTime) startTime = timestamp;
  const progress = timestamp - startTime;
  // 使用progress计算动画状态
  requestAnimationFrame(animate);
}

3. 动画节流技术

对于复杂场景，可以采用帧数控制技术：

let then = 0;
const fps = 30; // 目标帧率
const interval = 1000 / fps;

function animate(now) {
  requestAnimationFrame(animate);
  
  const delta = now - then;
  if (delta > interval) {
    then = now - (delta % interval);
    // 实际动画逻辑
  }
}

实际应用案例

ruanyf/jstutorial中提供了一个经典的位移动画示例，我们可以在此基础上进行扩展：

<div id="anim-box" style="width:100px;height:100px;background:red;position:absolute;"></div>
<button id="start-btn">开始</button>
<button id="stop-btn">停止</button>

const box = document.getElementById('anim-box');
const startBtn = document.getElementById('start-btn');
const stopBtn = document.getElementById('stop-btn');
let animationId;
let startTime;
let initialPosition = 0;

function animate(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = timestamp - startTime;
  const progress = Math.min(elapsed / 2000, 1); // 2秒动画周期
  
  // 使用缓动函数使动画更自然
  const position = initialPosition + (500 * easeInOutQuad(progress));
  box.style.transform = `translateX(${position}px)`;
  
  if (progress < 1) {
    animationId = requestAnimationFrame(animate);
  }
}

// 缓动函数
function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}

startBtn.addEventListener('click', () => {
  initialPosition = parseInt(box.style.transform?.replace('translateX(', '') || 0);
  startTime = null;
  cancelAnimationFrame(animationId);
  animationId = requestAnimationFrame(animate);
});

stopBtn.addEventListener('click', () => {
  cancelAnimationFrame(animationId);
});

这个增强版示例包含了动画启停控制、缓动函数应用和CSS transform优化等实用技巧。