优化动画 - css 或 canvas

Posted 2023-02-22

【中文标题】优化动画 - css 或 canvas

【英文标题】：Optimizing animation - css or canvas

【发布时间】：2020-05-05 17:35:32

【问题描述】：

我正在创建个人网页，有点像投资组合，并且我想到了动画，其中许多技术标志（如 node.js）将从下到上移动，这里是：

http://roman-k.herokuapp.com/

很遗憾，但它在我的 macbook 上的 chrome 的 GPU 进程中消耗了 70% 并且需要以某种方式进行优化，您能否分享一下如何完成的想法？

目前它在画布上为每个徽标使用 requestAnimationFrame 和 ctx.drawImage。

我认为我应该使用 JS 将徽标放置到一些随机位置，然后使用 css 对其进行动画处理，但是如何？每个标志都有随机的 x 和 y 位置

【问题讨论】：

Canvas 对此太过分了。看看现有的 css/js carousel/gallery/slider 解决方案。基本上你只需要：一个带有overflow:hidden 的容器，一行中的项目（在你的情况下是列），以及由 js 和 css 处理的移动。

布兰登也是这么说的。但是您可以保存整个画布绘图以缓存它，然后向上重新绘制动画。

我刚刚将其重新制作为 20 张单独的图像，并使用 css 过渡道具和 chrome 移动仍然显示 GPU 接近 70%

你不能把它做成一张大图吗？在屏幕外完成工作，然后将其复制过来。但是你，如果它造成了这么大的困难，你最好按照布兰登所说的去做。让渲染引擎为您完成工作。的编码应该非常简单

您只需要过渡和顶部，挂钩动画结束，并随机化左侧位置。将是一个非常快速的 css hack

【参考方案1】：

我发现了问题！并解决了它。我删除了所有绘图，只留下了 clearRect：

const animation = () => 
  ctx.clearRect(0, 0, width, height)
  animationFrame = window.requestAnimationFrame(animation)

animationFrame = window.requestAnimationFrame(animation)

这段代码只是清除了画布，并没有做任何有用的事情，但是它仍然会加载超过 50% 的 GPU 进程。

为了解决这个问题，我用setInterval 替换了requestAnimationFrame，这样可以减少渲染次数，每秒20 次对我的动画来说已经足够了，现在GPU 感觉好多了。

P.S 这个问题可能是 chrome 和 mac 特有的，因为这个和其他 css 动画在 android 手机、windows chrome 和 macbook 上的 firefox 上工作得更加流畅和更好