javascript - 与这个简单示例中的 css 动画相比，Greensock (GSAP) 更不流畅/更生涩。有没有办法改善它？

Question

我是 gsap 的新手，所以如果我做错了什么，请纠正我，但这是一个非常简单的例子。我只是想比较 Firefox 和 Chrome 中 css 动画与 gsap 动画的性能，以决定将哪个用于我将来可能正在处理的动画。

根据我在各种网站上看到的示例，看起来 gsap 应该在一般情况下表现更好，并且在有更多选项的情况下不那么不稳定，但对于这个简单的示例，这根本不是我所看到的，我会认为这样的事情对于 css 和 gsap 动画的用例来说都是很常见的。

我知道引用 here 的 Firefox 问题，您需要对动画应用旋转或未使用子像素渲染，因此我在 css 动画和 gsap 动画中都应用了旋转以尝试修复 Firefox 中的抖动。这确实有帮助，但当您比较 Firefox 或 Chrome 中的两个动画时，gsap 示例明显滞后。这两个动画并不完全以相同的缓动方式移动，但我认为它们足够接近，可以正确比较它们。

Firefox gsap 性能仍然比 Chrome 差很多，但 Chrome gsap 仍然每隔几次重复就会滞后，而在 Chrome 中，css 动画不会。在我看来，Firefox css 动画与 Chrome gsap 性能差不多。

这是代码笔，您可以自己查看，请注意，要正确查看它，您应该打开链接并展开窗口，它在至少 1920x1080 的分辨率下效果最佳:

http://codepen.io/apodworny/pen/dpkEQg

那我是不是做错了什么？是否有更多技巧来提高性能，例如 Firefox 旋转技巧？这只是 greensock 有问题的具体事情吗？任何帮助或见解将不胜感激。

谢谢!

相关的 HTML、CSS 和 JS:

HTML:

<div id="site-wrapper">
  <div class="css-animations">
    <div class="square">css</div>
    <div class="circle">css</div>
  </div>
  <div class="gsap-animations">
    <div class="gsap-square">gsap</div>
    <div class="gsap-circle">gsap</div>
  </div>
</div>

CSS:

@keyframes pulse {
    0%, 100% {
        transform: translate(100px, 0) rotate(0.01deg);
    }
    50% {
        transform: translate(1500px) rotate(0.01deg);
    }
}

@keyframes circle-pulse {
    0%, 100% {
        transform: translate(100px, 0) rotate(0.01deg);
    }
    50% {
        transform: translate(1500px) rotate(0.01deg);
    }
}

JS:

$( document ).ready(function() {
    var tl = new TimelineMax({
        repeat: -1
    });

    var tl2 = new TimelineMax({
        repeat: -1
    });
    var $square = $('.gsap-square');
    var $circle = $('.gsap-circle');

    tl.to($square, 1.5, {
        x: 1400,
        ease: Power1.easeOut,
        rotation:0.01
    })
    .to($square, 1.5, {
        x: 0,
        ease: Power1.easeOut,
        rotation:0.01
    });

    tl2.to($circle, 1.5, {
        x: 1400,
        ease: Power1.easeOut,
        rotation:0.01
    })
    .to($circle, 1.5, {
        x: 0,
        ease: Power1.easeOut,
        rotation:0.01
    });
});

Answer 1

这更像是一个同类比较(有点):http://codepen.io/anon/pen/BLJGwK?editors=0110

在我的系统上，我没有注意到平滑度方面的任何差异，但我意识到结果可能因系统、显卡等因素而异。

而且您的 GSAP 代码可以更加简洁(这是重点:)

var tl = new TimelineMax({repeat: -1});

tl.to('.gsap-square, .gsap-circle', 1.5, {
  x: 1500,
  ease: "quad"
}).to('.gsap-square, .gsap-circle', 1.5, {
  x:100,
  ease:"quad"
});

请记住:

• 您正在比较 CSS 的最佳可能场景和 JS 的最坏可能场景，因为如果您仅动画转换(或不透明度)，大多数现代浏览器会将其委托(delegate)给不同的线程。然而，这还有其他后果。参见 http://greensock.com/css-performance视频解释。在许多其他情况下，GSAP 实际上比 CSS 更快。
• 如果您甚至向动画添加一个其他属性(无关紧要，除了变换或不透明度之外的其他属性)，您将失去 Firefox 中单独的线程提升(整个事情，包括变换，返回到主线程...至少这是我的理解，它与上面文章中提到的同步问题有关)。
• GSAP 会通过 JS 自动为您进行 GPU 加速。
• 您可能想尝试将 will-change:transform 添加到您正在制作动画的元素。

据我交谈过的大多数人说，GSAP 相对于 CSS(和其他库)的真正优势在于:

• 工作流程。即使是中等复杂的动画，更改和实验也容易得多。全面控制各个方面。更多宽松的选择。连接洗涤器、seek()、reverse()、timeScale() 等。
• 兼容性。 GSAP 解决了大量的浏览器错误和不一致问题，如果您尝试使用 CSS 制作动画，这些问题和不一致问题会困扰您。
• 能力。 GSAP 能做的远比 CSS 多得多。这里不会让您感到厌烦，但它很广泛。部分列表位于 http://greensock.com/why-gsap/

是的，GSAP 针对性能进行了 super 优化。在这方面，它被广泛视为黄金标准。我不知道有什么更快的东西，尽管转换的 CSS 动画在这种情况下确实有优势。但坦率地说，我怀疑它在大多数现实世界场景中是否会引人注意。我总是鼓励人们自己做测试。

抱歉，如果这听起来像是推销。不是那个意思 - 我只是想正确设置上下文。有时我看到人们过于专注于一个特定的场景或用例，而忽略了一些可能值得考虑的非常重要的因素。