javascript - 负旋转动画 (jQuery GSAP)

Question

我在动画变换rotateX 和rotateY 时遇到问题。我正在使用 GSAP jQuery 插件。

基本上执行这个:

$(element).animate({transform: "rotateX(-180deg)"});

与执行效果相同:

$(element).animate({transform: "rotateX(180deg)"});

如果您想知道的话，我确实已经建立了观点。

是否有一种特殊的方法必须定义负值，或者这是一个错误？

更新:我发现了这里提到的属性“shortRotationX”和“shortRotationY”:http://codepen.io/GreenSock/pen/ydIgf

但这似乎是一个临时解决方法。我想知道使用 jQuery + GSAP 制作旋转动画的正确方法是什么。 感谢你们! 凯里尔

Answer 1

这个问题已在 GreenSock 论坛 http://forums.greensock.com/topic/9099-cannot-animate-rotate-negative-jquery-gsap/#entry36552 中得到解答。

就浏览器的变换矩阵而言，180 度旋转与 -180 度旋转相同(使用 getComputedStyle() 亲自查看)，因此除非您利用 GS​​AP 的 native 变换属性，否则无法真正辨别差异“rotationX”、“rotation”、“rotationY”等。当您这样做时，GSAP 可以为您正确跟踪所有内容。另外，它对速度进行了更优化。所以:

//OLD
$(element).animate({transform: "rotateX(-180deg)"});

//NEW
$(element).animate({rotationX:-180});

//or use GSAP's native API:
TweenLite.to("#element", 0.4, {rotationX:-180});

此外，自从我们推出 DirectionalRotationPlugin 以来，“shortRotationX”就已被弃用，它使用更直观的语法，也可用于指定顺时针或逆时针移动:

//OLD
{shortRotationX:-180}

//NEW
{rotationX:"-180_short"}

//and to specify a clockwise direction:
{rotationX:"-180_cw"}

//or counter-clockwise:
{rotationX:"-180_ccw"}