2

我正在使用 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补间不是不起作用的——如果我让它保持现在的状态，则scalefrom the 将waveScaleAnimation被忽略（所以在1 期间。如果我取出，并将其替换为另一个属性（比方说），则两个 Tweens 可以正常工作（在期间更改了 of 并且在 期间更改了它的不透明度。我怎样才能让两个动画都将其更改为每个补间期间的相应值？waveswaveScaleAnimationreverseWaveScaleAnimationscaleYreverseWaveScaleAnimationopacityscaleYwaveswaveScaleAnimationreverseWaveScaleAnimationscaleY

4

1 回答 1

3

我的解决方案是在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 opacity0.0 opacityonFinishscaleY

于 2013-07-10T15:35:58.477 回答