* fix = Timeline.js

dalisoft · dalisoft · commit 52ee9b3c4d83 · 2017-08-18T22:37:45.000+05:00
* NEW ISSUE = Tests didn't pass ( i see it, when have time )
diff --git a/README.md b/README.md
@@ -36,6 +36,7 @@ Starting at `v3`, we provide excluded plugins from core, so our core has lighter
 
 * Demo #1 [Morphing SVG Shape + Cross-browser SVG Transform](https://codepen.io/dalisoft/pen/mMJmxX)
 * Demo #2 [Morphing SVG Shape](https://codepen.io/dalisoft/pen/BdLydv)
+* Demo #3 [Timeline](https://codepen.io/dalisoft/pen/mMRWdr)
 
 ## Installation
 
diff --git a/examples/test.html b/examples/test.html
@@ -3,7 +3,7 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, minimum-scale=1.0">
-	<title>TWEEN.js</title>
+	<title>es6-tween</title>
 	<style>
 		#container {
 			width: 200px;
@@ -33,10 +33,14 @@
 			return Math.random() * (max - min) + min;
 		}
 
+		function update (v, t) {
+			v.el.style.left = (v.x | 0) + 'px';
+		}
+
 		var nodes = [],
 			c = document.getElementById("container"),
 			easing = "quadraticInOut",
-			ratio = 0.9,
+			ratio = 0.8,
 			wIh = (window.innerHeight || screen.height - 40) * ratio,
 			wIw = window.innerWidth,
 			hwiw = (wIw / 5) * ratio,
@@ -53,14 +57,12 @@
 					tl = Math.floor(random(-200, 200));
 				div.setAttribute("class", "line");
 				div.style.top = [(Math.random() * wIh), "px"].join("");
-				div.style.transform = "translate3d(" + l + "px, 0px, 0px)";
-				//div.style.left = l + "px";
+				//div.style.transform = "translate3d(" + l + "px, 0px, 0px)";
+				div.style.left = l + "px";
 				div.style.backgroundColor = bgC;
 				var a = new TWEEN.Tween({ x: l, el: div }).to({
 					x: tl
-				}, 1000).easing(TWEEN.Easing.Circular.InOut).on('update', ({el, x}) => {
-					el.style.transform = `translate3d(${x}px, 0px, 0px)`
-				}).repeat(Infinity).yoyo(true).start();
+				}, 1000).on('update', update).easing(TWEEN.Easing.Quadratic.InOut).repeat(Infinity).yoyo(true).start();
 
 				frag.appendChild(div);
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "es6-tween",
-	"version": "3.1.0",
+	"version": "3.2.0",
 	"description": "ES6 implementation of amazing tween.js",
 	"browser": "dist/Tween.min.js",
 	"cdn": "dist/Tween.min.js",
diff --git a/src/Tween.js b/src/Tween.js
@@ -1,7 +1,7 @@
-import { nextId, has, get, getAll, removeAll, remove, add, now, update, autoPlay, Plugins } from './dist/core'
+import { nextId, has, get, getAll, removeAll, remove, add, now, update, autoPlay, Plugins, isRunning } from './dist/core'
 import Easing from './dist/Easing'
 import Tween from './dist/Tween'
 import Interpolation from './dist/Interpolation'
 import Timeline from './dist/Timeline'
 import SubTween from './dist/SubTween'
-export { Plugins, SubTween as Interpolator, nextId, has, get, getAll, removeAll, remove, add, now, update, autoPlay, Tween, Easing, Interpolation, Timeline }
+export { Plugins, SubTween as Interpolator, nextId, has, get, getAll, removeAll, remove, add, now, update, autoPlay, isRunning, Tween, Easing, Interpolation, Timeline }
diff --git a/src/dist/Event.js b/src/dist/Event.js
@@ -3,11 +3,6 @@ export default class EventClass {
     this._events = {}
   }
 
-  bind (scope) {
-    this._bind = scope
-    return this
-  }
-
   on (event, callback) {
     if (!this._events[event]) {
       this._events[event] = []
@@ -22,10 +17,10 @@ export default class EventClass {
       this._events[event] = []
     }
 
-    let {_events, _bind} = this
+    let {_events} = this
     let spliceIndex = _events[event].length
     this._events[event].push((...args) => {
-      callback.apply(_bind, args)
+      callback.apply(this, args)
       _events[event].splice(spliceIndex, 1)
     })
     return this
@@ -48,7 +43,7 @@ export default class EventClass {
   }
 
   emit (event, arg1, arg2, arg3, arg4) {
-    let {_events, _bind} = this
+    let {_events} = this
 
     if (event === undefined || !_events[event]) {
       return this
@@ -57,7 +52,7 @@ export default class EventClass {
     let _event = _events[event]
 
     for (let i = 0, length = _event.length; i < length; i++) {
-      _event[i].call(_bind, arg1, arg2, arg3, arg4)
+      _event[i](arg1, arg2, arg3, arg4)
     }
   }
 }
diff --git a/src/dist/Interpolation.js b/src/dist/Interpolation.js
@@ -58,7 +58,7 @@ const Interpolation = {
   Utils: {
 
     Linear (p0, p1, t) {
-      return typeof p1 === 'function' ? p1(t) : (p1 - p0) * t + p0
+      return typeof p0 === 'function' ? p0(t) : (p1 - p0) * t + p0
     },
 
     Bernstein (n, i) {
diff --git a/src/dist/NodeCache.js b/src/dist/NodeCache.js
@@ -3,7 +3,7 @@ export default function (node, tween) {
   if (!node) return tween
   if (Store[node]) {
     if (tween) {
-      return tween
+      return Object.assign(Store[node], tween)
     }
     return Store[node]
   }
diff --git a/src/dist/SubTween.js b/src/dist/SubTween.js
@@ -106,8 +106,6 @@ const SubTween = (start, end, roundv = 10000) => {
       return s
     }
   } else if (!Array.isArray(start) && Array.isArray(end)) {
-    end.unshift(start)
-    end.push(end[end.length - 1])
     return end.map((v, i) => SubTween(i === 0 ? start : end[i - 1], v))
   } else {
     return end
diff --git a/src/dist/Timeline.js b/src/dist/Timeline.js
@@ -1,51 +1,29 @@
-import Tween from './Tween'
-import { add, now, nextId } from './core'
+import Tween, { EVENT_UPDATE, EVENT_RS, EVENT_REPEAT, EVENT_REVERSE, EVENT_COMPLETE } from './Tween'
+import { add, now } from './core'
+import PlaybackPosition from './PlaybackPosition'
 
+let _id = 0
 class Timeline extends Tween {
   constructor (params) {
     super()
     this._totalDuration = 0
     this._startTime = now()
     this._tweens = {}
-    this._timing = []
     this._elapsed = 0
-    this._id = nextId()
-    this._labels = {}
+    this._id = _id++
     this._defaultParams = params
+    this.position = new PlaybackPosition()
+    this.position.addLabel('afterLast', this._totalDuration)
+    this.position.addLabel('afterInit', this._startTime)
 
     return this
   }
 
-  setLabel (name, value) {
-    this._labels[name] = this.parsePosition(0, value, 0)
+  addLabel (name, offset) {
+    this.position.addLabel(name, offset)
     return this
   }
 
-  parsePosition (startTime, input, total) {
-    let position = startTime + total
-
-    if (typeof input === 'string') {
-      for (let label in this._labels) {
-        if (input.indexOf(label) === 0) {
-          let inp = input.split(label)[1]
-
-          if (inp.length === 0 || (inp[0] === '+' || inp[0] === '-')) {
-            position = this._labels[label] + startTime
-            input = input.replace(label, '')
-          }
-        }
-      }
-
-      if (input.indexOf('+') === 0 || input.indexOf('-') === 0) {
-        position += parseFloat(input)
-      }
-    } else if (typeof input === 'number') {
-      position += input
-    }
-
-    return Math.max(0, position)
-  }
-
   map (fn) {
     for (let tween in this._tweens) {
       let _tween = this._tweens[tween]
@@ -62,7 +40,7 @@ class Timeline extends Tween {
       })
       return this
     } else if (typeof tween === 'object' && !(tween instanceof Tween)) {
-      tween = new Tween(tween.from, tween)
+      tween = new Tween(tween.from).to(tween.to, tween)
     }
 
     let {
@@ -76,10 +54,12 @@ class Timeline extends Tween {
       }
     }
 
-    tween._startTime = this.parsePosition(now() + tween._delayTime, position, _totalDuration)
-    this._timing[tween.id] = tween._startTime
-    this._totalDuration = Math.max(_totalDuration, tween._duration + tween._startTime + tween._delayTime)
+    const offset = typeof position === 'number' ? position : this.position.parseLabel(typeof position !== 'undefined' ? position : 'afterLast', null)
+    tween._startTime = this._startTime
+    tween._startTime += offset
+    this._totalDuration = Math.max(_totalDuration, tween._startTime + tween._delayTime + tween._duration)
     this._tweens[tween.id] = tween
+    this.position.setLabel('afterLast', this._totalDuration)
     return this
   }
 
@@ -88,7 +68,7 @@ class Timeline extends Tween {
 
     add(this)
 
-    return this.emit('restart')
+    return this.emit(EVENT_RS)
   }
 
   easing (easing) {
@@ -101,11 +81,7 @@ class Timeline extends Tween {
 
   reverse () {
     this._reversed = !this._reversed
-    this._timing = this._timing.reverse()
-    for (let tween in this._tweens) {
-      this._tweens[tween]._startTime = this._timing[+tween]
-    }
-    return this
+    return this.emit(EVENT_REVERSE)
   }
 
   update (time) {
@@ -117,7 +93,8 @@ class Timeline extends Tween {
       _startTime,
       _reversed,
       _yoyo,
-      _repeat
+      _repeat,
+      _isFinite
     } = this
 
     if (time < _startTime) {
@@ -142,15 +119,15 @@ class Timeline extends Tween {
       }
     }
 
-    this.emit('update', elapsed, timing)
+    this.emit(EVENT_UPDATE, elapsed, timing)
 
     if (elapsed === 1 || (_reversed && elapsed === 0)) {
       if (_repeat) {
-        if (isFinite(_repeat)) {
+        if (_isFinite) {
           this._repeat--
         }
 
-        this.emit(_reversed ? 'reverse' : 'repeat')
+        this.emit(_reversed ? EVENT_REVERSE : EVENT_REPEAT)
 
         if (_yoyo) {
           this.reverse()
@@ -169,11 +146,12 @@ class Timeline extends Tween {
           if (_tween.skip) {
             _tween.skip = false
           }
+          _tween.reassignValues()
         }
 
         return true
       } else {
-        this.emit('complete')
+        this.emit(EVENT_COMPLETE)
         this._repeat = this._r
 
         for (let tween in _tweens) {
diff --git a/src/dist/Tween.js b/src/dist/Tween.js
diff --git a/src/dist/core.js b/src/dist/core.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "es6-tween",`
`3`		`- "version": "3.1.0",`
	`3`	`+ "version": "3.2.0",`
`4`	`4`	`"description": "ES6 implementation of amazing tween.js",`
`5`	`5`	`"browser": "dist/Tween.min.js",`
`6`	`6`	`"cdn": "dist/Tween.min.js",`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ export default function (node, tween) {`
`3`	`3`	`if (!node) return tween`
`4`	`4`	`if (Store[node]) {`
`5`	`5`	`if (tween) {`
`6`		`- return tween`
	`6`	`+ return Object.assign(Store[node], tween)`
`7`	`7`	`}`
`8`	`8`	`return Store[node]`
`9`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -106,8 +106,6 @@ const SubTween = (start, end, roundv = 10000) => {`
`106`	`106`	`return s`
`107`	`107`	`}`
`108`	`108`	`} else if (!Array.isArray(start) && Array.isArray(end)) {`
`109`		`- end.unshift(start)`
`110`		`- end.push(end[end.length - 1])`
`111`	`109`	`return end.map((v, i) => SubTween(i === 0 ? start : end[i - 1], v))`
`112`	`110`	`} else {`
`113`	`111`	`return end`