javascript - 使用补间最大值反转

关于我的简短介绍-我是动画和javascript / jquery的新手。

我用以下html创建了一个摩天轮

<div class="ferris-wrapper">
  <div class="ferris-stand"></div>
  <div id="ferris-wheel"></div>
</div>

我当时正在玩tweenmax，并且能够旋转摩天轮

var ferris = document.getElementById("ferris-wheel");
TweenLite.from(ferris, 0, { rotation:0, ease:Linear.easeNone } );
TweenLite.to(ferris, 10, { rotation:360, ease:Linear.easeNone } );

我的问题是-

摩天轮旋转360度后。如何使它反向翻转360度？
另外，我希望它无限循环。

谢谢。

最佳答案

尝试在补间中添加yoyo:true和repeat:-1

var ferris = document.getElementById("ferris-wheel");
TweenMax.from(ferris, 0, { rotation:0, yoyo:true, repeat:-1, ease:Linear.easeNone } );
TweenMax.to(ferris, 10, { rotation:360, yoyo:true, repeat:-1, ease:Linear.easeNone } );

您必须使用TweenMax才能使用yoyo


  yoyo：布尔值-如果为true，则每个其他重复周期将以相反的方向运行，以便补间看起来像是来回移动（向前然后向后）。但是，这对“反向”属性没有影响。因此，如果重复为2并且yoyo为假，则它将看起来像：开始-1-2-3-1-2-3-1-2-3-结束。但是，如果yoyo是正确的，它将看起来像：开始-1-2-3-3-2-1-1-2-3-结束。


yoyo:true使补间来回移动，在每个重复上来回交替。

repeat:-1使您的动画永远循环

参考：http://greensock.com/docs/#/HTML5/GSAP/TweenMax/

这也是GreenSock在Codepen上很酷的摩天轮动画：

http://codepen.io/GreenSock/details/wBbKs

希望这可以帮助！