TweenMax 在平板电脑/智能手机上滚动不顺畅答案

【问题标题】：TweenMax not scrolling smoothly on tablets/smartphonesTweenMax 在平板电脑/智能手机上滚动不顺畅
【发布时间】：2014-08-18 12:37:36
【问题描述】：

我在我的网站中使用 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 上，这个动画看起来很糟糕。速度很慢，一点也不流畅。有没有人在我的代码中看到任何问题。我应该使用任何其他插件来使它在平板电脑/移动设备上更好地工作吗？

提前致谢

【问题讨论】：

对不起，我不能让这个 jsfiddle stackoverflow 代码在这里工作。

标签： jquery scroll tablet gsap scrollmagic

【解决方案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 设置动画属性，所以这样你有 GSAP 动画 translateY() 属性。还可以使用force3D:true，这样您就可以使用 2D 或 3D 变换来制作更流畅的动画。

希望这会有所帮助！ :)

【讨论】：