Question

我目前正尝试使用Tweenmax执行两个非常大（整页）div的缩放和移位。虽然我的方法有效，但在Chrome中却非常缓慢。

我认为这是因为Tweenmax使用的是Transform: Translate3d(x,y,z) Scale(x,y);而不是scale3d或matrix3d。无论如何强制Tweenmax使用matrix3d或scale3d？

我尝试过使用force3d:true但似乎没有效果。

这是我的代码，移位和缩放分开，以便于我自己阅读......

TweenMax.to('#background', 0.1, {scale: 1 + (0.05*dist_perc), delay: 0.01, force3D:true});
TweenMax.to('#foreground', 0.1, {scale: 1 + (0.05*dist_perc), delay: 0.01, force3D:true});

TweenMax.to('#background', 0.1, {x: (0.01*(x_mouse - cx_wind)), y: (0.01*(y_mouse - cy_wind)), delay: 0.01, force3D:true});
TweenMax.to('#foreground', 0.1, {x: (0.015*(x_mouse - cx_wind)), y: (0.015*(y_mouse - cy_wind)), delay: 0.01, force3D:true});

Answer 1

尝试添加 z 属性（translateZ），轻微转移到补间 z：0.001

TweenMax.to('#background', 0.1, {z:0.001, scale: 1 + (0.05*dist_perc), delay: 0.01, force3D:true});
TweenMax.to('#foreground', 0.1, {z:0.001, scale: 1 + (0.05*dist_perc), delay: 0.01, force3D:true});

TweenMax.to('#background', 0.1, {z:0.001, x: (0.01*(x_mouse - cx_wind)), y: (0.01*(y_mouse - cy_wind)), delay: 0.01, force3D:true});
TweenMax.to('#foreground', 0.1, {z:0.001, x: (0.015*(x_mouse - cx_wind)), y: (0.015*(y_mouse - cy_wind)), delay: 0.01, force3D:true});

看看是否有效。确保您使用的是 latest version of GSAP 。 force3D 现在有另一个名为 force3D的选项：“自动” ..更多信息可在 GSAP CSSPlugin 中找到。

此外， codepen 或 jsfiddle 示例非常有用，因此我们可以在上下文中查看您的代码并进行实时编辑。只是为了确保你没有任何其他CSS或JS导致它不能应用matrix3d（）

强制Matrix3d或Scale3d用于TweenMax？

1 个答案: