Updated Tween class so it now supports delay, repeat and yoyo.

Author: photonstorm

v3/src/checksum.js

@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: '2c300660-3aa1-11e7-8ed2-b56c8fa80bed'
+build: 'f8ca0120-3ab1-11e7-be5c-338bdccc3159'
 };
 module.exports = CHECKSUM;

v3/src/tween/Tween.js

@@ -19,40 +19,38 @@ var Tween = function (manager, target, key, value)
     this.repeat = 0;
     this.loop = false;
     this.delay = 0;
+    this.repeatDelay = 0;
     this.onCompleteDelay = 0;
     this.elasticity = 0;
 
-    // this.startAt
+    //  Changes the property to be this before starting the tween
+    this.startAt;
 
     this.progress = 0;
-    this.startTime = 0;
     this.elapsed = 0;
+    this.countdown = 0;
 
-    // 0 = forward, 1 = reverse
-    this.direction = 0;
+    this.repeatCounter = 0;
 
-    this.useFrames = false;
-    this.paused = false;
-    this.running = false;
-    this.pending = true;
-
-    //  Callbacks
-
-    this.onStart;
-    this.onStartScope;
-    this.onStartParams;
+    //  0 = Waiting to be added to the TweenManager
+    //  1 = Paused (dev needs to invoke Tween.start)
+    //  2 = Started, but waiting for delay to expire
+    //  3 = Playing Forward
+    //  4 = Playing Backwards
+    //  5 = Completed
+    this.state = 0;
 
-    this.onUpdate;
-    this.onUpdateScope;
-    this.onUpdateParams;
+    //  if true then duration, delay, etc values are all frame totals
+    this.useFrames = false;
 
-    this.onRepeat;
-    this.onRepeatScope;
-    this.onRepeatParams;
+    this.paused = false;
 
-    this.onComplete;
-    this.onCompleteScope;
-    this.onCompleteParams;
+    this.callbacks = {
+        onStart: { callback: null, scope: null, params: null },
+        onUpdate: { callback: null, scope: null, params: null },
+        onRepeat: { callback: null, scope: null, params: null },
+        onComplete: { callback: null, scope: null, params: null }
+    };
 
     this.callbackScope;
 };
@@ -63,62 +61,172 @@ Tween.prototype = {
 
     init: function ()
     {
-        console.log('Tween init', (!this.paused));
+        this.state = 1;
 
         return (!this.paused);
     },
 
-    start: function (timestep)
+    start: function ()
     {
-        console.log('Tween started');
+        if (this.state !== 1)
+        {
+            return;
+        }
 
-        this.startTime = timestep;
+        if (this.delay > 0)
+        {
+            this.countdown = this.delay;
+            this.state = 2;
+        }
+        else
+        {
+            this.loadValues();
+        }
+    },
 
+    loadValues: function ()
+    {
         this.start = this.target[this.key];
         this.current = this.start;
         this.end = this.value();
 
-        this.paused = false;
-        this.running = true;
+        if (this.repeat === -1)
+        {
+            this.loop = true;
+        }
+
+        this.repeatCounter = (this.loop) ? Number.MAX_SAFE_INTEGER : this.repeat;
+
+        this.state = 3;
     },
 
     update: function (timestep, delta)
     {
-        if (!this.running)
+        if (this.state === 2)
         {
-            return;
+            //  Waiting for delay to expire
+            this.countdown -= (this.useFrames) ? 1 : delta;
+
+            if (this.countdown <= 0)
+            {
+                this.loadValues();
+            }
         }
 
-        this.elapsed += delta;
+        if (this.state === 3)
+        {
+            //  Playing forwards
+            this.forward(delta);
+        }
+        else if (this.state === 4)
+        {
+            //  Playing backwards
+            this.backward(delta);
+        }
+
+        //  Complete? Delete from the Tween Manager
+        return (this.state !== 5);
+    },
 
-        if (this.elapsed > this.duration)
+    forward: function (delta)
+    {
+        var elapsed = this.elapsed;
+        var duration = this.duration;
+
+        elapsed += (this.useFrames) ? 1 : delta;
+
+        if (elapsed > duration)
         {
-            this.elapsed = this.duration;
+            elapsed = duration;
         }
 
-        this.progress = this.elapsed / this.duration;
+        var progress = elapsed / duration;
 
-        var p = this.ease(this.progress);
+        var p = this.ease(progress);
 
+        //  Optimize
         this.current = this.start + ((this.end - this.start) * p);
 
         this.target[this.key] = this.current;
 
-        if (this.progress === 1)
+        this.elapsed = elapsed;
+        this.progress = progress;
+
+        if (progress === 1)
         {
-            this.running = false;
+            //  Tween has reached end
+            //  Do we yoyo or repeat?
+
+            this.state = this.processRepeat();
+        }
+    },
+
+    backward: function (delta)
+    {
+        var elapsed = this.elapsed;
+        var duration = this.duration;
+
+        elapsed += (this.useFrames) ? 1 : delta;
+
+        if (elapsed > duration)
+        {
+            elapsed = duration;
+        }
+
+        var progress = elapsed / duration;
+
+        var p = this.ease(1 - progress);
+
+        //  Optimize
+        this.current = this.start + ((this.end - this.start) * p);
+
+        this.target[this.key] = this.current;
+
+        this.elapsed = elapsed;
+        this.progress = progress;
+
+        if (progress === 0)
+        {
+            //  Tween has reached start
+            //  Do we yoyo or repeat?
+
+            this.state = this.processRepeat();
         }
     },
 
+    processRepeat: function ()
+    {
+        //  Playing forward, and Yoyo is enabled?
+        if (this.state === 3 && this.yoyo)
+        {
+            //  Play backwards
+            this.elapsed = 0;
+            this.progress = 0;
+
+            return 4;
+        }
+        else if (this.repeatCounter > 0)
+        {
+            this.repeatCounter--;
+
+            //  Reset the elapsed
+            this.current = this.start;
+            this.elapsed = 0;
+            this.progress = 0;
+
+            return 3;
+        }
+
+        return 5;
+    },
+
     eventCallback: function (type, callback, params, scope)
     {
         var types = [ 'onStart', 'onUpdate', 'onRepeat', 'onComplete' ];
 
         if (types.indexOf(type) !== -1)
         {
-            this[type] = callback;
-            this[type + 'Params'] = params;
-            this[type + 'Scope'] = scope;
+            this.callbacks[type] = { callback: callback, scope: scope, params: params };
         }
 
         return this;