文章/答案/技术大牛

发布

社区首页 >问答首页 >JS动画表演中的“改变”和“transformZ(0)”

问JS动画表演中的“改变”和“transformZ(0)”
EN

Stack Overflow用户

提问于 2018-02-19 08:45:36

回答 1查看 343关注 0票数 1

当我使用will-change属性和transform3D()将动画元素分离到一个用于gpu呈现的新层时，我一直在尝试javascript动画，并注意到性能差异。当我试图动画元素的scaling时，就会发生这种情况，该元素还有一个border-radius css属性。科德芬

如果没有will-change，属性浏览器将执行额外的Rasterize (在屏幕截图上的光栅化thread1中)

对于will-change，不存在RasterizePaint操作(屏幕截图)。

当我试图在现实项目中一次动画化多个元素时，情况会变得更糟(尤其是在移动环境中会受到伤害)。(有意愿的改变，不愿改变)

所以问题是：will-change是如何设法提供这种优化的，即使它应该与transformZ(0) (为gpu呈现创建新层)做同样的事情。有没有办法不使用will-change来优化这个动画？

javascript

animation

gsap

will-change

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-15 08:35:48

will-change基本上和translateZ(0)黑客一样(从今天起)：它将元素拉出一个新的呈现层。不同的是，will-change告诉浏览器您的意图，即您将更改此属性；而对于translateZ(0)，这只是一个巧合的副作用。

因此，will-change只是一种更现代的方式来完成同样的事情，因此，它也是没有得到广泛的支持比三维变换。

可以想象，随着时间的推移，will-change将变得更加强大。我可以想象它被用于颜色变化(使用GPU着色器)，特定的定位变化(例如绝对定位元素的位置)，等等。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48862283

复制

相似问题

问JS动画表演中的“改变”和“transformZ(0)”
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS动画表演中的“改变”和“transformZ(0)”EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS动画表演中的“改变”和“transformZ(0)”
EN