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

【问题标题】：GSAP animations: scale vs height and widthGSAP 动画：比例与高度和宽度
【发布时间】：2015-08-14 04:07:16
【问题描述】：

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

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

【问题讨论】：

标签： javascript html css gsap

【解决方案1】：

使用 Scale Vs Width/Height 的区别之一是使用 CSS，但您必须记住，使用 Scale 时，它将从对象的中心调整大小，而使用 Width/Height 时，它将从左上角开始.除非你改变变换原点。

一个主要因素是您要调整大小的对象的内容，如果您使用 Scale 并且对象有内容，它也会缩放里面的所有内容，而 Width/Height 则不会。

【讨论】：

您可以轻松设置缩放的变换原点：scaleX:2.0, transformOrigin:"50% 50%"

【解决方案2】：

据我所知，scaleX 和 scaleY 所做的是他们在后台使用 CSS 的 transform，通常，由于亚像素渲染，使用变换会产生更平滑的结果。此外，如果你在同一个元素上添加force3D: true，它会强制它在自己的 GPU 层上渲染它，因此硬件加速。发生这种情况是因为它将translate3d: (0px, 0px, 0px) 添加到同一个元素上。所以在我看来，处理transform 相关属性要好得多。

虽然，this article by Paul Irish 谈到移动元素（即使用 translate 与 top 和 left 移动），但我相信在我们的案例中也是如此。

这是一个快速的jsFiddle 供您使用。

【讨论】：