Animation repeat and yoyo support.

Author: photonstorm

v3/src/animation/AnimationManager.js

@@ -36,11 +36,7 @@ AnimationManager.prototype = {
         this.textureManager = textureManager;
     },
 
-    //  add frame name based animation
-    //  add frame index based animation
-    //  add bone based animation
-    //  add animation from json data
-
+    //  config format:
     //  {
     //      frames: [
     //          { key: textureKey, frame: textureFrame },
@@ -53,11 +49,11 @@ AnimationManager.prototype = {
     //      delay: integer
     //      repeat: -1 = forever, otherwise integer
     //      repeatDelay: integer
-    //      yoyo: boolean,
+    //      yoyo: boolean
+    //      hideOnComplete: boolean
     //      onStart: function
     //      onRepeat: function
     //      onComplete: function,
-    //      
     //      transitions: [
     //          {
     //              key: string <- key of the animation to blend with,

v3/src/animation/frame/Animation.js

@@ -7,27 +7,10 @@ var Animation = function (manager, key, config)
 
     this.key = key;
 
-    //      frames: [
-    //          { key: textureKey, frame: textureFrame },
-    //          { key: textureKey, frame: textureFrame, duration: float },
-    //          { key: textureKey, frame: textureFrame, onUpdate: function }
-    //      ],
-    //      framerate: integer,
-    //      duration: float (seconds, optional, ignored if framerate is set),
-    //      skipMissedFrames: boolean,
-    //      delay: integer
-    //      repeat: -1 = forever, otherwise integer
-    //      repeatDelay: integer
-    //      yoyo: boolean,
-    //      onStart: function
-    //      onRepeat: function
-    //      onComplete: function,
-
     //  Extract all the frame data into the frames array
     this.frames = GetFrames(manager.textureManager, GetObjectValue(config, 'frames', []));
 
-    //  Scale the time (make it go faster / slower) >>> move to Animation Component?
-    this.timeScale = 1;
+    this.firstFrame = this.frames[0];
 
     //  The frame rate of playback in frames per second (default 24 if duration is null)
     this.framerate = GetObjectValue(config, 'framerate', null);
@@ -92,8 +75,8 @@ Animation.prototype = {
             startFrame = 0;
         }
 
-        component.currentAnim = this;
-        component.currentFrame = this.frames[startFrame];
+        component.updateAnimation(this);
+        component.updateFrame(this.frames[startFrame]);
     },
 
     checkFrame: function (index)
@@ -105,36 +88,100 @@ Animation.prototype = {
     {
         //  When is the next update due?
         var frame = component.currentFrame;
+        var diff = component.accumulator - component.nextTick;
 
-        component.nextTick = this.msPerFrame + frame.duration;
+        component.accumulator = diff;
+        component.nextTick = (this.msPerFrame + frame.duration) * component.timescale;
     },
 
-    setFrame: function (component)
+    nextFrame: function (component)
     {
-        //  Example data:
-        //  timestamp = 2356.534000020474
-        //  frameDelta = 17.632333353807383 (diff since last timestamp)
-
-        //  Work out which frame should be set next on the child, and set it
-
         var frame = component.currentFrame;
 
-        var diff = component.accumulator - component.nextTick;
+        //  TODO: Add frame skip support
 
         if (frame.nextFrame)
         {
-            component.currentFrame = frame.nextFrame;
+            component.updateFrame(frame.nextFrame);
+
+            this.getNextTick(component);
+        }
+        else
+        {
+            //  We're at the end of the animation
+
+            //  Yoyo? (happens before repeat)
+            if (this.yoyo)
+            {
+                component.forward = false;
+            }
+            else if (component.repeatCounter > 0)
+            {
+                //  Repeat (happens before complete)
+                this.repeatAnimation(component);
+            }
+            else
+            {
+                //  OnComplete
+                component.stop();
+            }
+        }
+    },
+
+    repeatAnimation: function (component)
+    {
+        component.repeatCounter--;
+
+        component.forward = true;
+
+        component.updateFrame(this.firstFrame);
 
-            component.updateFrame();
+        this.getNextTick(component);
 
-            component.accumulator = diff;
+        component.nextTick += (this.repeatDelay * 1000) * component.timescale;
+
+        //  OnRepeat
+    },
+
+    previousFrame: function (component)
+    {
+        var frame = component.currentFrame;
+
+        //  TODO: Add frame skip support
+
+        if (frame.prevFrame)
+        {
+            component.updateFrame(frame.prevFrame);
 
             this.getNextTick(component);
         }
         else
         {
-            //  We're at the end of the animation
-            component.stop();
+            //  We're at the start of the animation
+
+            if (component.repeatCounter > 0)
+            {
+                //  Repeat (happens before complete)
+                this.repeatAnimation(component);
+            }
+            else
+            {
+                //  OnComplete
+                component.stop();
+            }
+        }
+    },
+
+    setFrame: function (component)
+    {
+        //  Work out which frame should be set next on the child, and set it
+        if (component.forward)
+        {
+            this.nextFrame(component);
+        }
+        else
+        {
+            this.previousFrame(component);
         }
     },
 

v3/src/checksum.js

@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: 'fa396890-1994-11e7-861e-87bce096a6e5'
+build: '63ce9e00-199b-11e7-a808-a7360c964cd7'
 };
 module.exports = CHECKSUM;

