javascript - GSAP scaleX 在时间线中出现无序

Question

我是 GSAP 新手，正在使用 GSAP scaleX 和 x 组装一枚 2.5D 旋转硬币。

硬币的意思是a)在反面“旋转”，然后b)从反面旋转出来，然后c)在正面旋转，然后d)从正面旋转出来，然后循环该序列再次开始尾部侧的旋转。

我已经获得了 c) 处的动画，但是当我尝试使用 scaleX 启动 d) 时，时间线发生了一些变化，硬币的“正面”一侧出现在动画一开始。

我在这里添加了一个代码笔:https://codepen.io/bamartelly/pen/RgayML

如果您取消注释第 103 至 108 行(也粘贴在下面)，当我尝试开始实现步骤 d) 时，您会看到动画中断。

      .fromTo(coin.heads, flipTime,{
        scaleX:1,
        x:0
      } , {
        scaleX:0,
        x:8
      }, "headEnd")

非常感谢任何帮助。谢谢!

Answer 1

我怀疑这是一个立即渲染的事情 - 请参阅 http://greensock.com/immediateRender 。尝试在 fromTo() 补间中设置immediateRender:false。

补间快乐!