GSAP动画：比例与高度和宽度

Question

当使用GSAP执行转换，其中元素在两个维度上均等缩放时，似乎可以选择使用scale，还是同时使用height和width。

哪个更好，因为会导致更高的帧速率？或者，如果元素/其他过渡/ DOM / CSS /浏览器/处理器/ GPU（/其他任何东西？）上的条件使一个更好，而另一个是什么？

Answer 1

使用Scale Vs Width / Height的一个不同之处在于使用CSS但是在使用Scale时必须记住它会从对象的中心调整大小，而使用Width / Height它将从​​左上角开始。除非您更改变换Origin。

一个主要因素是要调整大小的对象的内容，如果使用“缩放”并且对象具有内容，则它也会缩放内部的所有内容，而“宽度/高度”则不会。

Answer 2

根据我的理解，scaleX和scaleY做的是他们在后台使用CSS transform，一般来说，使用变换会产生更加平滑的结果，因为子像素渲染。此外，如果您在同一元素上添加force3D: true，它会强制它在自己的GPU层上渲染它，因此硬件会加速。这是因为它将translate3d: (0px, 0px, 0px)添加到同一元素上。所以在我看来，操纵transform相关属性要好得多。

尽管 this article 保罗爱尔兰 讨论移动元素（即与translate vs top和left一起移动），但我相信在我们的案例中也是如此。

这是一个快速的jsFiddle供你玩。