Question

我在我的网站中使用ScrollMagic来制作动画。你可以在这里看到动画： http://jsfiddle.net/VRBG2/2/

我正在使用的代码可以在jsfidde中看到类似于：

 var topToBottom = new TimelineMax()
  .add(TweenMax.to("#section3", 1, {marginTop: "0"}));

 var scene = new ScrollScene({
   triggerElement: "#section1",
})
.addTo(controller)
.setTween(topToBottom);

我的问题比平板电脑/智能手机，iphone，iPad和Android这个动画看起来非常糟糕。非常缓慢而且根本不光滑。有没有人在我的代码中看到任何问题。我应该使用任何其他插件来使其在平板电脑/手机中更好地工作吗？

提前致谢

Answer 1

尝试添加autoRound:false

由于您要为margin-top CSS属性设置动画，因此它不会在子像素级别设置动画。通过使用autoRound:false，它将在子像素级别上设置动画。即margin-top：100.9999px

示例：http://jsfiddle.net/zb754q92/

var topToBottom = new TimelineMax()
.add(TweenMax.to("#section3", 1, {marginTop: "0", autoRound:false}));

autoRound是GSAP CSSPlugin

的一部分

取自GSAP CSSPlugin Docs：

默认情况下，CSSPlugin会将补间期间的像素值和zIndex舍入为最接近的整数（中间值），因为它可以提高浏览器性能，但如果您要禁用该行为，请在css对象中传递autoRound：false。您仍然可以使用RoundPropsPlugin手动定义要舍入的属性。

如果您没有注意到手机上的差异。然后你可以考虑动画y 属性，所以这样你就可以为translateY()属性设置GSAP动画。并且还使用force3D:true，因此您可以使用2D或3D变换设置动画以获得更流畅的动画。

希望这有帮助！：）

TweenMax在平板电脑/智能手机上无法顺畅滚动

1 个答案: