0

永遠に繰り返されるバウンス アニメーションを作成しようとしています。私が抱えている問題は、スナップがコールバックに入れたアニメーションを実行していないように見えることです。Snap back 0.1.1 でこの問題を説明している github にいくつかの問題があるようですが、それ以降はクローズされています。他の誰かがこのようなものを見たことがありますか?

アニメーションの最初の部分を実行してから停止する現在のコード:

var slight_bounce = function(body_part, transform1, transform2){
    body_part.stop().animate({ 
      transform: transform1
    }, 1000,
    function() { 
      body_part.animate({ 
        transform: transform2
      });
      slight_bounce(body_part, transform1, transform2); // Repeat this animation so it appears infinite.
    }
    );
  }

  slight_bounce(hat, bounce, bounce_back);
4

1 に答える 1

2

コードにいくつかの間違いがあります...

最初にパラメーターで、イージング メソッド (mina.bounce など) が抜けていたので、それを含める必要があります。

2 番目の内部関数には、アニメーション パラメーターの一部としてコールバックがないため、適切なタイミングで呼び出されないため、これらすべてが少し間違っています。

jsfiddle

var s = Snap(400, 620);

var slight_bounce = function(body_part, transform1, transform2 ){
    body_part.stop().animate({ 
       transform: transform1
    }, 1000, mina.bounce,

      function() { 
          body_part.animate({ 
              transform: transform2
          },1000,mina.bounce,
            function() {
                 slight_bounce(body_part, transform1, transform2);
            })

       }
   );
};

var hat = s.rect(100,100,100,100);
var bounce = 't0,100';
var bounce_back = 't0,0';

slight_bounce(hat, bounce, bounce_back);

これは非常によくある質問なので、コールバック関数のメソッドをそのように書くと従うのが少し面倒なので、少しだけ別の方法で書き直します。

これはまったく同じことを行いますが、もう少し構造化されていることがわかります。

jsfiddle

function startBounce( body_part, transform1, transform2 ) {
    body_part.stop().animate({ 
                transform: transform1
    }, 1000, mina.bounce, endBounce.bind(null, body_part, transform1, transform2));
}

function endBounce( body_part, transform1, transform2 ) {   
    body_part.animate({ 
                transform: transform2
    }, 1000, mina.bounce, startBounce.bind(null, body_part, transform1, transform2));
}        

var hat = s.rect(100,100,100,100);
var bounce = 't0,100';
var bounce_back = 't0,0';

startBounce(hat, bounce, bounce_back);
于 2014-06-13T09:14:53.990 に答える