Question

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

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补间不是那个不起作用的东西 - 如果我现在离开它，scale中的waveScaleAnimation会被忽略（因此waves只会在waveScaleAnimation期间保持原始大小，然后在reverseWaveScaleAnimation期间将Y缩放为1.如果我从{{1}中取出scaleY }，并将其替换为另一个属性（假设为reverseWaveScaleAnimation），两个Tween正常工作（opacity的{{1}}在scaleY期间发生了变化，其不透明度发生了变化在waves期间。如何在每个补间期间获取两个动画以将waveScaleAnimation更改为相应的值？

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时的效果相同。

如何在Kinetic.js中影响相同属性的行中执行两个Tween？

1 个答案: