GSAP scaleX 在时间轴中出现乱序

Question

我是 GSAP 的新手，我正在使用 GSAP scaleX 和 x.

组合一个 2.5D 旋转硬币

硬币意味着 a) "rotate" 在反面，然后 b) 旋转出反面，然后 c) 旋转出正面，然后 d) 旋转出正面，并且然后序列的循环再次开始尾部的旋转。

我已经得到了 c) 的动画，但是当我尝试使用 scaleX 开始 d) 时，时间线发生了一些变化，硬币的 "heads" 面从动画的开头。

我在这里包含了一个codepen：https://codepen.io/bamartelly/pen/RgayML

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

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

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

Answer 1

我怀疑这是一个 immediateRender 问题 - 请参阅 http://greensock.com/immediateRender。尝试在 fromTo() 补间上设置 immediateRender:false。

补间快乐！