javascript - 提高js动画的性能

Question

我用javascript制作了一个正弦波动画，其中正弦波下方的区域填充了浅蓝色。但是当我运行代码时，我的计算机开始发热并滞后。这也可能是因为我的计算机现在已经相当破旧了，但我真的很想知道如何优化这段代码，或者如果可能的话，用其他性能不那么密集的东西重新创建效果。

正弦波动画: https://jsfiddle.net/x2audoqk/13/

代码:

const canvas = document.querySelector("canvas")
const c = canvas.getContext("2d")

canvas.width = innerWidth
canvas.height = innerHeight

window.addEventListener("resize", function () {
    canvas.width = innerWidth
    canvas.height = innerHeight
    wave.y = canvas.height / 1.5
    wave.length = -4.5 / canvas.width
    amplitude = canvas.width / 35
})

const wave = {
    y: canvas.height / 1.5,
    length: -4.5 / canvas.width,
    amplitude: canvas.width / 25,
    frequency: 0.0045
}

let increment = wave.frequency

function animate() {
    requestAnimationFrame(animate)

    // Deletes previous waves
    c.clearRect(0, 0, canvas.width, canvas.height)

    c.beginPath()

    // Get all the points on the line so you can modify it with Sin
    for (let i = 0; i <= canvas.width; i++) {
        c.moveTo(i, wave.y + Math.sin(i * wave.length + increment) * wave.amplitude * Math.sin(increment))
        c.lineTo(i, canvas.height)
    }

    // Fill the path
    c.strokeStyle = 'rgba(1, 88, 206, .25)'
    c.stroke()
    increment += wave.frequency
    c.closePath()
}
animate()

欢迎任何建议。

Answer 1

重负载是由于 requestAnimationFrame 一遍又一遍地运行造成的。一种方法是限制动画的帧速率。知道人眼需要至少 24 fps 才能获得流畅的图像，因此您可以选择 24-60 fps 之间的 fps(受显示器刷新率限制，最高 60Hz 取决于配置，但这主要是默认值)。

这里是a guide如何控制fps

var fps = 30;
var now;
var then = Date.now();
var interval = 1000/fps;
var delta;

function animate() {

    requestAnimationFrame(animate);

    now = Date.now();
    delta = now - then;

    if (delta > interval) {             
        then = now - (delta % interval);

        //your code drawing here
    }
}  
animate();

The the difference between 30 fps and 60 fps

另一种以更少的工作量实现相同效果的技术是使用 CSS 动画(水平)，并将背景波预绘制为图像。