CSS/JS滚动故障效果(性能）

CSS/JS scrolling glitch effect (performance)

本文关键字：性能 故障 JS 滚动 CSS      更新时间：2023-09-26

我正在尝试使用Javascript和CSS来实现"类似crt"的滚动故障效果。我已经想出了以下代码，它克隆内容并应用clip使其看起来像滚动，同时添加随机水平偏移。

function scanglitch() {
    var e = $('#wrapper').clone().appendTo('#glitchcontainer');
    var i = 0;
    e.css({"clip": "rect(" + i + "px,3830px," + (i + 15) + "px,0px)"});
    e.css("z-index",200);
    var interval = setInterval(function () {
        e.css({"clip": "rect(" + i + "px,3830px," + (i + 15) + "px,0px)"});
        e.css({"left": Math.round(Math.random() * 10) + "px"});
        i+=4;
        if (i > window.innerHeight) {
            e.remove();
            window.clearInterval(interval);
        }
    }, 40);
}

Fiddle（点击文本查看效果）

事实上，我对效果很满意，但这个实现显然是一个破解。因此，性能低得令人无法接受（触发效果时，chrome cpu使用率从5%飙升至50%）。

有人能帮我想出一种更优雅、不那么重性能的方法来达到这种效果吗？

更新：我已经实现了你的建议：使用translate而不是left，滚动translate来代替js循环，在css标记之外进行计算，并使用requestAnimationFrame()。代码现在更好了，也更可预测了，但动画仍然很费力。新小提琴

您可以尝试使用requestAnimationFrame（它在几乎所有浏览器中都可用）。似乎在Chrome中有很大的不同。

JSFiddle

编辑

这是一个仅转换的版本，虽然它甚至没有实现抖动，但它对比较很有用。令人惊讶的是（？）它显示的CPU使用率几乎相同，甚至更多。（您可以在Chrome浏览器中查看Profile和Timeline选项卡）

CSS3仅转换JSFiddle

以下是一些关于为什么会出现这种情况的信息。从本质上讲，CSS转换和requestAnimationFrame在引擎盖下的工作方式非常相似。

我会尽可能多地委托css转换。因此，与其在interval回调中使用js移动剪辑，不如将其从上转换到下（转换示例）。

你可以用left属性尝试类似的东西，没有随机放松函数，但也许你可以用其中一个反弹函数实现类似的东西。也许可以用一个比你现在的频率更低的间隔来改变放松函数。

此外，只要放慢当前解决方案的间隔，您就可以用更少的CPU使用率获得视觉上良好的结果。

附带说明：对于完全不同的路由，您可以在画布中复制html并应用一些效果。谷歌有很多关于"画布故障"的结果。

更新：这是我最新版本的小提琴

与你的相比，我用它减少了大约10%的cpu使用量。主要区别在于：

  • 使用超时而不是CCD_ 5。requestAnimationFrame旨在保持高帧率和动画流畅，但我们不需要用于随机偏移。超时也比间隔好，因为loop函数必须在下一次迭代开始前完成。

  • 删除了透明背景，因为透明具有渲染成本

相关文章：