v3/src/components/Animation.js

@@ -19,15 +19,38 @@ var Animation = function (parent)
     //  Reference to the Phaser.AnimationFrame object
     this.currentFrame = null;
 
-    //  Timing playhead values
+    //  Scale the time (make it go faster / slower)
+    this.timescale = 1;
+
+    //  Playhead values
+
+    //  Move the playhead forward (true) or in reverse (false)
+    this.forward = true;
+
     this.accumulator = 0;
+
     this.nextTick = 0;
+
+    this.repeatCounter = 0;
 };
 
 Animation.prototype.constructor = Animation;
 
 Animation.prototype = {
 
+    updateAnimation: function (animation)
+    {
+        this.currentAnim = animation;
+    },
+
+    updateFrame: function (animationFrame)
+    {
+        this.currentFrame = animationFrame;
+
+        this.parent.texture = animationFrame.frame.texture;
+        this.parent.frame = animationFrame.frame;
+    },
+
     load: function (key, startFrame)
     {
         if (startFrame === undefined) { startFrame = 0; }
@@ -39,8 +62,6 @@ Animation.prototype = {
 
         //  Load the new animation in
         this.animationManager.load(this, key, startFrame);
-
-        this.updateFrame();
     },
 
     play: function (key, startFrame)
@@ -49,24 +70,22 @@ Animation.prototype = {
 
         this.load(key, startFrame);
 
+        //  Move to reset?
         this.accumulator = 0;
+        this.nextTick = 0;
+
+        //  Should give us 9,007,199,254,740,991 safe repeats
+        this.repeatCounter = (this.currentAnim.repeat === -1) ? Number.MAX_SAFE_INTEGER : this.currentAnim.repeat;
 
         this.currentAnim.getNextTick(this);
 
+        this.forward = true;
         this.isPlaying = true;
     },
 
-    stop: function ()
-    {
-        this.isPlaying = false;
-    },
-
-    updateFrame: function ()
-    {
-        this.parent.texture = this.currentFrame.frame.texture;
-        this.parent.frame = this.currentFrame.frame;
-    },
-
+    //  Example data:
+    //  timestamp = 2356.534000020474
+    //  frameDelta = 17.632333353807383 (diff since last timestamp)
     update: function (timestamp, frameDelta)
     {
         if (this.isPlaying)
@@ -78,6 +97,11 @@ Animation.prototype = {
                 this.currentAnim.setFrame(this);
             }
         }
+    },
+
+    stop: function ()
+    {
+        this.isPlaying = false;
     }
 
 };