tween: add play/reverse state hatch

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "mojs",
   "description": "motion graphics toolbelt for the web",
-  "version": "0.163.2",
+  "version": "0.163.3",
   "license": "MIT",
   "homepage": "https://github.com/legomushroom/mojs",
   "authors": [

build/mo.js

@@ -2415,7 +2415,7 @@
 /***/ function(module, exports, __webpack_require__) {
 
 	var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;window.mojs = {
-	  revision: '0.163.2',
+	  revision: '0.163.3',
 	  isDebug: true,
 	  helpers: __webpack_require__(2),
 	  Bit: __webpack_require__(3),
@@ -3583,6 +3583,9 @@
 	      */
 	      value: function play() {
 	        var shift = arguments[0] === undefined ? 0 : arguments[0];
+	        if (this._state === "play" && this._isRunning) {
+	          return false;
+	        }
 	        // if was playing reverse and paused or playing reverse right now,
 	        // flip the time progress in repeatTime bounds
 	        var isPausedReverse = this._state === "pause" && this._prevState === "reverse";
@@ -3607,8 +3610,15 @@
 	      */
 	      value: function reverse() {
 	        var shift = arguments[0] === undefined ? 0 : arguments[0];
+	        this.o.isIt && console.log(this._isRunning);
+	        if (this._state === "reverse" && this._isRunning) {
+	          return false;
+	        }
 	        // flip time progress in repeatTime bounds
-	        this._progressTime = this._props.repeatTime - this._progressTime;
+	        var isPlayPaused = this._state === "pause" && this._prevState === "play";
+	        if (isPlayPaused || this._state === "play") {
+	          this._progressTime = this._props.repeatTime - this._progressTime;
+	        }
 	        // play reversed
 	        this._props.isReversed = true;
 	        this._subPlay(shift);
@@ -3910,7 +3920,7 @@
 	        }
 
 	        this._prevTime = time;
-	        return this._isCompleted;
+	        return time >= p.endTime || time <= startPoint;
 	      },
 	      writable: true,
 	      enumerable: true,

js/mojs.coffee

@@ -1,6 +1,6 @@
 
 window.mojs =
-  revision:   '0.163.2', isDebug: true
+  revision:   '0.163.3', isDebug: true
   helpers     : require './h'
   Bit         : require './shapes/bit'
   bitsMap     : require './shapes/bitsMap'
@@ -33,14 +33,15 @@ mojs.delta = mojs.h.delta
 # pause       = document.querySelector('#js-pause')
 # stop        = document.querySelector('#js-stop')
 
-# tm = new mojs.Timeline isIt: 1
+# tm = new mojs.Timeline
 # tw = new mojs.Tween
+#   isIt2: 1
 #   # repeat: 3
 #   # yoyo: true
 #   # isIt: true
 #   # delay: 500
 #   # speed:    .5
-#   duration: 10000
+#   duration: 1000
 #   # onStart:-> console.log "START"
 #   # onComplete:-> console.log "COMPLETE"
 #   # onRepeatStart:-> console.log "REPEAT START"

js/tween/tween.babel.js

@@ -10,6 +10,7 @@ var Tween = class Tween {
     @return {Object} Self.
   */
   play (shift = 0) {
+    if ( this._state === 'play' && this._isRunning ) { return false; }
     // if was playing reverse and paused or playing reverse right now,
     // flip the time progress in repeatTime bounds
     var isPausedReverse = this._state === 'pause' && this._prevState === 'reverse';
@@ -28,8 +29,13 @@ var Tween = class Tween {
     @return {Object} Self.
   */
   reverse (shift = 0) {
+    this.o.isIt && console.log(this._isRunning);
+    if ( this._state === 'reverse' && this._isRunning)  { return false; }
     // flip time progress in repeatTime bounds
-    this._progressTime = this._props.repeatTime - this._progressTime;
+    var isPlayPaused = this._state === 'pause' && this._prevState === 'play';
+    if ( isPlayPaused || this._state === 'play' ) {
+      this._progressTime = this._props.repeatTime - this._progressTime;
+    }
     // play reversed
     this._props.isReversed = true;
     this._subPlay( shift );
@@ -289,7 +295,7 @@ var Tween = class Tween {
     }
 
     this._prevTime = time;
-    return this._isCompleted;
+    return (time >= p.endTime) || (time <= startPoint);
   }
   /*
     Method to handle tween's progress in active area.

js/tween/tweener.babel.js

@@ -42,9 +42,7 @@ class Tweener {
     this._startLoop();
   }
 
-  removeAll() {
-    this.tweens.length = 0;
-  }
+  removeAll() { this.tweens.length = 0; }
 
   remove(tween) {
     var index = (typeof tween === 'number')

lib/mojs.js

@@ -1,6 +1,6 @@
 (function() {
   window.mojs = {
-    revision: '0.163.2',
+    revision: '0.163.3',
     isDebug: true,
     helpers: require('./h'),
     Bit: require('./shapes/bit'),

lib/tween/tween.js

@@ -35,6 +35,9 @@ var Tween = (function () {
     value: function play() {
       var shift = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
 
+      if (this._state === 'play' && this._isRunning) {
+        return false;
+      }
       // if was playing reverse and paused or playing reverse right now,
       // flip the time progress in repeatTime bounds
       var isPausedReverse = this._state === 'pause' && this._prevState === 'reverse';
@@ -58,8 +61,15 @@ var Tween = (function () {
     value: function reverse() {
       var shift = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
 
+      this.o.isIt && console.log(this._isRunning);
+      if (this._state === 'reverse' && this._isRunning) {
+        return false;
+      }
       // flip time progress in repeatTime bounds
-      this._progressTime = this._props.repeatTime - this._progressTime;
+      var isPlayPaused = this._state === 'pause' && this._prevState === 'play';
+      if (isPlayPaused || this._state === 'play') {
+        this._progressTime = this._props.repeatTime - this._progressTime;
+      }
       // play reversed
       this._props.isReversed = true;
       this._subPlay(shift);
@@ -364,7 +374,7 @@ var Tween = (function () {
       }
 
       this._prevTime = time;
-      return this._isCompleted;
+      return time >= p.endTime || time <= startPoint;
     }
 
     /*

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mo-js",
   "description": "motion graphics toolbelt for the web",
-  "version": "0.163.2",
+  "version": "0.163.3",
   "license": "MIT",
   "private": false,
   "scripts": {

spec/tween/tween.coffee

@@ -156,6 +156,13 @@ describe 'Tween ->', ->
       expect(t._isCompleted).toBe true
       expect(t._isRepeatCompleted).toBe true
       expect(returnValue).toBe true
+    it 'should return true on the start', ->
+      t = new Tween(duration: 1000, delay: 200, isIt: true, onUpdate:(p)-> console.log(p) )
+      t._setStartTime()
+      t._update t._props.startTime + t._props.duration/2
+      returnValue = t._update t._props.startTime - 1000
+      expect(t.progress).toBeCloseTo 0, 5
+      expect(returnValue).toBe true
     it 'should not call update method if timeline isnt active "-"', ->
       t = new Tween(duration: 1000, onUpdate:->)
       t._setStartTime()
@@ -4490,6 +4497,23 @@ describe 'Tween ->', ->
         .reverse()
         .play()
       expect(t._progressTime).toBe progress
+    it 'should return immediately if already playing',->
+      t = new Tween duration: 1000
+      t.play()
+      spyOn t, '_subPlay'
+      t.play()
+      expect(t._subPlay).not.toHaveBeenCalled()
+
+    it 'should run if already playing but ended', (dfr)->
+      duration = 50
+      t = new Tween duration: duration
+      t.play()
+      setTimeout ->
+        spyOn t, '_subPlay'
+        t.play()
+        expect(t._subPlay).toHaveBeenCalled()
+        dfr()
+      , 2*duration
 
   describe 'reverse method ->', ->
     it 'should set _state to "reverse"',->
@@ -4517,7 +4541,7 @@ describe 'Tween ->', ->
       t.setProgress(.75)
       progress = t._progressTime
       t.reverse()
-      expect(t._progressTime).toBe t._props.repeatTime - progress
+      expect(t._progressTime).toBe progress
     it 'should recalc _progressTime if previous state was "play"',->
       duration = 1000
       t = new Tween duration: duration
@@ -4526,6 +4550,23 @@ describe 'Tween ->', ->
       t .play()
         .reverse()
       expect(t._progressTime).toBe t._props.repeatTime - progress
+    it 'should return immediately if already reversing',->
+      t = new Tween duration: 1000
+      t.reverse()
+      spyOn t, '_subPlay'
+      t.reverse()
+      expect(t._subPlay).not.toHaveBeenCalled()
+
+    it 'should run if already reversing but ended', (dfr)->
+      duration = 50
+      t = new Tween duration: duration
+      t.reverse()
+      setTimeout ->
+        spyOn t, '_subPlay'
+        t.reverse()
+        expect(t._subPlay).toHaveBeenCalled()
+        dfr()
+      , 2*duration
 
   describe 'stop method', ->
     it 'should call removeFromTweener method with self',->

spec/tween/tween.js

@@ -263,6 +263,22 @@
         expect(t._isRepeatCompleted).toBe(true);
         return expect(returnValue).toBe(true);
       });
+      it('should return true on the start', function() {
+        var returnValue, t;
+        t = new Tween({
+          duration: 1000,
+          delay: 200,
+          isIt: true,
+          onUpdate: function(p) {
+            return console.log(p);
+          }
+        });
+        t._setStartTime();
+        t._update(t._props.startTime + t._props.duration / 2);
+        returnValue = t._update(t._props.startTime - 1000);
+        expect(t.progress).toBeCloseTo(0, 5);
+        return expect(returnValue).toBe(true);
+      });
       it('should not call update method if timeline isnt active "-"', function() {
         var t;
         t = new Tween({
@@ -3943,7 +3959,7 @@
         t.play().reverse().pause().play();
         return expect(t._progressTime).toBe(progress);
       });
-      return it('should recalc _progressTime if previous state was "reverse"', function() {
+      it('should recalc _progressTime if previous state was "reverse"', function() {
         var duration, progress, t;
         duration = 1000;
         t = new Tween({
@@ -3954,6 +3970,30 @@
         t.play().reverse().play();
         return expect(t._progressTime).toBe(progress);
       });
+      it('should return immediately if already playing', function() {
+        var t;
+        t = new Tween({
+          duration: 1000
+        });
+        t.play();
+        spyOn(t, '_subPlay');
+        t.play();
+        return expect(t._subPlay).not.toHaveBeenCalled();
+      });
+      return it('should run if already playing but ended', function(dfr) {
+        var duration, t;
+        duration = 50;
+        t = new Tween({
+          duration: duration
+        });
+        t.play();
+        return setTimeout(function() {
+          spyOn(t, '_subPlay');
+          t.play();
+          expect(t._subPlay).toHaveBeenCalled();
+          return dfr();
+        }, 2 * duration);
+      });
     });
     describe('reverse method ->', function() {
       it('should set _state to "reverse"', function() {
@@ -3991,9 +4031,9 @@
         t.setProgress(.75);
         progress = t._progressTime;
         t.reverse();
-        return expect(t._progressTime).toBe(t._props.repeatTime - progress);
+        return expect(t._progressTime).toBe(progress);
       });
-      return it('should recalc _progressTime if previous state was "play"', function() {
+      it('should recalc _progressTime if previous state was "play"', function() {
         var duration, progress, t;
         duration = 1000;
         t = new Tween({
@@ -4004,6 +4044,30 @@
         t.play().reverse();
         return expect(t._progressTime).toBe(t._props.repeatTime - progress);
       });
+      it('should return immediately if already reversing', function() {
+        var t;
+        t = new Tween({
+          duration: 1000
+        });
+        t.reverse();
+        spyOn(t, '_subPlay');
+        t.reverse();
+        return expect(t._subPlay).not.toHaveBeenCalled();
+      });
+      return it('should run if already reversing but ended', function(dfr) {
+        var duration, t;
+        duration = 50;
+        t = new Tween({
+          duration: duration
+        });
+        t.reverse();
+        return setTimeout(function() {
+          spyOn(t, '_subPlay');
+          t.reverse();
+          expect(t._subPlay).toHaveBeenCalled();
+          return dfr();
+        }, 2 * duration);
+      });
     });
     describe('stop method', function() {
       it('should call removeFromTweener method with self', function() {

todo.md

@@ -5,7 +5,6 @@
 ### TWEEN + TIMELINE:
   - add total onUpdate
   - nested speed tests
-  - play/pause and others should not run if already running
 
 - fix coverage
 - release