Active tween in-sync improvements

- Selector instance, makes calling easier

Author: dalisoft

.eslintrc

@@ -87,7 +87,6 @@
     "no-mixed-operators": ["error", {
       "groups": [
         ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
-        ["&&", "||"],
         ["in", "instanceof"]
       ],
       "allowSamePrecedence": true

API.md

@@ -33,36 +33,21 @@ Lightweight, effecient and modular ES6 version of tween.js
 ```
 
 * [TWEEN](#TWEEN) : <code>object</code>
-    * [.lastTime](#TWEEN.lastTime)
     * [.Plugins](#TWEEN.Plugins) : <code>object</code>
     * [.Easing](#TWEEN.Easing) : <code>object</code>
     * [.Interpolation](#TWEEN.Interpolation) : <code>object</code>
+    * [.now](#TWEEN.now) ⇒
     * [.add(tween)](#TWEEN.add)
     * [.onTick(fn)](#TWEEN.onTick)
     * [.autoPlay(state)](#TWEEN.autoPlay)
     * [.removeAll()](#TWEEN.removeAll)
     * [.get(tween)](#TWEEN.get) ⇒ [<code>Tween</code>](#Tween)
     * [.has(tween)](#TWEEN.has) ⇒ <code>Boolean</code>
     * [.remove(tween)](#TWEEN.remove)
+    * [.update(time, [preserve])](#TWEEN.update)
     * [.getTime()](#TWEEN.getTime) ⇒ <code>number</code> \| <code>Time</code>
     * [.isRunning()](#TWEEN.isRunning) ⇒ <code>Boolean</code>
 
-<a name="TWEEN.lastTime"></a>
-
-### TWEEN.lastTime
-Updates global tweens by given time
-
-**Kind**: static property of [<code>TWEEN</code>](#TWEEN)  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| time | <code>number</code> \| <code>Time</code> | Timestamp |
-| [preserve] | <code>Boolean</code> | Prevents tween to be removed after finish |
-
-**Example**  
-```js
-TWEEN.update(500)
-```
 <a name="TWEEN.Plugins"></a>
 
 ### TWEEN.Plugins : <code>object</code>
@@ -93,6 +78,17 @@ List of full Interpolation
 ```js
 import {Interpolation, Tween} from 'es6-tween'let bezier = Interpolation.Beziernew Tween({x:0}).to({x:[0, 4, 8, 12, 15, 20, 30, 40, 20, 40, 10, 50]}, 1000).interpolation(bezier).start()
 ```
+<a name="TWEEN.now"></a>
+
+### TWEEN.now ⇒
+Get browser/Node.js current time-stamp
+
+**Kind**: static constant of [<code>TWEEN</code>](#TWEEN)  
+**Returns**: Normalised current time-stamp in milliseconds  
+**Example**  
+```js
+TWEEN.now()
+```
 <a name="TWEEN.add"></a>
 
 ### TWEEN.add(tween)
@@ -191,6 +187,22 @@ Removes tween from list
 ```js
 TWEEN.remove(tween)
 ```
+<a name="TWEEN.update"></a>
+
+### TWEEN.update(time, [preserve])
+Updates global tweens by given time
+
+**Kind**: static method of [<code>TWEEN</code>](#TWEEN)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| time | <code>number</code> \| <code>Time</code> | Timestamp |
+| [preserve] | <code>Boolean</code> | Prevents tween to be removed after finish |
+
+**Example**  
+```js
+TWEEN.update(500)
+```
 <a name="TWEEN.getTime"></a>
 
 ### TWEEN.getTime() ⇒ <code>number</code> \| <code>Time</code>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "es6-tween",
-  "version": "3.8.13",
+  "version": "3.8.14",
   "description": "ES6 implementation of amazing tween.js",
   "browser": "full/Tween.min.js",
   "cdn": "full/Tween.min.js",

ts/NodeCache.ts

@@ -2,14 +2,16 @@ import { assign } from './shim'
 
 const Store = {}
 export default function (node, tween) {
-  if (!node || !node.nodeType || !tween) return tween
+  if (!node || !node.nodeType) {
+    return tween
+  }
   const ID = node.queueID || 'q_' + Date.now()
   if (!node.queueID) {
     node.queueID = ID
   }
   if (Store[ID]) {
     if (tween) {
-      Store[ID] = assign(Store[ID], tween)
+      Store[ID] = tween//assign(Store[ID], tween)
     }
     return Store[ID]
   }

ts/Timeline.ts

@@ -1,6 +1,7 @@
 import { add, now, remove, getTime } from './core'
 import PlaybackPosition from './PlaybackPosition'
 import Tween, { EVENT_COMPLETE, EVENT_REPEAT, EVENT_REVERSE, EVENT_RS, EVENT_UPDATE } from './Tween'
+import Selector from './selector'
 
 export const shuffle = (a) => {
   let j
@@ -94,16 +95,18 @@ class Timeline extends Tween {
    * @static
    */
   public fromTo(nodes, from, to, params) {
-    if (Array.isArray(nodes)) {
+    nodes = Selector(nodes, true)
+    if (nodes && nodes.length) {
       if (this._defaultParams) {
         params = { ...this._defaultParams, ...params }
       }
       const position = params.label
       const offset = typeof position === 'number' ? position : this.position.parseLabel(typeof position !== 'undefined' ? position : 'afterLast', null)
       const mode = this.getTiming(params.mode, nodes, params, offset)
-      nodes.map((node, i) => {
+      for (let i = 0, node, len = nodes.length; i < len; i++) {
+        node = nodes[i]
         this.add(Tween.fromTo(node, typeof from === 'function' ? from(i, nodes.length) : { ...from }, typeof to === 'function' ? to(i, nodes.length) : to, typeof params === 'function' ? params(i, nodes.length) : params), mode[i])
-      })
+      }
     }
     return this.start()
   }

ts/Tween.ts

@@ -11,6 +11,7 @@ import {
 import Easing from './Easing'
 import EventClass from './Event'
 import NodeCache from './NodeCache'
+import Selector from './selector'
 
 Object.create = create
 
@@ -121,16 +122,12 @@ class Tween extends EventClass {
     super()
 
     this.id = _id++
-    if (typeof node !== 'undefined' && !object && !node.nodeType) {
+    if (!!node && typeof node === 'object' && !object && !node.nodeType) {
       object = this.object = node
       node = null
-    } else if (typeof node !== 'undefined') {
-      this.node = node
-      if (typeof object === 'object') {
-        object = this.object = NodeCache(node, object)
-      } else {
-        this.object = object
-      }
+    } else if (!!node && (node.nodeType || node.length || typeof node === 'string')) {
+      node = this.node = Selector(node)
+      object = this.object = NodeCache(node, object)
     }
     this._valuesEnd = null
     this._valuesFunc = null

ts/core.ts

@@ -3,6 +3,36 @@ import { cancelAnimationFrame, requestAnimationFrame, root } from './shim'
 
 declare let process: any
 
+/**
+ * Get browser/Node.js current time-stamp
+ * @return Normalised current time-stamp in milliseconds
+ * @memberof TWEEN
+ * @example
+ * TWEEN.now()
+ */
+const now: any = (function () {
+  if (typeof (process) !== 'undefined' && process.hrtime !== undefined) {
+    return function () {
+      const time: number = process.hrtime()
+
+      // Convert [seconds, nanoseconds] to milliseconds.
+      return time[0] * 1000 + time[1] / 1000000
+    }
+    // In a browser, use window.performance.now if it is available.
+  } else if (root.performance !== undefined &&
+    root.performance.now !== undefined) {
+    // This must be bound, because directly assigning this function
+    // leads to an invocation exception in Chrome.
+    return root.performance.now.bind(root.performance)
+    // Use Date.now if it is available.
+  } else {
+    const offset: number = root.performance && root.performance.timing && root.performance.timing.navigationStart ? root.performance.timing.navigationStart : Date.now()
+    return function () {
+      return Date.now() - offset
+    }
+  }
+}())
+
 /**
  * Lightweight, effecient and modular ES6 version of tween.js
  * @copyright 2017 @dalisoft and es6-tween contributors
@@ -18,6 +48,10 @@ let _autoPlay: boolean = false
 let _tick: Function
 const _ticker: Function = requestAnimationFrame
 const _stopTicker: Function = cancelAnimationFrame
+let lastTime: number = now()
+let delta: number = 0
+let timeDiff: number = 0
+let frameMs: number = 50 / 3
 
 /**
  * Adds tween to list
@@ -34,6 +68,8 @@ const add = (tween: any): void => {
   if (_autoPlay && !isStarted) {
     _tick = _ticker(update)
     isStarted = true
+    timeDiff += now() - lastTime
+    lastTime = now()
   }
 }
 
@@ -113,29 +149,6 @@ const remove = (tween: any): void => {
   }
 }
 
-const now: any = (function () {
-  if (typeof (process) !== 'undefined' && process.hrtime !== undefined) {
-    return function () {
-      const time: number = process.hrtime()
-
-      // Convert [seconds, nanoseconds] to milliseconds.
-      return time[0] * 1000 + time[1] / 1000000
-    }
-    // In a browser, use window.performance.now if it is available.
-  } else if (root.performance !== undefined &&
-    root.performance.now !== undefined) {
-    // This must be bound, because directly assigning this function
-    // leads to an invocation exception in Chrome.
-    return root.performance.now.bind(root.performance)
-    // Use Date.now if it is available.
-  } else {
-    const offset: number = root.performance && root.performance.timing && root.performance.timing.navigationStart ? root.performance.timing.navigationStart : Date.now()
-    return function () {
-      return Date.now() - offset
-    }
-  }
-}())
-
 /**
  * Updates global tweens by given time
  * @param {number|Time} time Timestamp
@@ -145,10 +158,6 @@ const now: any = (function () {
  * TWEEN.update(500)
  */
 
-let lastTime: number = now()
-let delta: number = 0
-let timeDiff: number = 0
-let frameMs: number = 50 / 3
 const update = (time: number, preserve?: boolean): boolean => {
   time = time !== undefined ? time : now()
   delta = time - lastTime

ts/index.ts

@@ -3,5 +3,6 @@ import { add, onTick, autoPlay, get, getAll, has, isRunning, now, Plugins, remov
 import Easing from './Easing'
 import Timeline from './Timeline'
 import Tween from './Tween'
+import Selector from './selector'
 import './shim'
 export { Plugins, Interpolator, onTick, has, get, getAll, removeAll, remove, add, now, update, autoPlay, isRunning, Tween, Easing, Timeline }