fix animations with yoyo mode (issue: phaserjs#3837)

Author: khaleb85

src/animations/Animation.js

@@ -585,16 +585,20 @@ var Animation = new Class({
             if (component._yoyo)
             {
                 component.forward = false;
-
-                component.updateFrame(frame.prevFrame);
-
-                //  Delay for the current frame
-                this.getNextTick(component);
+                this._updateAndGetNextTick(component, frame.prevFrame);
             }
             else if (component.repeatCounter > 0)
             {
                 //  Repeat (happens before complete)
-                this.repeatAnimation(component);
+
+                if(component._reverse && component.forward)
+                {
+                    component.forward = false;
+                }
+                else
+                {
+                    this.repeatAnimation(component);
+                }
             }
             else
             {
@@ -603,9 +607,7 @@ var Animation = new Class({
         }
         else
         {
-            component.updateFrame(frame.nextFrame);
-
-            this.getNextTick(component);
+            this._updateAndGetNextTick(component, frame.nextFrame);
         }
     },
 
@@ -639,18 +641,22 @@ var Animation = new Class({
         {
             //  We're at the start of the animation
 
-            if (component.repeatCounter > 0)
+            if (component._yoyo)
+            {
+                component.forward = true;
+                this._updateAndGetNextTick(component, frame.nextFrame);
+            }
+            else if (component.repeatCounter > 0)
             {
-                if(!component.forward)
+                if(component._reverse && !component.forward)
                 {
                     component.currentFrame = this.getLastFrame();
-
-                    component.updateFrame(component.currentFrame);
-                    this.getNextTick(component);
+                    this._updateAndGetNextTick(component, component.currentFrame);
                 }
                 else
                 {
                     //  Repeat (happens before complete)
+                    component.forward = true;
                     this.repeatAnimation(component);
                 }
             }
@@ -661,12 +667,24 @@ var Animation = new Class({
         }
         else
         {
-            component.updateFrame(frame.prevFrame);
-
-            this.getNextTick(component);
+            this._updateAndGetNextTick(component, frame.prevFrame);
         }
     },
 
+    /**
+     * Update Frame and Wait next tick
+     *
+     * @method Phaser.Animations.Animation#_updateAndGetNextTick
+     *
+     * @param {Phaser.Animations.AnimationFrame} frame - An Animation frame
+     *
+     */
+    _updateAndGetNextTick: function (component, frame)
+    {
+        component.updateFrame(frame);
+        this.getNextTick(component);
+    },
+
     /**
      * [description]
      *

src/gameobjects/components/Animation.js

@@ -208,7 +208,7 @@ var Animation = new Class({
         this._yoyo = false;
 
         /**
-         * Will the playhead move forwards (`true`) or in reverse (`false`)
+         * Will the playhead move forwards (`true`) or in reverse (`false`).
          *
          * @name Phaser.GameObjects.Components.Animation#forward
          * @type {boolean}
@@ -217,6 +217,16 @@ var Animation = new Class({
          */
         this.forward = true;
 
+        /**
+         * An Internal trigger that's play the animation in reverse mode ('true') or not ('false'),
+         * needed because forward can be changed by yoyo feature.
+         *
+         * @name Phaser.GameObjects.Components.Animation#forward
+         * @type {boolean}
+         * @default false
+         */
+        this._reverse = false;
+
         /**
          * Internal time overflow accumulator.
          *
@@ -497,6 +507,7 @@ var Animation = new Class({
         }
 
         this.forward = true;
+        this._reverse = false;
         return this._startAnimation(key, startFrame);
     },
 
@@ -523,6 +534,7 @@ var Animation = new Class({
         }
 
         this.forward = false;
+        this._reverse = true;
         return this._startAnimation(key, startFrame);
     },
 
@@ -575,6 +587,7 @@ var Animation = new Class({
     revert: function (key)
     {
         if (!this.isPlaying || this.currentAnim.key !== key) { return this.parent; }
+        this._reverse = !this._reverse;
         this.forward = !this.forward;
 
         return this.parent;