Question

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

基于我在各种网站上看到的例子，看起来gsap看起来一般表现得更好，而且选择更少，但是对于这个简单的例子，这根本不是我所看到的，而我我认为这样的事情对于使用css和gsap动画的情况都会很常见。

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

Firefox gsap的性能仍然比Chrome差很多，但Chrome gsap仍然落后于每隔几个重复左右，而在Chrome中，css动画却没有。在我看来，Firefox css动画与Chrome gsap性能一样好。

这是codepen，所以你可以自己看看，请注意要正确看到它你应该打开链接并展开你的窗口，并且它将在至少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最糟糕的情况，因为如果您仅动画转换（或不透明），大多数现代浏览器会将其委托给不同的线程。然而，还有其他后果。有关视频说明，请参阅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 超级针对性能进行了优化。在这方面，它被广泛视为黄金标准。我不知道任何更快的事情，尽管变换的CSS动画确实在这一场景中具有优势。但坦率地说，我怀疑它在大多数现实场景中都会引人注目。我总是鼓励人们自己做测试。

对不起，如果这听起来像是销售推销。不是那个意思 - 我只是想正确设置上下文。有时我看到人们过度关注某个特定场景或用例，他们会错过一些可能值得考虑的重要因素。

与简单示例中的css动画相比，Greensock（GSAP）更不平滑/更生涩。有没有办法改善它？

1 个答案: