tween: add speed option

mojs · Dec 21, 2015 · 94703d2 · 94703d2
1 parent 10e3b54
commit 94703d2
Show file tree

Hide file tree

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

diff --git a/build/mo.js b/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.161.0',
+	  revision: '0.162.0',
 	  isDebug: true,
 	  helpers: __webpack_require__(2),
 	  Bit: __webpack_require__(3),
@@ -3585,8 +3585,8 @@
 	      value: function play() {
 	        var shift = arguments[0] === undefined ? 0 : arguments[0];
 	        var _isReversed = arguments[1] === undefined ? false : arguments[1];
-	        // if was played and paused or playing right now
-	        // flip time progress in repeatTime bounds
+	        // 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";
 	        if (isPausedReverse || this._state === "reverse") {
 	          this._progressTime = this._props.repeatTime - this._progressTime;
@@ -3598,7 +3598,8 @@
 	        // if tween was ended, set progress to 0 if not, set to elapsed progress
 	        var procTime = this._progressTime >= this._props.repeatTime ? 0 : this._progressTime;
 	        // set start time regarding passed `shift` and calculated `procTime`
-	        this._setStartTime(performance.now() - Math.abs(shift) - procTime);
+	        this._playTime = performance.now();
+	        this._setStartTime(this._playTime - Math.abs(shift) - procTime);
 	        // add self to tweener = run
 	        t.add(this);this._setPlaybackState("play");
 	        return this;
@@ -3618,10 +3619,10 @@
 	        var shift = arguments[0] === undefined ? 0 : arguments[0];
 	        // if was played and paused or playing right now
 	        // flip time progress in repeatTime bounds
-	        var isPausedPlay = this._state === "pause" && this._prevState === "play";
-	        if (isPausedPlay || this._state === "play") {
-	          this._progressTime = this._props.repeatTime - this._progressTime;
-	        }
+	        // var isPausedPlay = this._state === 'pause' && this._prevState === 'play';
+	        // if ( isPausedPlay || this._state === 'play' ) {
+	        this._progressTime = this._props.repeatTime - this._progressTime;
+	        // }
 	        // play reversed
 	        this.play(shift, true);
 	        // overwrite state
@@ -3673,6 +3674,8 @@
 	        @returns {Object} Self.
 	      */
 	      value: function setProgress(progress) {
+	        // reset play time
+	        this._playTime = null;
 	        // set start time if there is no one yet.
 	        if (this._props.startTime == null) {
 	          this._setStartTime();
@@ -3716,6 +3719,7 @@
 	          duration: 600,
 	          delay: 0,
 	          repeat: 0,
+	          speed: null,
 	          yoyo: false,
 	          easing: "Linear.None",
 	          onStart: null,
@@ -3823,10 +3827,17 @@
 	        @param {Number}   Parent's previous period number.
 	      */
 	      value: function Update(time, isGrow) {
-	        // this._visualizeProgress( time );
 	        // Save progress time for pause/play purposes.
 	        var p = this._props,
 	            startPoint = p.startTime - p.delay;
+
+	        // if speed param was defined - calculate
+	        // new time regarding speed
+	        if (p.speed && this._playTime) {
+	          // play point + ( speed * delta )
+	          time = this._playTime + p.speed * (time - this._playTime);
+	        }
+
 	        // if in active area and not ended - save progress time
 	        if (time > startPoint && time < p.endTime) {
 	          this._progressTime = time - startPoint;
@@ -3843,7 +3854,6 @@
 	        if (p.isReversed) {
 	          time = p.endTime - this._progressTime;
 	        }
-
 	        // We need to know what direction we are heading in with this tween,
 	        // so if we don't have the previous update value - this is very first
 	        // update, - skip it entirely and wait for the next value

diff --git a/build/mo.min.js b/build/mo.min.js
diff --git a/js/mojs.coffee b/js/mojs.coffee
@@ -1,6 +1,6 @@
 
 window.mojs =
-  revision:   '0.161.0', isDebug: true
+  revision:   '0.162.0', isDebug: true
   helpers     : require './h'
   Bit         : require './shapes/bit'
   bitsMap     : require './shapes/bitsMap'
@@ -38,9 +38,10 @@ mojs.delta = mojs.h.delta
 #   # yoyo: true
 #   # isIt: true
 #   # delay: 500
+#   speed:    5
 #   duration: 10000
 #   onStart:->
-#   onComplete:->
+#   onComplete:-> console.log "COMPLETE"
 #   onRepeatStart:->
 #   onRepeatComplete:->
 #   onFirstUpdate:->

diff --git a/js/tween/tween.babel.js b/js/tween/tween.babel.js
@@ -10,9 +10,9 @@ var Tween = class Tween {
     @param  {Boolean} If should play in reverse.
     @return {Object} Self.
   */
-  play(shift = 0, _isReversed = false) {
-    // if was played and paused or playing right now
-    // flip time progress in repeatTime bounds
+  play (shift = 0, _isReversed = 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';
     if ( isPausedReverse || this._state === 'reverse' ) {
       this._progressTime = this._props.repeatTime - this._progressTime;
@@ -25,7 +25,8 @@ var Tween = class Tween {
     var procTime = ( this._progressTime >= this._props.repeatTime )
       ? 0 : this._progressTime;
     // set start time regarding passed `shift` and calculated `procTime`
-    this._setStartTime( performance.now() - Math.abs(shift) - procTime );
+    this._playTime = performance.now();
+    this._setStartTime( this._playTime - Math.abs(shift) - procTime );
     // add self to tweener = run
     t.add(this); this._setPlaybackState('play');
     return this;
@@ -36,13 +37,13 @@ var Tween = class Tween {
     @param  {Number} Shift time in milliseconds.
     @return {Object} Self.
   */
-  reverse(shift = 0) {
+  reverse (shift = 0) {
     // if was played and paused or playing right now
     // flip time progress in repeatTime bounds
-    var isPausedPlay = this._state === 'pause' && this._prevState === 'play';
-    if ( isPausedPlay || this._state === 'play' ) {
-      this._progressTime = this._props.repeatTime - this._progressTime;
-    }
+    // var isPausedPlay = this._state === 'pause' && this._prevState === 'play';
+    // if ( isPausedPlay || this._state === 'play' ) {
+    this._progressTime = this._props.repeatTime - this._progressTime;
+    // }
     // play reversed
     this.play( shift, true );
     // overwrite state
@@ -55,7 +56,7 @@ var Tween = class Tween {
     @public
     @returns {Object} Self.
   */
-  stop() {
+  stop () {
     this._props.isReversed = false;
     this._removeFromTweener();
     this.setProgress(0);
@@ -67,7 +68,7 @@ var Tween = class Tween {
     @public
     @returns {Object} Self.
   */
-  pause() {
+  pause () {
     this._removeFromTweener();
     this._setPlaybackState('pause');
     return this;
@@ -78,7 +79,9 @@ var Tween = class Tween {
     @param {Number} Progress to set.
     @returns {Object} Self.
   */
-  setProgress(progress) {
+  setProgress (progress) {
+    // reset play time
+    this._playTime = null;
     // set start time if there is no one yet.
     if ( this._props.startTime == null ) { this._setStartTime(); }
     // progress should be in range of [0..1]
@@ -124,6 +127,7 @@ var Tween = class Tween {
       duration:               600,
       delay:                  0,
       repeat:                 0,
+      speed:                  null,
       yoyo:                   false,
       easing:                 'Linear.None',
       onStart:                null,
@@ -206,10 +210,17 @@ var Tween = class Tween {
     @param {Number}   Parent's previous period number.
   */
   _update (time, isGrow) {
-    // this._visualizeProgress( time );
     // Save progress time for pause/play purposes.
     var p = this._props,
         startPoint = p.startTime - p.delay;
+
+    // if speed param was defined - calculate
+    // new time regarding speed
+    if ( p.speed && this._playTime ) {
+      // play point + ( speed * delta )
+      time = this._playTime + ( p.speed * ( time - this._playTime ) );
+    }
+
     // if in active area and not ended - save progress time
     if ( time > startPoint && time < p.endTime ) {
       this._progressTime = time - startPoint;
@@ -226,7 +237,6 @@ var Tween = class Tween {
     if ( p.isReversed ) {
       time = p.endTime - this._progressTime;
     }
-
     // We need to know what direction we are heading in with this tween,
     // so if we don't have the previous update value - this is very first
     // update, - skip it entirely and wait for the next value

diff --git a/lib/mojs.js b/lib/mojs.js
@@ -1,6 +1,6 @@
 (function() {
   window.mojs = {
-    revision: '0.161.0',
+    revision: '0.162.0',
     isDebug: true,
     helpers: require('./h'),
     Bit: require('./shapes/bit'),

diff --git a/lib/tween/tween.js b/lib/tween/tween.js
@@ -38,8 +38,8 @@ var Tween = (function () {
 
       var _isReversed = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1];
 
-      // if was played and paused or playing right now
-      // flip time progress in repeatTime bounds
+      // 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';
       if (isPausedReverse || this._state === 'reverse') {
         this._progressTime = this._props.repeatTime - this._progressTime;
@@ -51,7 +51,8 @@ var Tween = (function () {
       // if tween was ended, set progress to 0 if not, set to elapsed progress
       var procTime = this._progressTime >= this._props.repeatTime ? 0 : this._progressTime;
       // set start time regarding passed `shift` and calculated `procTime`
-      this._setStartTime(performance.now() - Math.abs(shift) - procTime);
+      this._playTime = performance.now();
+      this._setStartTime(this._playTime - Math.abs(shift) - procTime);
       // add self to tweener = run
       _tweener2['default'].add(this);this._setPlaybackState('play');
       return this;
@@ -70,10 +71,10 @@ var Tween = (function () {
 
       // if was played and paused or playing right now
       // flip time progress in repeatTime bounds
-      var isPausedPlay = this._state === 'pause' && this._prevState === 'play';
-      if (isPausedPlay || this._state === 'play') {
-        this._progressTime = this._props.repeatTime - this._progressTime;
-      }
+      // var isPausedPlay = this._state === 'pause' && this._prevState === 'play';
+      // if ( isPausedPlay || this._state === 'play' ) {
+      this._progressTime = this._props.repeatTime - this._progressTime;
+      // }
       // play reversed
       this.play(shift, true);
       // overwrite state
@@ -119,6 +120,8 @@ var Tween = (function () {
   }, {
     key: 'setProgress',
     value: function setProgress(progress) {
+      // reset play time
+      this._playTime = null;
       // set start time if there is no one yet.
       if (this._props.startTime == null) {
         this._setStartTime();
@@ -181,6 +184,7 @@ var Tween = (function () {
         duration: 600,
         delay: 0,
         repeat: 0,
+        speed: null,
         yoyo: false,
         easing: 'Linear.None',
         onStart: null,
@@ -278,10 +282,17 @@ var Tween = (function () {
   }, {
     key: '_update',
     value: function _update(time, isGrow) {
-      // this._visualizeProgress( time );
       // Save progress time for pause/play purposes.
       var p = this._props,
           startPoint = p.startTime - p.delay;
+
+      // if speed param was defined - calculate
+      // new time regarding speed
+      if (p.speed && this._playTime) {
+        // play point + ( speed * delta )
+        time = this._playTime + p.speed * (time - this._playTime);
+      }
+
       // if in active area and not ended - save progress time
       if (time > startPoint && time < p.endTime) {
         this._progressTime = time - startPoint;
@@ -298,7 +309,6 @@ var Tween = (function () {
       if (p.isReversed) {
         time = p.endTime - this._progressTime;
       }
-
       // We need to know what direction we are heading in with this tween,
       // so if we don't have the previous update value - this is very first
       // update, - skip it entirely and wait for the next value

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