javascript - 在 TweenMax 中向定向旋转添加完整旋转(360 度)

Question

我正在创建一个旋转木马，我正在使用 GSAP 的 TweenMax 及其定向旋转插件来旋转旋转木马。

旋转木马缓慢旋转，直到用户单击“开始”按钮，然后旋转木马到第一个元素。我的问题是我想为元素添加一个完整的旋转，但即使我为旋转目标添加 360 度，它也不会旋转。我认为度数更像是坐标而不是距离。

这就是最初旋转到目标元素的代码:

TweenMax.to( carousel, 1, { directionalRotation:{ rotationY: Math.degrees( item.eq( 0 ).angle + Math.PI / 2 ) + "_cw" }, ease: Expo.easeInOut, onComplete: stopUpdateAppearance });

这是我认为可以解决问题的方法(注意 360):

TweenMax.to( carousel, 1, { directionalRotation:{ rotationY: Math.degrees( item.eq( 0 ).angle + Math.PI / 2 ) + 360 + "_cw" }, ease: Expo.easeInOut, onComplete: stopUpdateAppearance });

但这没有用。于是我尝试了:

TweenMax.to( carousel, 1, { directionalRotation:{ rotationY: "+=360_cw" }, ease: Expo.easeInOut });
TweenMax.to( carousel, 1, { directionalRotation:{ rotationY: Math.degrees( item.eq( 0 ).angle + Math.PI / 2 ) + "_cw" }, ease: Expo.easeInOut, onComplete: stopUpdateAppearance });

这与旋转到起始位置的结果相同。

我对 GSAP 和 TweenMax 不太熟悉，我无法判断这是我的语法还是我的方法。你怎么看？

Answer 1

尝试从 360 度中减去当前轮播旋转(在单击按钮时)。

例如

var currentRotation = 50;
TweenMax.to( carousel, 1, { directionalRotation:{rotationY:"+=" + (360-currentRotation) + "_cw"}, ease: Expo.easeInOut });

附言只是猜测:

如果你不想专门绕 Y 轴旋转，也许你应该删除旋转对象 {rotationY} 并改用它:

TweenMax.to( carousel, 1, { directionalRotation:"+=" + (360-currentRotation) + "_cw", ease: Expo.easeInOut }); 

希望对你有帮助