2012年6月12日火曜日

jqueryrotateのアニメーションが再生されない?

要素を回転アニメーションできるjQueryプラグインが
http://code.google.com/p/jqueryrotate/
ありまして、使ってみたのですがアニメーションの連結を行うとはじめのアニメーションが再生されない問題がありました。
しかも、特定のページだけ。
アニメーションの連結は.rotateの完了コールバックに次のアニメーションを突っ込んでいたのですが、間違っているのかと思って先日のタスクマネージャを作ってみたりしたわけなのですが、一向に改善されない。
まあ、はじめっからデバッガで追えばよかったのですが、追ってみたところさっさと完了コールバックが返ってきていました。
バグかと思ってソースを見ているとアニメーションが実時間でのみ処理されていまして、いわゆるフレームスキップしまくってアニメーションが再生されていないように見えていたわけでした。

ゲームを作る際に経験があると思うのですが、各状況で処理負荷が不定なのでそれを考慮してデルタタイムで処理書きますよね。
その際に最低フレームレート設定しませんか?
例えば、フレームレートが60fpsより高い際は垂直同期とって、60-30fpsの時は垂直同期無視して、30fpsを切ったら処理落ちさせて内部のデルタタイムを33.3ms(30pfs)以下にしないとか(力学処理なんかはデルタの振れ幅を小さくしたり固定したいしますけども)。

それが必要なようでした。
なので、

    _animate:function()
    {
         var actualTime = +new Date;
         var checkEnd = actualTime - this._animateStartTime > this._parameters.duration;

         // TODO: Bug for animatedGif for static rotation ? (to test)
         if (checkEnd && !this._parameters.animatedGif)
         {
             clearTimeout(this._timer);
         }
         else
         {
             if (this._canvas||this._vimage||this._img) {
                 var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration);
                 this._rotate((~~(angle*10))/10);
             }
のところを


     _animateStart:function()
    {
       .......

       this._animateLastTime = this._animateStartTime;

    }
     _animate:function()
    {
      var minTime = 33;
         var intervalTime = +new Date - this._animateLastTime;
         if(minTime<intervalTime) intervalTime = minTime;
         this._animateLastTime += intervalTime;
         var checkEnd = this._animateLastTime - this._animateStartTime > this._parameters.duration;

         // TODO: Bug for animatedGif for static rotation ? (to test)
         if (checkEnd && !this._parameters.animatedGif)
         {
            clearTimeout(this._timer);
         }
         else
         {
             if (this._canvas||this._vimage||this._img) {
                 var angle = this._parameters.easing(0, this._animateLastTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration);
                 this._rotate((~~(angle*10))/10);
             }


とかにいじってみました。
minTime =33ms以下の際は処理落ちさせていることを望んでいます。

ひとまず、軽く動作は確認できました。


0 件のコメント:

コメントを投稿