浏览器性能问题和使用 Bodymovin 和 CSS 动画

Question

我正在构建一个充满 SVG 插图的网站，其中包含使用 Bodymovin 进行动画处理的动画组件。

但背景有时也会以动画形式显示运动（跑步者 SVG 的手臂和腿在移动，而背景 SVG 从右向左移动显示进度）。

我是否试图将 Bodymovin 的使用限制在角色的复杂动画中，以便我可以使用 CSS transform3d 动画来进行简单的背景移动？

我正在努力使动画流畅，同时在每个人的浏览器上都很容易！

我通常会安装 GSAP 并用它制作动画，但这意味着为背景添加第二个 JS 动画库，因为客户端有一个生成 Bodymovin 动画的设计师。

欢迎任何建议。谢谢

Answer 1

Bodymovin 似乎滞后于页面上的多个动画，因此我最终使用 CSS 动画为背景设置动画，以将浏览器的工作量降至最低。

通过 translate3d 的动画，css 动画也很流畅。