Question

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

我用以下html创建了一个ferris

<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度？此外，我希望这无限循环。

谢谢。

Answer 1

尝试将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：Boolean - 如果为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在代码簿上的酷炫摩天轮动画：

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

希望这有帮助！

使用补间最大值进行旋转反转

1 个答案: