Loading ...
Sorry, an error occurred while loading the content.

Syncing Animations

Expand Messages
  • Pete
    While I was writing an animation sequencer, I noticed that the Anim tweening seems to run a bit asynchronously. The animations aren t quite exactly matched up.
    Message 1 of 1 , Dec 12, 2006
    • 0 Attachment
      While I was writing an animation sequencer, I noticed that the Anim tweening seems to run
      a bit asynchronously. The animations aren't quite exactly matched up. As an example, I
      created a masked image which moves around the screen, and requires a containing image
      to animate exactly in the opposite direction. Firefox or Safari really shows the problem.

      Here's an example: http://www.pan-fried.com/mask/

      Yep, the image tween is jittering compared to the outer mask - their frames aren't
      matching up exactly.

      So I looked into the AnimMgr.run method and made a couple changes, rearranged a few
      things, to make the tween's currentFrame match up.

      Here's the result: http://www.pan-fried.com/mask2/

      What I did was find the slowest animation, and corrected all the other animations'
      currentFrame attribute to that value. Granted, the animations have the potential to be a lot
      more jittery because it matches all the animations to the slowest, but the point is they are
      jittery together.

      For those interested, here's overridden method:

      /* tweaked version */
      this.run = function() {
      //find the *synced* currentFrame
      var syncedCurrentFrame = 0;
      for (var i = 0, len = queue.length; i < len; ++i) {
      var tween = queue[i];
      if (tween.useSeconds) {
      correctFrame(tween);
      }
      syncedCurrentFrame = Math.max(syncedCurrentFrame, tween.currentFrame);
      }

      for (var i = 0, len = queue.length; i < len; ++i) {
      var tween = queue[i];
      if ( !tween || !tween.isAnimated() ) { continue; }

      if (tween.currentFrame < tween.totalFrames || tween.totalFrames === null){
      tween.currentFrame = syncedCurrentFrame + 1;
      tween._onTween.fire();
      }
      else { YAHOO.util.AnimMgr.stop(tween, i); }
      }
      };

      Pete
    Your message has been successfully submitted and would be delivered to recipients shortly.