javascript - 如何使用 TweenMax (Greensock) 水平翻转 SVG？

Question

我正在尝试使用 Greensock 制作一些动画，其余的都可以，只是我不确定如何按照我想要的方式翻转 SVG。

我的代码是这样的:

.to($tri_yellowgreen, 0.25, {rotationY:180, transformOrigin:"left top"})

..但是箭头移动到底部并且没有在同一位置翻转。

CodePEN 演示: http://codepen.io/anon/pen/eJOBma

我想从这里开始:

...对此(黄绿色箭头翻转):

Answer 1

我认为解决方案可以替代这个:

.to($tri_yellowgreen, 0.25, {rotationY:180, transformOrigin:"left top"})

这样:

.fromTo($tri_yellowgreen, 0.25, {transformOrigin:'right top'}, {rotationY: 180})

基本上，transformOrigin 必须在补间开始之前应用，因此使用 .fromTo() 方法而不是 .to() 调用。