Split the Animation functions up to make them more manageable. Fixed bug in AddFrameAt.

Author: photonstorm

v3/src/animation/frame/AddFrame.js

@@ -0,0 +1,12 @@
+//  config = Array of Animation config objects, like:
+//  [
+//      { key: 'gems', frame: 'diamond0001', [duration], [visible], [onUpdate] }
+//  ]
+
+//  Add frames to the end of the animation
+var AddFrame = function (config)
+{
+    return this.addFrameAt(this.frames.length, config);
+};
+
+module.exports = AddFrame;

v3/src/animation/frame/AddFrameAt.js

@@ -0,0 +1,39 @@
+var GetFrames = require('./GetFrames');
+
+//  config = Array of Animation config objects, like:
+//  [
+//      { key: 'gems', frame: 'diamond0001', [duration], [visible], [onUpdate] }
+//  ]
+
+//  Add frame/s into the animation
+var AddFrameAt = function (index, config)
+{
+    if (index === undefined) { index = 0; }
+
+    var newFrames = GetFrames(this.manager.textureManager, config);
+
+    if (newFrames.length > 0)
+    {
+        if (index === 0)
+        {
+            this.frames = newFrames.concat(this.frames);
+        }
+        else if (index === this.frames.length)
+        {
+            this.frames = this.frames.concat(newFrames);
+        }
+        else
+        {
+            var pre = this.frames.slice(0, index);
+            var post = this.frames.slice(index);
+
+            this.frames = pre.concat(newFrames, post);
+        }
+
+        this.updateFrameSequence();
+    }
+
+    return this;
+};
+
+module.exports = AddFrameAt;

v3/src/animation/frame/Animation.js

