如何连续执行两个 Tweens 影响 Kinetic.js 中的同一属性？

Question

我正在使用 Kinetic.js 制作动画，该动画需要先缩放，然后立即几乎“未缩放”。我看到几乎是因为第二个比例应该与原始比例值略有不同，所以我实际上不能使用this.reverse()。我试图制作第二个 Tween，它在第一个的 onFinish 函数期间被调用，但我似乎无法操纵它们的比例。这是我正在尝试的代码：

var waveScaleAnimation=new Kinetic.Tween({
        node:waves,
        scaleY:newWaveScale,
        duration:waveScaleDuration,
        onFinish:function(){
            reverseWaveScaleAnimation.play();
        }
    });
    var reverseWaveScaleAnimation=new Kinetic.Tween({
        node:waves,
        scaleY:1,
        duration:waveScaleDuration
    });

真正奇怪的是reverseWaveScaleAnimation tween 不是那个不起作用的——如果我让它保持现在的样子，来自waveScaleAnimation 的scale 将被忽略（所以waves 只是在waveScaleAnimation 期间保持其原始大小，然后在reverseWaveScaleAnimation 期间将Y 缩放为1。如果我从reverseWaveScaleAnimation 中取出scaleY，并将其替换为另一个属性（假设opacity） ，这两个 Tweens 正常工作（waves 的 scaleY 在 waveScaleAnimation 期间更改，其不透明度在 reverseWaveScaleAnimation 期间更改。如何让两个动画在每个期间将 scaleY 更改为其对应的值补间？

Answer 1

我的解决方案是在 onFinish 函数中实例化补间：

var waveScaleAnimation = new Kinetic.Tween({
  node:waves,
  scaleY:newWaveScale,
  duration:waveScaleDuration,
  onFinish: function () {
    var reverseWaveScaleAnimation = new Kinetic.Tween({
      node:waves,
      scaleY: 1,
      duration:waveScaleDuration,
    });
    reverseWaveScaleAnimation.play();
  }
});

在此处查看我的示例：jsfiddle

对此的解释可能是原始节点在执行 reverseWaveScaleAnimation 补间之前返回到其原始状态，这可能是因为当您在外部实例化 reverseWaveScaleAnimation 时，它期望节点处于其原始状态。但是，如果您在 onFinish 函数中实例化补间，则补间期望节点处于 waveScaleAnimation 补间完成时所处的状态。

希望这是有道理的，因为我的解释不是很详细，也许其他人可以提供有关补间的更多详细信息，因为我不经常使用它们。

编辑：实际上，这解释了您从补间 scaleY 切换到 opacity 的场景。我假设最初您的节点将从1.0 opacity 开始，但是当您将它向0.0 opacity 进行补间时，该节点最初从1.0 opacity 开始，因此补间从1.0 opacity 开始并朝0.0 opacity。因此，似乎补间在按预期工作 onFinish，但实际上，它与您在补间时的工作相同 scaleY。