2

私は、Kinetic.js を使用してアニメーションに取り組んでいます。これは、何かをスケーリングし、その後すぐにほとんど「スケーリングしない」必要があります。2番目のスケールは元のスケール値とわずかに異なるはずなので、実際には使用できないため、ほとんど見ましたthis.reverse()。最初の関数の実行中に呼び出される 2 番目の 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が機能しないものではないということです-今のままにしておくと、からscaleのからを取り出し、それを別の属性 ( としましょう) に置き換えると、2 つの Tweens が正しく機能します ( のが の間に変更され、不透明度が の間に変更されます。両方のアニメーションで を に変更するにはどうすればよいですか?各トゥイーン中の対応する値?waveScaleAnimationwaveswaveScaleAnimationreverseWaveScaleAnimationscaleYreverseWaveScaleAnimationopacityscaleYwaveswaveScaleAnimationreverseWaveScaleAnimationscaleY

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

私の説明はあまり詳細ではないので、それが理にかなっていることを願っています。おそらく、トゥイーンはあまり使用しないので、他の誰かがトゥイーンについての詳細を提供できるかもしれません。

EDIT：scaleY実際には、トゥイーンからに切り替えるシナリオを説明していますopacity。もともとあなたのノードはで始まると仮定しています1.0 opacityが、それをトゥイーンすると0.0 opacity、ノードはもともとで始まったので、トゥイーンがで始まり 、トゥイーンに向かって1.0 opacityトゥイーンする問題はありません。したがって、トゥイーンは意図したとおりに動作しているように見えましたが、実際には、トゥイーンを行っていたときと同じように動作していました。1.0 opacity0.0 opacityonFinishscaleY

于 2013-07-10T15:35:58.477 に答える