@@ -100,32 +100,22 @@ Animation.prototype.constructor = Animation;
 
 Animation.prototype = {
 
-    load: function (component, startFrame)
-    {
-        if (startFrame >= this.frames.length)
-        {
-            startFrame = 0;
-        }
-
-        if (component.currentAnim !== this)
-        {
-            component.currentAnim = this;
-
-            component._timeScale = 1;
-            component.frameRate = this.frameRate;
-            component.duration = this.duration;
-            component.msPerFrame = this.msPerFrame;
-            component.skipMissedFrames = this.skipMissedFrames;
-            component._delay = this.delay;
-            component._repeat = this.repeat;
-            component._repeatDelay = this.repeatDelay;
-            component._yoyo = this.yoyo;
-            component._callbackArgs[1] = this;
-            component._updateParams = component._callbackArgs.concat(this.onUpdateParams);
-        }
-
-        component.updateFrame(this.frames[startFrame]);
-    },
+    load: require('./Load'),
+    addFrame: require('./AddFrame'),
+    addFrameAt: require('./AddFrameAt'),
+    getFrameAt: require('./GetFrameAt'),
+    removeFrame: require('./RemoveFrame'),
+    removeFrameAt: require('./RemoveFrameAt'),
+    updateFrameSequence: require('./UpdateFrameSequence'),
+    checkFrame: require('./CheckFrame'),
+    getFirstTick: require('./GetFirstTick'),
+    getNextTick: require('./GetNextTick'),
+    nextFrame: require('./NextFrame'),
+    previousFrame: require('./PreviousFrame'),
+    repeatAnimation: require('./RepeatAnimation'),
+    completeAnimation: require('./CompleteAnimation'),
+    setFrame: require('./SetFrame'),
+    toJSON: require('./ToJSON'),
 
     pause: function ()
     {
@@ -137,279 +127,6 @@ Animation.prototype = {
         this.paused = false;
     },
 
-    //  config = Array of Animation config objects, like:
-    //  [
-    //      { key: 'gems', frame: 'diamond0001', [duration], [visible], [onUpdate] }
-    //  ]
-
-    //  Add frames to the end of the animation
-    addFrame: function (config)
-    {
-        return this.addFrameAt(this.frames.length, config);
-    },
-
-    //  Add frame/s into the animation
-    addFrameAt: function (index, config)
-    {
-        if (index === undefined) { index = 0; }
-
-        var newFrames = GetFrames(this.manager.textureManager, config);
-
-        if (newFrames.length === 0)
-        {
-            if (index === 0)
-            {
-                this.frames = newFrames.concat(this.frames);
-            }
-            else if (index === this.frames.length)
-            {
-                this.frames = this.frames.concat(newFrames);
-            }
-            else
-            {
-                var pre = this.frames.slice(0, index);
-                var post = this.frames.slice(index);
-
-                this.frames = pre.concat(newFrames, post);
-            }
-
-            this.updateFrameSequence();
-        }
-
-        return this;
-    },
-
-    getFrameAt: function (index)
-    {
-        return this.frames[index];
-    },
-
-    //  Remove frame if it matches the given frame
-    removeFrame: function (frame)
-    {
-        var index = this.frames.indexOf(frame);
-
-        if (index !== -1)
-        {
-            this.removeFrameAt(index);
-        }
-
-        return this;
-    },
-
-    removeFrameAt: function (index)
-    {
-        this.frames.splice(index, 1);
-
-        this.updateFrameSequence();
-
-        return this;
-    },
-
-    updateFrameSequence: function ()
-    {
-        var len = this.frames.length;
-        var slice = 1 / (len - 1);
-
-        for (var i = 0; i < len; i++)
-        {
-            var frame = this.frames[i];
-
-            frame.index = i + 1;
-            frame.isFirst = false;
-            frame.isLast = false;
-            frame.progress = i * slice;
-
-            if (i === 0)
-            {
-                frame.isFirst = true;
-                frame.isLast = (len === 1);
-                frame.prevFrame = this.frames[len - 1];
-                frame.nextFrame = this.frames[i + 1];
-            }
-            else if (i === len - 1)
-            {
-                frame.isLast = true;
-                frame.prevFrame = this.frames[len - 2];
-                frame.nextFrame = this.frames[0];
-            }
-            else if (len > 1)
-            {
-                frame.prevFrame = this.frames[i - 1];
-                frame.nextFrame = this.frames[i + 1];
-            }
-        }
-
-        return this;
-    },
-
-    checkFrame: function (index)
-    {
-        return (index < this.frames.length);
-    },
-
-    getFirstTick: function (component, includeDelay)
-    {
-        if (includeDelay === undefined) { includeDelay = true; }
-
-        //  When is the first update due?
-        component.accumulator = 0;
-        component.nextTick = component.msPerFrame + component.currentFrame.duration;
-
-        if (includeDelay)
-        {
-            component.nextTick += (component._delay * 1000);
-        }
-    },
-
-    getNextTick: function (component)
-    {
-        //  When is the next update due?
-        component.accumulator -= component.nextTick;
-        component.nextTick = component.msPerFrame + component.currentFrame.duration;
-    },
-
-    nextFrame: function (component)
-    {
-        var frame = component.currentFrame;
-
-        //  TODO: Add frame skip support
-
-        if (frame.isLast)
-        {
-            //  We're at the end of the animation
-
-            //  Yoyo? (happens before repeat)
-            if (this.yoyo)
-            {
-                component.forward = false;
-    
-                component.updateFrame(frame.prevFrame);
-
-                //  Delay for the current frame
-                this.getNextTick(component);
-            }
-            else if (component.repeatCounter > 0)
-            {
-                //  Repeat (happens before complete)
-                this.repeatAnimation(component);
-            }
-            else
-            {
-                this.completeAnimation(component);
-            }
-        }
-        else
-        {
-            component.updateFrame(frame.nextFrame);
-
-            this.getNextTick(component);
-        }
-    },
-
-    previousFrame: function (component)
-    {
-        var frame = component.currentFrame;
-
-        //  TODO: Add frame skip support
-
-        if (frame.isFirst)
-        {
-            //  We're at the start of the animation
-
-            if (component.repeatCounter > 0)
-            {
-                //  Repeat (happens before complete)
-                this.repeatAnimation(component);
-            }
-            else
-            {
-                this.completeAnimation(component);
-            }
-        }
-        else
-        {
-            component.updateFrame(frame.prevFrame);
-
-            this.getNextTick(component);
-        }
-    },
-
-    repeatAnimation: function (component)
-    {
-        if (component._repeatDelay > 0 && component.pendingRepeat === false)
-        {
-            component.pendingRepeat = true;
-            component.accumulator -= component.nextTick;
-            component.nextTick += (component._repeatDelay * 1000);
-        }
-        else
-        {
-            component.repeatCounter--;
-
-            component.forward = true;
-
-            component.updateFrame(component.currentFrame.nextFrame);
-
-            this.getNextTick(component);
-
-            component.pendingRepeat = false;
-    
-            if (this.onRepeat)
-            {
-                this.onRepeat.apply(this.callbackScope, component._callbackArgs.concat(this.onRepeatParams));
-            }
-        }
-    },
-
-    completeAnimation: function (component)
-    {
-        if (this.hideOnComplete)
-        {
-            component.parent.visible = false;
-        }
-
-        component.stop(true);
-    },
-
-    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);
-        }
-    },
-
-    toJSON: function ()
-    {
-        var output = {
-            key: this.key,
-            type: this.type,
-            frames: [],
-            framerate: this.frameRate,
-            duration: this.duration,
-            skipMissedFrames: this.skipMissedFrames,
-            delay: this.delay,
-            repeat: this.repeat,
-            repeatDelay: this.repeatDelay,
-            yoyo: this.yoyo,
-            showOnStart: this.showOnStart,
-            hideOnComplete: this.hideOnComplete
-        };
-
-        this.frames.forEach(function (frame)
-        {
-            output.frames.push(frame.toJSON());
-        });
-
-        return output;
-    },
-
     destroy: function ()
     {
 

v3/src/animation/frame/CheckFrame.js

@@ -0,0 +1,6 @@
+var CheckFrame = function (index)
+{
+    return (index < this.frames.length);
+};
+
+module.exports = CheckFrame;