与这个简单的例子中的css动画相比，Greensock (GSAP)更不流畅/更粗糙。有什么办法可以改进吗？

Question

我是新手，所以如果我做了什么可怕的错误，那么请纠正我，但这是一个非常简单的例子。我只是尝试比较css动画的性能与Firefox和Chrome中的gsap动画，以决定我将来可能会使用哪一种动画。

基于我在不同网站上看到的例子，看起来gsap在总体上应该表现得更好，并且在更多的选项上不那么摇摇欲坠，但对于这个简单的例子，我完全没有看到，而且我认为这样的东西对于css和gsap动画的用例来说都是非常常见的。

我知道引用这里的火狐问题，您需要对动画应用旋转，或者不使用亚像素渲染，所以我在css动画和gsap动画中都应用了旋转，以尝试修复火狐中的抖动。这确实有帮助，但当你比较火狐或Chrome的两个动画时，gsap的例子明显滞后。这两种动画并不完全是在同一宽松的情况下进行的，但我认为这已经足够接近了，它们可以恰当地进行比较。

Firefox gsap的性能仍然比Chrome差得多，但是Chrome仍然每隔几次重复一次左右，而在Chrome中css动画就不会。在我看来，火狐css动画和Chrome的性能差不多。

下面是代码页，您可以自己查看，请注意，要正确地查看它，您应该打开链接并展开窗口，并且它在至少1920x1080的分辨率上工作得最好：

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

那我是不是做错什么了？是否有更多的技巧来提高性能，比如Firefox的旋转技巧？这仅仅是格林斯科克有问题做的具体事情吗？任何帮助或洞察力都将不胜感激。

谢谢!

相关的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);
    }
}

联署材料：

$( 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最糟糕的场景，因为如果您只动画转换(或不透明度)，那么大多数现代浏览器都会将其委托给不同的线程。然而，这还有其他的后果。有关视频说明，请参见http://greensock.com/css-performance。在许多其他情况下，GSAP实际上比CSS更快。
• 如果您在动画中添加了其他一个属性(不管是什么，除了转换或不透明之外)，那么在Firefox中就会失去单独的线程推进(包括转换在内的整个过程可以追溯到主thread...at --至少这是我的理解，这与上面文章中提到的同步问题有关)。
• GSAP自动完成GPU-通过JS为您加速。
• 您可能需要尝试添加威尔-更改:转换到您正在动画的元素。

据大多数与我交谈的人说，GSAP相对于CSS (和其他库)真正的好处在于：

• 工作流程。对于复杂的动画来说，改变和实验要容易得多。对各个方面的全面控制。更多的宽松选择。连接洗涤器、查找()、反向()、timeScale()等。
• 兼容性。GSAP可以解决大量的浏览器错误和不一致之处，如果你尝试使用CSS动画的话，它们会咬你一口。
• 能力。GSAP可以做的远远超过CSS。这里的清单不会让你感到厌烦，但它很广泛。部分列表在http://greensock.com/why-gsap/

是的，GSAP是为性能而优化的超级。在这方面，它被广泛视为金本位。我不知道有任何更快的，虽然CSS动画的转换确实有一个优势，在这个场景。但坦率地说，我怀疑它在大多数真实世界的场景中都是不可忽视的。我总是鼓励人们做他们自己的测试。

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