tween: fix parent edge=-1 callbacks issue

mojs · Mar 14, 2016 · 6332f6f · 6332f6f
1 parent 9cf219c
commit 6332f6f
Show file tree

Hide file tree

Showing 9 changed files with 197 additions and 54 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "mojs",
   "description": "motion graphics toolbelt for the web",
-  "version": "0.185.2",
+  "version": "0.185.3",
   "license": "MIT",
   "homepage": "https://github.com/legomushroom/mojs",
   "authors": [

diff --git a/build/mo.js b/build/mo.js
@@ -644,8 +644,9 @@
 
 
 	// TODO
-	//  - properties signatures
 	//  - move to submodules (Thenable)
+	//    - refactor transit and thenable
+	//    - add ability the to switch shapes
 	//  - move to Deltable
 	//  - move to Runable
 	//  --
@@ -2422,17 +2423,11 @@
 	        time = this._playTime + p.speed * (time - this._playTime);
 	      }
 
-	      // // if end time(with precision issue fix)
-	      // // and already completed then return immediately
-	      // var isEnded = Math.abs(time - this._props.endTime) < .000000000001;
-	      // if ( isEnded && ( time < this._prevTime ) && ( this._isCompleted || this._isStarted ) ) { return; }
-
-	      // console.log(onEdge, wasYoyo)
-
 	      // if parent is onEdge but not very start nor very end
 	      if (onEdge && wasYoyo != null) {
 	        var T = this._getPeriod(time),
 	            isYoyo = !!(p.yoyo && this._props.repeat && T % 2 === 1);
+
 	        // forward edge direction
 	        if (onEdge === 1) {
 	          // jumped from yoyo period?
@@ -2453,9 +2448,15 @@
 	              this._repeatComplete(time, isYoyo);
 	              this._complete(time, isYoyo);
 	            } else {
-	              this._prevTime = time + 1;
-	              this._repeatStart(time, isYoyo);
-	              this._start(time, isYoyo);
+	              // call _start callbacks only if prev time was in active area
+	              // not always true for append chains
+	              if (this._prevTime >= p.startTime && this._prevTime <= p.endTime) {
+	                this._prevTime = time + 1;
+	                this._repeatStart(time, isYoyo);
+	                this._start(time, isYoyo);
+	                // reset isCOmpleted immediately to prevent onComplete cb
+	                this._isCompleted = true;
+	              }
 	            }
 	          }
 	        // reset the _prevTime === drop one frame to undestand
@@ -2949,6 +2950,7 @@
 	        p.onRepeatComplete.call(p.callbacksContext || this, time > this._prevTime, isYoyo);
 	      }
 	      this._isRepeatCompleted = true;
