Greensock 动画是如何在幕后工作的？答案

【问题标题】：How Greensock animations work under the hood that it's so performant?Greensock 动画是如何在幕后工作的？
【发布时间】：2019-07-04 04:32:58
【问题描述】：

greensock 网站上有一个speed test 与其他动画库、JQuery 甚至 CSS 转换的速度进行比较。它通过为成百上千个 pericles 设置动画来对 FPS 进行基准测试。

greensock 动画的 FPS 超过了其他任何东西。 Css 转换和 JQuery 与 greensock 的差距不大。

我尝试搜索有关 greensock 的信息，但找不到太多有用的信息。他们中的大多数都没有得到很好的解释。

我仍然是 javascript 的业余爱好者。如果我尝试制作自己的 JS 动画，这些动画将不会像 gsap 那样快。差远了。所以很高兴知道引擎盖下发生了什么。他们如何优化这么多！

【问题讨论】：

不要以为“不会像 gsap 那样快”。如果您想最快，甚至不要看它们。花时间尝试自己的方式，而不是担心竞争对手。许多反对意见表明他们喜欢你的想法。
我对没有时间尝试我的想法感到有点沮丧，但我会对仅通过问题不容易获得的输入感兴趣：stackoverflow.com/questions/56842747/…
你的速度取决于算法。尽可能多地尝试。

标签： javascript animation css-animations gsap

【解决方案1】：

Jack（GreenSock 的创建者）讲述了 GSAP 如何在 this forum post 以及其他地方如此之快。回顾一下那里的一些观点：

全面使用高度优化的 JavaScript（这需要很多东西，例如使用链表、局部变量、快速查找表、内联代码、按位运算符、利用原型而不是为每个实例重新创建函数/变量等）李>

设计平台结构，使其非常适合高压情况，最大限度地减少函数调用并确保对 gc 友好。

在由 requestAnimationFrame 驱动的单个更新循环中进行更新，仅在必要时回退到 setTimeout()。

在内部缓存一些重要值以加快更新速度。

对于 CSS 转换，我们计算矩阵值并在发生任何旋转或倾斜时构造一个 matrix() 或 matrix3d()，因为我们的测试表明它更快。

没有什么灵丹妙药可以让它变快。它基于十多年的经验做事的方式很聪明。

【讨论】：