* Supporting complex tweening

* Fix `TWEEN.update` auto-call

Author: dalisoft

API.md

@@ -937,7 +937,7 @@ Set easing
 
 | Param | Type | Description |
 | --- | --- | --- |
-| _easingFunction | <code>function</code> | Easing function in non-reverse direction |
+| _easingFunction | <code>function</code> | Easing function, applies in non-reverse direction if Tween#yoyo second argument is applied |
 
 **Example**  
 ```js

examples/test.html

@@ -25,8 +25,8 @@
 
 	<div id="container"></div>
 
-	<script src="../dist/Tween.js"></script>
-	<script src="../../es6-tween-plugins/renderer/index.js"></script>
+	<script src="../full/Tween.js"></script>
+	<script src="../../es6-tween-plugins/renderer/render.js"></script>
 	<script !src="../../es6-tween-plugins/transform/transform.js"></script>
 	<script>
 		TWEEN.autoPlay(true);
@@ -62,10 +62,10 @@
 					tl = Math.floor(random(-200, 200));
 				div.setAttribute("class", "line");
 				div.style.top = [(Math.random() * wIh), "px"].join("");
-				div.style.left = l + 'px';
-				//div.style.transform = "translate3d(" + l + "px, 0px, 0px)";
+				//div.style.left = l + 'px';
+				div.style.transform = "translate3d(" + l + "px, 0px, 0px)";
 				div.style.backgroundColor = bgC;
-				var a = new TWEEN.Tween(div, { left : l }).to({ left: tl }, 1000).easing(TWEEN.Easing.Quadratic.InOut).repeat(Infinity).yoyo(true).start();
+				var a = new TWEEN.Tween(div, { x : l }).to({ x: tl }, 1000).easing(TWEEN.Easing.Quadratic.InOut).repeat(Infinity).yoyo(true).start();
 
 				frag.appendChild(div);
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "es6-tween",
-  "version": "3.8.9",
+  "version": "3.8.11",
   "description": "ES6 implementation of amazing tween.js",
   "browser": "full/Tween.min.js",
   "cdn": "full/Tween.min.js",
@@ -23,8 +23,8 @@
     "lint": "eslint --fix src",
     "test": "npm run lint && ava --verbose",
     "prepublish": "npm run prepare && npm run test && npm run doc && npm run doc-md",
-    "doc": "tsc && jsdoc --tutorials guide_notes --readme README.md --configure jsdoc.json --verbose",
-    "doc-md": "tsc && jsdoc2md src/** > API.md"
+    "doc": "jsdoc --tutorials guide_notes --readme README.md --configure jsdoc.json --verbose",
+    "doc-md": "jsdoc2md src/** > API.md"
   },
   "repository": {
     "type": "git",
@@ -62,6 +62,6 @@
     "uglify-es": "latest"
   },
   "dependencies": {
-    "intertween": "0.0.17"
+    "intertween": "0.0.25"
   }
 }

ts/Tween.ts

@@ -49,9 +49,7 @@ export interface RenderType {
 class Tween extends EventClass {
   public id: number
   public object: Object
-  public _valuesStart: Object
-  public _valuesFunc: Object
-  public _valuesEnd: Object
+  public _valuesEnd: any
   public _duration: number
   public _easingFunction: Function
   public _easingReverse: Function
@@ -69,7 +67,6 @@ class Tween extends EventClass {
   public _isFinite: boolean
   public _isPlaying: boolean
   public _elapsed: number
-  public isArr: boolean
   private _onStartCallbackFired: boolean
   private _rendered: boolean
   private __render: RenderType
@@ -133,10 +130,7 @@ class Tween extends EventClass {
         this.object = object
       }
     }
-    const isArr = this.isArr = Array.isArray(object)
-    this._valuesStart = isArr ? [] : {}
     this._valuesEnd = null
-    this._valuesFunc = {}
 
     this._duration = 1000
     this._easingFunction = defaultEasing
@@ -313,53 +307,33 @@ class Tween extends EventClass {
    */
   public render() {
     if (this._rendered) {
-      return this
+      return this;
     }
-
-    let {
-      _valuesEnd,
-      _valuesFunc,
-      _valuesStart,
-      object,
-      Renderer,
-      node,
-      InitialValues
-    } = this
-
+    let { _valuesEnd, object, Renderer, node, InitialValues, _easingFunction } = this;
     if (node && InitialValues) {
       if (!object) {
-        object = this.object = NodeCache(node, InitialValues(node, _valuesEnd))
-      } else if (!_valuesEnd) {
-        _valuesEnd = this._valuesEnd = InitialValues(node, object)
+        object = this.object = NodeCache(node, InitialValues(node, _valuesEnd));
+      }
+      else if (!_valuesEnd) {
+        _valuesEnd = this._valuesEnd = InitialValues(node, object);
       }
     }
-
     for (const property in _valuesEnd) {
-      const start = object && object[property]
-      const end = _valuesEnd[property]
-
+      const start = object && object[property];
+      const end = _valuesEnd[property];
       if (Plugins[property]) {
-        const plugin = Plugins[property].prototype.update ? new Plugins[property](this, start, end, property, object) : Plugins[property](this, start, end, property, object)
+        const plugin = Plugins[property].prototype.update ? new Plugins[property](this, start, end, property, object) : Plugins[property](this, start, end, property, object);
         if (plugin) {
-          _valuesFunc[property] = plugin
+          _valuesEnd[property] = plugin;
         }
-        continue
-      }
-
-      if (!object || object[property] === undefined) {
-        continue
-      }
-
-      if (typeof end === 'number' && typeof start === 'number') {
-        _valuesStart[property] = start
-        _valuesEnd[property] = end
-      } else {
-        _valuesFunc[property] = InterTween(start, end)
+        continue;
       }
     }
 
+    this._valuesEnd = InterTween(object, _valuesEnd, null, _easingFunction)
+
     if (Renderer && this.node) {
-      this.__render = new Renderer(this, object, _valuesEnd)
+      this.__render = new Renderer(this, object, _valuesEnd);
     }
 
     return this
@@ -491,22 +465,17 @@ class Tween extends EventClass {
    */
   public reassignValues() {
     const {
-      _valuesStart,
       _valuesEnd,
-      object,
-      isArr
+      object
     } = this
 
-    let property: any
-    for (property in _valuesEnd) {
-      if (isArr) {
-        property = parseInt(property)
-      }
+    const _valuesStart: any = _valuesEnd(0)
+
+    for (const property in _valuesStart) {
 
       const start = _valuesStart[property]
-      const end = _valuesEnd[property]
 
-      object[property] = typeof end === 'function' ? end(0) : start
+      object[property] = start
     }
 
     return this
@@ -520,7 +489,7 @@ class Tween extends EventClass {
    * @memberof Tween
    */
   public update(time: number, preserve?: boolean) {
-    const {
+    let {
       _onStartCallbackFired,
       _easingFunction,
       _easingReverse,
@@ -531,19 +500,15 @@ class Tween extends EventClass {
       _reversed,
       _startTime,
       _duration,
-      _valuesStart,
       _valuesEnd,
-      _valuesFunc,
       object,
       _isFinite,
       _isPlaying,
       __render
     } = this
 
-    let elapsed
-    let value
-    let property
-    let currentEasing
+    let elapsed: number
+    let currentEasing: Function
 
     time = time !== undefined ? time : now()
 
@@ -555,6 +520,7 @@ class Tween extends EventClass {
       if (!this._rendered) {
         this.render()
         this._rendered = true
+        _valuesEnd = this._valuesEnd
       }
 
       this.emit(EVENT_START, object)
@@ -568,27 +534,11 @@ class Tween extends EventClass {
 
     currentEasing = _reversed ? _easingReverse : _easingFunction
 
-    if (!object) {
+    if (typeof _valuesEnd !== 'function' || !object) {
       return true
     }
 
-    for (property in _valuesEnd) {
-      value = currentEasing[property] ? currentEasing[property](elapsed) : typeof currentEasing === 'function' ? currentEasing(elapsed) : defaultEasing(elapsed)
-
-      const start = _valuesStart[property]
-      const end = _valuesEnd[property]
-      const fnc = _valuesFunc[property]
-
-      if (fnc && fnc.update) {
-        fnc.update(value, elapsed)
-      } else if (fnc) {
-        object[property] = fnc(value)
-      } else if (typeof end === 'number') {
-        object[property] = start + (end - start) * value
-      } else {
-        object[property] = end
-      }
-    }
+    _valuesEnd(elapsed, elapsed, currentEasing)
 
     if (__render) {
       __render.update(object, elapsed)

ts/core.ts

@@ -44,7 +44,7 @@ const add = (tween) => {
  * @example
  * TWEEN.onTick(time => console.log(time))
  */
-const onTick = fn => _tweens.push({update:fn})
+const onTick = fn => _tweens.push({ update: fn })
 
 /**
  * @returns {Array<Tween>} List of tweens in Array
@@ -147,7 +147,9 @@ const now = (function () {
 const update = (time: number, preserve?: boolean) => {
   time = time !== undefined ? time : now()
 
-  _tick = _ticker(update)
+  if (_autoPlay && isStarted) {
+    _tick = _ticker(update)
+  }
 
   if (_tweens.length === 0) {
     _stopTicker(_tick)