+	      // this._prevYoyo = null;
 	    }
 
 	    /*
@@ -7269,12 +7271,43 @@
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 	window.mojs = {
-	  revision: '0.185.2', isDebug: true, helpers: _h2.default,
+	  revision: '0.185.3', isDebug: true, helpers: _h2.default,
 	  Transit: _transit2.default, Swirl: _swirl2.default, Burst: _burst2.default, stagger: _stagger2.default, Spriter: _spriter2.default, MotionPath: _motionPath2.default,
 	  Tween: _tween2.default, Timeline: _timeline2.default, Tweenable: _tweenable2.default, Thenable: _thenable2.default, tweener: _tweener2.default, easing: _easing2.default,
 	  shapesMap: _shapesMap2.default
 	};
 
+	var tr = new mojs.Timeline({ repeat: 1 });
+
+	var tw1 = new mojs.Tween({
+	  onStart: function onStart() {
+	    console.log('on start 1');
+	  },
+	  onComplete: function onComplete() {
+	    console.log('on complete 1');
+	  }
+	});
+
+	var tw2 = new mojs.Tween({
+	  onStart: function onStart() {
+	    console.log('on start 2');
+	  },
+	  onComplete: function onComplete() {
+	    console.log('on complete 2');
+	  }
+	});
+
+	var tw3 = new mojs.Tween({
+	  onStart: function onStart() {
+	    console.log('on start 3');
+	  },
+	  onComplete: function onComplete() {
+	    console.log('on complete 3');
+	  }
+	});
+
+	tr.append(tw1, tw2, tw3);
+
 	// var tr = new mojs.Transit({
 	//   left: '50%', top: '50%',
 	//   shape:    'polygon',
@@ -7287,19 +7320,17 @@
 	//   duration: 2000,
 	//   isShowStart: true,
 	//   isShowEnd: true,
-	//   // timeline: { repeat: 2 },
+	//   timeline: { repeat: 1, onRepeatComplete: function () { console.log('rep complete'); } },
 	//   // delay:    4000,
 	//   scale: { 0 : 6 },
 	//   // timeline: { repeat: 2, yoyo: true },
 	//   onStart: ()=> { console.log('start 1'); },
 	//   onComplete: ()=> { console.log('comple 1'); },
-	//   onFirstUpdate: ()=> { console.log('first update 1')},
 	//   // easing: 'expo.in'
 	// })
 	// .then({
 	//   onStart: ()=> { console.log('start 2')},
 	//   onComplete: ()=> { console.log('comple 2'); },
-	//   onFirstUpdate: ()=> { console.log('first update 2')},
 	//   points:   3, // make triangle
 	//   angle:    -180,
 	//   duration: 300,
@@ -7310,7 +7341,6 @@
 	// .then({
 	//   onStart: ()=> { console.log('start 3')},
 	//   onComplete: ()=> { console.log('comple 3'); },
-	//   onFirstUpdate: ()=> { console.log('first update 3')},
 	//   strokeWidth: 0,
 	//   stroke: 'hotpink',
 	//   duration: 400,
@@ -7325,14 +7355,14 @@
 
 	// var playEl = document.querySelector('#js-play'),
 	//     rangeSliderEl = document.querySelector('#js-range-slider');
-	// playEl.addEventListener('click', function () {
-	//   tr.play();
-	// });
-
-	// // rangeSliderEl.addEventListener('input', function () {
-	// //   tr.setProgress( rangeSliderEl.value/1000 );
+	// // playEl.addEventListener('click', function () {
+	// //   tr.play();
 	// // });
 
+	// rangeSliderEl.addEventListener('input', function () {
+	//   tr.setProgress( rangeSliderEl.value/1000 );
+	// });
+
 	mojs.h = mojs.helpers;
 	mojs.delta = mojs.h.delta;
 

diff --git a/build/mo.min.js b/build/mo.min.js
diff --git a/js/mojs.babel.js b/js/mojs.babel.js
@@ -15,12 +15,31 @@ import tweener    from './tween/tweener';
 import easing     from './easing/easing';
 
 window.mojs = {
-  revision:   '0.185.2', isDebug: true, helpers: h,
+  revision:   '0.185.3', isDebug: true, helpers: h,
   Transit, Swirl, Burst, stagger, Spriter, MotionPath,
   Tween, Timeline, Tweenable, Thenable, tweener, easing,
   shapesMap
 }
 
+var tr = new mojs.Timeline({ repeat: 1 });
+
+var tw1 = new mojs.Tween({
+  onStart: function () { console.log('on start 1'); },
+  onComplete: function () { console.log('on complete 1'); }
+});
+
+var tw2 = new mojs.Tween({
+  onStart: function () { console.log('on start 2'); },
+  onComplete: function () { console.log('on complete 2'); }
+});
+
+var tw3 = new mojs.Tween({
+  onStart: function () { console.log('on start 3'); },
+  onComplete: function () { console.log('on complete 3'); }
+});
+
+tr.append(tw1, tw2, tw3);
+
 // var tr = new mojs.Transit({
 //   left: '50%', top: '50%',
 //   shape:    'polygon',
@@ -33,19 +52,17 @@ window.mojs = {
 //   duration: 2000,
 //   isShowStart: true,
 //   isShowEnd: true,
-//   // timeline: { repeat: 2 },
+//   timeline: { repeat: 1, onRepeatComplete: function () { console.log('rep complete'); } },
 //   // delay:    4000,
 //   scale: { 0 : 6 },
 //   // timeline: { repeat: 2, yoyo: true },
 //   onStart: ()=> { console.log('start 1'); },
 //   onComplete: ()=> { console.log('comple 1'); },
-//   onFirstUpdate: ()=> { console.log('first update 1')},
 //   // easing: 'expo.in'
 // })
 // .then({
 //   onStart: ()=> { console.log('start 2')},
 //   onComplete: ()=> { console.log('comple 2'); },
-//   onFirstUpdate: ()=> { console.log('first update 2')},
 //   points:   3, // make triangle
 //   angle:    -180,
 //   duration: 300,
@@ -56,7 +73,6 @@ window.mojs = {
 // .then({
 //   onStart: ()=> { console.log('start 3')},
 //   onComplete: ()=> { console.log('comple 3'); },
-//   onFirstUpdate: ()=> { console.log('first update 3')},
 //   strokeWidth: 0,
 //   stroke: 'hotpink',
 //   duration: 400,
@@ -71,14 +87,14 @@ window.mojs = {
 
 // var playEl = document.querySelector('#js-play'),
 //     rangeSliderEl = document.querySelector('#js-range-slider');
-// playEl.addEventListener('click', function () {
-//   tr.play();
-// });
-
-// // rangeSliderEl.addEventListener('input', function () {
-// //   tr.setProgress( rangeSliderEl.value/1000 );
+// // playEl.addEventListener('click', function () {
+// //   tr.play();
 // // });
 
+// rangeSliderEl.addEventListener('input', function () {
+//   tr.setProgress( rangeSliderEl.value/1000 );
+// });
+
 mojs.h     = mojs.helpers;
 mojs.delta = mojs.h.delta;
 

diff --git a/js/transit.babel.js b/js/transit.babel.js
@@ -8,8 +8,9 @@ import Tween      from './tween/tween';
 import Timeline   from './tween/timeline';
 
 // TODO
-//  - properties signatures
 //  - move to submodules (Thenable)
+//    - refactor transit and thenable
+//    - add ability the to switch shapes
 //  - move to Deltable
 //  - move to Runable
 //  --

diff --git a/js/tween/tween.babel.js b/js/tween/tween.babel.js
@@ -331,17 +331,11 @@ var Tween = class Tween {
       time = this._playTime + ( p.speed * ( time - this._playTime ) );
     }
 
-    // // if end time(with precision issue fix)
-    // // and already completed then return immediately
-    // var isEnded = Math.abs(time - this._props.endTime) < .000000000001;
-    // if ( isEnded && ( time < this._prevTime ) && ( this._isCompleted || this._isStarted ) ) { return; }
-
-    // console.log(onEdge, wasYoyo)
-
     // if parent is onEdge but not very start nor very end
     if ( onEdge && wasYoyo != null ) {
       var T        = this._getPeriod(time),
-          isYoyo   = !!(p.yoyo && this._props.repeat && (T % 2 === 1));      
+          isYoyo   = !!(p.yoyo && this._props.repeat && (T % 2 === 1));
+
       // forward edge direction
       if ( onEdge === 1 ) {
         // jumped from yoyo period?
@@ -362,9 +356,15 @@ var Tween = class Tween {
           this._repeatComplete( time, isYoyo );
           this._complete( time, isYoyo );
         } else {
-          this._prevTime = time + 1;
-          this._repeatStart( time, isYoyo );
-          this._start( time, isYoyo );
+          // call _start callbacks only if prev time was in active area
+          // not always true for append chains
+          if ( this._prevTime >= p.startTime && this._prevTime <= p.endTime ) {
+            this._prevTime = time + 1;
+            this._repeatStart( time, isYoyo );
+            this._start( time, isYoyo );
+            // reset isCOmpleted immediately to prevent onComplete cb
+            this._isCompleted = true;
+          }
         }
       }
       // reset the _prevTime === drop one frame to undestand
@@ -792,6 +792,7 @@ var Tween = class Tween {
       p.onRepeatComplete.call( p.callbacksContext || this, time > this._prevTime, isYoyo );
     }
     this._isRepeatCompleted = true;
+    // this._prevYoyo = null;
   }
 
   /*

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mo-js",
   "description": "motion graphics toolbelt for the web",
-  "version": "0.185.2",
+  "version": "0.185.3",
   "license": "MIT",
   "private": false,
   "scripts": {

diff --git a/spec/tween/tween.coffee b/spec/tween/tween.coffee
@@ -484,6 +484,56 @@ describe 'Tween ->', ->
 
       expect(t._props.onRepeatStart).toHaveBeenCalledWith false, false
       expect(t._props.onStart).toHaveBeenCalledWith false, false
+
+    it "should call callbacks if on edge '-1' + wasnt yoyo
+        but only if prevTime was active", ->
+      tm = new mojs.Timeline repeat: 1#, yoyo: true
+      t1 = new Tween
+        onStart:->
+        onRepeatStart:->
+        onUpdate:->
+        onProgress:->
+        onRepeatComplete:->
+        onComplete:->
+        onFirstUpdate:->
+      t2 = new Tween
+        onStart:->
+        onRepeatStart:->
+        onUpdate:->
+        onProgress:->
+        onRepeatComplete:->
+        onComplete:->
+        onFirstUpdate:->
+
+      tm.append t1, t2
+
+      tm.setProgress 0
+      tm.setProgress .1
+      tm.setProgress .2
+      tm.setProgress .3
+      tm.setProgress .4
+      tm.setProgress .6
+      tm.setProgress .65
+      tm.setProgress .55
+
+      spyOn(t1._props, 'onComplete').and.callThrough()
+      spyOn(t1._props, 'onRepeatStart').and.callThrough()
+      spyOn(t1._props, 'onStart').and.callThrough()
+      spyOn(t2._props, 'onRepeatStart').and.callThrough()
+      spyOn(t2._props, 'onStart').and.callThrough()
+
+      tm.setProgress .45
+      tm.setProgress .3
+
+      expect(t1._props.onStart).toHaveBeenCalledWith false, false
+      expect(t1._props.onRepeatStart).toHaveBeenCalledWith false, false
+
+      expect(t2._props.onStart).not.toHaveBeenCalledWith false, false
+      expect(t2._props.onRepeatStart).not.toHaveBeenCalledWith false, false
+
+      expect(t1._props.onComplete).not.toHaveBeenCalledWith false, false
+      expect(t1._isCompleted).toBe true
+
 
   it 'should call callbacks if on edge "-1" + was yoyo', ->
       tm = new mojs.Timeline repeat: 1, yoyo: true