1

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

提前致谢

4

1 回答 1

1

尝试添加autoRound:false

由于您正在为margin-topCSS 属性设置动画，因此它不会在子像素级别上进行动画处理。通过使用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 文档：

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

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

希望这可以帮助！:)

于 2014-08-27T18:14:56.957 回答