Question

我希望在使用CSS translate3d属性和requestAnimationFrame水平拖动时，在视口中为100多个DOM元素设置动画。示例是over here。

因为它是一个相当大的dom节点集合，所以只有当轮到他们进入场景时我才动画它们，否则我将它们设置为display: none并且不要触摸它们。

这是我的初始化代码：

makePoints (num) {
    for (let i = 0; i < num; i += 1) {
        this.points.push({
            x: i * this.spacing,
            y: window.innerHeight / 2 + Math.sin(i * this.spacing) * 100 - 80,
            scale: 0.5 + Math.random() * 0.5
        });
        this.totalWidth += this.spacing;
    }
}

这是我的帧更新方法：

update (speed) {
    this.points.forEach((p, i) => {
        let li = this.domCollection[i];

        if (p.x > -this.spacing && p.x < this.width) {
            $(li).css({
                transform: `
                    translate3d(${p.x}px, ${p.y}px, 0) 
                    scale(${p.scale}, ${p.scale})
                `,
                display: 'block'
            });
        } else {
            $(li).css({
                display: 'none'
            })
        }

        p.x += -speed;

        if (p.x <= -this.width) {
            p.x += this.totalWidth;
        } else if (p.x >= this.totalWidth - this.width) {
            p.x -= this.totalWidth;
        }

    });
}

我的问题是：在这种情况下，我是否正确使用硬件加速？元素第一次进入视口时，会在其上使用translate3d，此时它是硬件加速的吗？我应该将will-change: transform放在所有这些上，还是应该在更新display时打开/关闭它？

我很难绕过这个概念，任何帮助都会受到更多的赞赏。

使用硬件层加速并将正确更改

0 个答案: