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（点击文字查看效果）

我实际上对这种效果非常满意，但实施显然是一种黑客攻击。因此，性能低得令人无法接受（当触发效果时，铬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的工作方式非常相似。

Answer 2

我会尽可能委托css过渡。因此，不要在间隔回调中使用js移动剪辑，而是将其从顶部转换为底部（example of transitioning）。

您可以尝试使用左侧属性类似的东西，没有随机缓动函数，但也许您可以使用其中一个弹跳函数实现类似的功能。也许用一个比你当前的频率更低的间隔来改变缓动函数。

此外，只需通过减慢当前解决方案的间隔，您就可以获得视觉上可靠的结果，同时降低CPU使用率。

旁注：对于完全不同的路线，您可以在画布中复制html并对其应用一些效果。 Google为“canvas glitch”提供了大量结果。

更新：here's my version of your latest fiddle

与你的相比，我的cpu使用率降低了约10％。主要区别是：

使用超时而不是requestAnimationFrame。 requestAnimationFrame旨在保持帧率高和动画平滑但我们不需要随机偏移。超时也比间隔好，因为loop函数在下一次迭代开始之前保证完成。
删除了透明背景，因为透明度具有渲染成本

CSS / JS滚动毛刺效果（性能）

2 个答案: