javascript - CSS/JS 滚动故障效果(性能)

Question

我正在尝试使用 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 (点击文字查看效果)

实际上我对效果很满意，但实现显然是一个 hack。结果，性能低得令人无法接受(触发效果时，chrome cpu 使用率从 5% 飙升至 50%)。

有人能帮我想出一种更优雅、性能更轻的方法来实现这种效果吗？

更新:我已经实现了您的建议:使用 translate 而不是 left，使用 translate 滚动而不是 js 循环，css 标记之外的计算以及使用 requestAnimationFrame()。现在代码更好，更可预测，但动画仍然很费力。 New fiddle

Answer 1

您可以尝试使用 requestAnimationFrame(它在 almost all browsers 中可用)。似乎在 Chrome 中有很大的不同。

JSFiddle

编辑

这是一个只有过渡的版本，虽然它甚至没有实现抖动，但它对于比较很有用。令人惊讶的是(？)它显示了大致相同的 CPU 使用率，如果不是更多的话。 (您可以在 Chrome 中查看个人资料和时间轴标签)

CSS3 Transition-Only JSFiddle

这是 some information关于为什么应该这样。本质上，CSS 转换和 requestAnimationFrame 的工作原理非常相似。