带你读《现代Javascript高级教程》三十一、requestAnimationFrame：优化动画和渲染的利器（1）https://developer.aliyun.com/article/1349490?groupCode=tech_library
4. 使用requestAnimationFrame的示例
下面通过几个示例来演示如何使用requestAnimationFrame来实现动画和渲染效果。
1） 实现平滑的滚动效果
下面的示例代码演示了如何使用requestAnimationFrame实现平滑的滚动效果：
function smoothScrollTo(targetY, duration) { const startY = window.pageYOffset; const distance = targetY - startY; const startTime = performance.now(); function step(currentTime) { const elapsedTime = currentTime - startTime; const progress = Math.min(elapsedTime / duration, 1); const ease = easingFunction(progress); window.scrollTo(0, startY + distance * ease); if (elapsedTime < duration) { requestAnimationFrame(step); } } requestAnimationFrame(step);} function easingFunction(t) { return t * t * t;} // 使用示例const button = document.querySelector('scrollButton'); button.addEventListener('click', () => { smoothScrollTo(1000, 1000);});
在上述代码中，我们定义了一个smoothScrollTo函数，用于实现平滑的滚动效果。该函数接收目标位置targetY和滚动的持续时间duration作为参数。在函数内部，我们获取当前的滚动位置startY和目标位置与起始位置之间的距离distance。
然后，我们使用performance.now()获取当前的时间戳startTime，并定义一个step函数用于更新滚动位置。在step函数中，我们根据时间的流逝计算出进度progress，并使用缓动函数easingFunction来调整进度。最后，我们使用requestAnimationFrame调度step函数的执行，并在滚动动画完成之前不断更新滚动位置。
2） 实现粒子动画效果
下面的示例代码演示了如何使用requestAnimationFrame实现粒子动画效果：
const canvas = document.querySelector('canvas');const ctx = canvas.getContext('2d'); const particles = []; function Particle(x, y, speedX, speedY, radius, color) { this.x = x; this.y = y; this.speedX = speedX; this.speedY = speedY; this.radius = radius; this.color = color;} Particle.prototype.update = function() { this.x += this.speedX; this.y += this.speedY; if (this.x + this.radius < 0 || this.x - this.radius > canvas.width) { this.speedX = -this.speedX; } if (this.y + this.radius < 0 || this.y - this.radius > canvas.height) { this.speedY = -this.speedY; }}; Particle.prototype.draw = function() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); ctx.fillStyle = this.color; ctx.fill(); ctx.closePath();}; function createParticles() { for (let i = 0; i < 100; i++) { const x = Math.random() * canvas.width; const y = Math.random() * canvas.height; const speedX = Math.random() * 4 - 2; const speedY = Math.random() * 4 - 2; const radius = Math.random() * 5 + 1; const color = getRandomColor(); particles.push(new Particle(x, y, speedX, speedY, radius, color)); }} function updateParticles() { particles.forEach((particle) => { particle.update(); });} function drawParticles() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach((particle) => { particle.draw(); }); requestAnimationFrame(drawParticles);} // 使用示例createParticles();drawParticles(); function getRandomColor() { const letters = '0123456789ABCDEF'; let color = ''; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color;}
带你读《现代Javascript高级教程》三十一、requestAnimationFrame：优化动画和渲染的利器（3）https://developer.aliyun.com/article/1349488?groupCode=tech_library
