Greensock动画如此出色的表现如何发挥作用?

时间:2019-07-04 04:32:58

标签: javascript animation css-animations greensock

greensock网站上有一个speed test,它与其他动画库,JQuery甚至CSS Transitions的速度进行了比较。它通过动画成千上万的笔触来对FPS进行基准测试。

greensock动画的FPS超过了其他所有内容。 CSS转换和JQuery与greensock不太接近。

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

我仍然是JavaScript爱好者。如果我尝试制作自己的JS动画,那么这些动画将不如gsap快。差远了。因此,很高兴知道引擎盖下发生了什么。他们如何进行优化!

1 个答案:

答案 0 :(得分:1)

Jack(GreenSock的创建者)告诉我们this forum post中GSAP在其他地方是如此之快。总结一下这些观点:

  
      
  1. 全面使用高度优化的JavaScript(这需要进行很多操作,例如使用链接列表,局部变量,快速查找表,内联代码,按位运算符,利用原型而不是为每个实例重新创建函数/变量等)   
  2. 对平台的结构进行工程设计,使其非常适合高压情况,最大程度地减少函数调用并确保事物对gc友好。
  3.   
  4. 在由requestAnimationFrame驱动的单个更新循环中进行更新,必要时仅回退到setTimeout()。
  5.   
  6. 在内部缓存一些重要值,以加快更新速度。
  7.   
  8. 对于CSS变换,我们计算矩阵值并在存在任何旋转或倾斜时构造了matrix()或matrix3d(),因为我们的测试表明它更快。
  9.   

没有灵丹妙药可以使之快速。基于十多年的经验,它做事的方式很聪明。