add tests and fix interpolator

tweenjs · May 17, 2019 · 827f48f · 827f48f
1 parent 6ec941d
commit 827f48f
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 43 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "es6-tween",
-  "version": "5.5.5",
+  "version": "5.5.6",
   "description": "ES6 implementation of amazing tween.js",
   "browser": "bundled/Tween.min.js",
   "cdn": "bundled/Tween.min.js",

diff --git a/src/Interpolator.js b/src/Interpolator.js
@@ -13,11 +13,15 @@ const Interpolator = (a, b) => {
   let origin = typeof a === 'string' ? a : isArray ? a.slice() : { ...a }
   if (isArray) {
     for (let i = 0, len = a.length; i < len; i++) {
-      decompose(i, origin, a, b)
+      if (a[i] !== b[i] || typeof a[i] !== 'number' || typeof b[i] === 'number') {
+        decompose(i, origin, a, b)
+      }
     }
   } else if (typeof a === 'object') {
     for (let i in a) {
-      decompose(i, origin, a, b)
+      if (a[i] !== b[i] || typeof a[i] !== 'number' || typeof b[i] === 'number') {
+        decompose(i, origin, a, b)
+      }
     }
   } else if (typeof a === 'string') {
     a = decomposeString(a)
@@ -32,9 +36,6 @@ const Interpolator = (a, b) => {
         i++
       }
     }
-
-    a.isString = true
-    b.isString = true
   }
   return (t) => {
     if (isArray) {

diff --git a/src/Tween.js b/src/Tween.js
@@ -426,13 +426,17 @@ class Tween {
       ) {
         continue
       }
-      if (Array.isArray(end) && !Array.isArray(start)) {
-        end.unshift(start)
-        for (let i = 0, len = end.length; i < len; i++) {
-          if (typeof end[i] === 'string') {
-            let arrayOfStrings = decomposeString(end[i])
-            arrayOfStrings.isString = true
-            end[i] = arrayOfStrings
+      if (Array.isArray(end)) {
+        if (!Array.isArray(start)) {
+          end.unshift(start)
+          for (let i = 0, len = end.length; i < len; i++) {
+            if (typeof end[i] === 'string') {
+              end[i] = decomposeString(end[i])
+            }
+          }
+        } else {
+          if (end.isString && object[property].isString && !start.isString) {
+            start.isString = true
           }
         }
       }
@@ -720,6 +724,8 @@ class Tween {
         object[property] = end(value)
       } else if (typeof end === 'string' && typeof start === 'number') {
         object[property] = start + parseFloat(end[0] + end.substr(2)) * value
+      } else if (start && end && start.splice && end.splice && start.isString && end.isString) {
+        object[property] = recompose(property, object, _valuesStart, _valuesEnd, value, elapsed)
       } else {
         recompose(property, object, _valuesStart, _valuesEnd, value, elapsed)
       }

diff --git a/src/constants.js b/src/constants.js
@@ -59,24 +59,32 @@ const hex2rgb = (all, hex) => {
 }
 
 export function decomposeString (fromValue) {
-  return typeof fromValue !== 'string'
-    ? fromValue
-    : fromValue
-      .replace(hexColor, hex2rgb)
-      .match(NUM_REGEX)
-      .map((v) => (isNaNForST(v) ? v : +v))
+  if (fromValue && fromValue.splice && fromValue.isString) {
+    return fromValue
+  }
+  const value =
+    typeof fromValue !== 'string'
+      ? fromValue
+      : fromValue
+        .replace(hexColor, hex2rgb)
+        .match(NUM_REGEX)
+        .map((v) => (isNaNForST(v) ? v : +v))
+  value.isString = true
+  return value
 }
 
 // Decompose value, now for only `string` that required
 export function decompose (prop, obj, from, to, stringBuffer) {
   const fromValue = from[prop]
   const toValue = to[prop]
 
-  if (typeof fromValue === 'string' && Array.isArray(toValue)) {
+  if (typeof fromValue === 'number' && typeof toValue === 'number') {
+    //
+  } else if (fromValue && fromValue.splice && fromValue.isString && toValue && toValue.splice && toValue.isString) {
+  } else if (typeof fromValue === 'string' && Array.isArray(toValue)) {
     const fromValue1 = decomposeString(fromValue)
     const toValues = toValue.map(decomposeString)
 
-    fromValue1.isString = true
     from[prop] = fromValue1
     to[prop] = toValues
     return true
@@ -103,14 +111,11 @@ export function decompose (prop, obj, from, to, stringBuffer) {
       toValue1.shift()
     }
 
-    fromValue1.isString = true
-    toValue1.isString = true
-
     from[prop] = fromValue1
     to[prop] = toValue1
     return true
   } else if (typeof fromValue === 'object' && typeof toValue === 'object') {
-    if (Array.isArray(fromValue)) {
+    if (Array.isArray(fromValue) && !fromValue.isString) {
       return fromValue.map((v, i) => decompose(i, obj[prop], fromValue, toValue))
     } else {
       for (let prop2 in toValue) {
@@ -140,22 +145,33 @@ export function recompose (prop, obj, from, to, t, originalT, stringBuffer) {
     if (!fromValue || !toValue) {
       return obj[prop]
     }
-    if (typeof fromValue === 'object' && !!fromValue && fromValue.isString) {
+    if (
+      typeof fromValue === 'object' &&
+      !!fromValue &&
+      fromValue.isString &&
+      toValue &&
+      toValue.splice &&
+      toValue.isString
+    ) {
       let STRING_BUFFER = ''
       for (let i = 0, len = fromValue.length; i < len; i++) {
-        const isRelative = typeof fromValue[i] === 'number' && typeof toValue[i] === 'string' && toValue[i][1] === '='
-        let currentValue =
-          typeof fromValue[i] !== 'number'
-            ? fromValue[i]
-            : isRelative
-              ? fromValue[i] + parseFloat(toValue[i][0] + toValue[i].substr(2)) * t
-              : fromValue[i] + (toValue[i] - fromValue[i]) * t
-        if (isRGBColor(fromValue, i) || isRGBColor(fromValue, i, RGBA)) {
-          currentValue |= 0
-        }
-        STRING_BUFFER += currentValue
-        if (isRelative && originalT === 1) {
-          fromValue[i] = fromValue[i] + parseFloat(toValue[i][0] + toValue[i].substr(2))
+        if (fromValue[i] !== toValue[i] || typeof fromValue[i] !== 'number' || typeof toValue[i] === 'number') {
+          const isRelative = typeof fromValue[i] === 'number' && typeof toValue[i] === 'string' && toValue[i][1] === '='
+          let currentValue =
+            typeof fromValue[i] !== 'number'
+              ? fromValue[i]
+              : isRelative
+                ? fromValue[i] + parseFloat(toValue[i][0] + toValue[i].substr(2)) * t
+                : fromValue[i] + (toValue[i] - fromValue[i]) * t
+          if (isRGBColor(fromValue, i) || isRGBColor(fromValue, i, RGBA)) {
+            currentValue |= 0
+          }
+          STRING_BUFFER += currentValue
+          if (isRelative && originalT === 1) {
+            fromValue[i] = fromValue[i] + parseFloat(toValue[i][0] + toValue[i].substr(2))
+          }
+        } else {
+          STRING_BUFFER += fromValue[i]
         }
       }
       if (!stringBuffer) {

diff --git a/test.js b/test.js
@@ -48,7 +48,22 @@ test('Events', (t) => {
 })
 
 test('Value Interpolation', (t) => {
-  let obj = { a: 0, b: 'B value 1', c: { x: 2 }, d: [3], _e: 4, g: 5, h: 0, j: 0, k: '#000', l: '#0cf', m: '#fc0' }
+  const m = ['rgb(', 0, ', 204, ', 255, ')']
+  m.isString = true
+
+  let obj = {
+    a: 0,
+    b: 'B value 1',
+    c: { x: 2 },
+    d: [3],
+    _e: 4,
+    g: 5,
+    h: 0,
+    j: 0,
+    k: '#000',
+    l: '#0cf',
+    m
+  }
 
   Object.defineProperty(obj, 'e', {
     get () {
@@ -59,6 +74,8 @@ test('Value Interpolation', (t) => {
     }
   })
 
+  const m2 = ['rgb(', 255, ', 204, ', 0, ')']
+  m2.isString = true
   new Tween(obj)
     .to(
       {
@@ -72,7 +89,7 @@ test('Value Interpolation', (t) => {
         j: [1, 2],
         k: ['rgb(100, 100, 100)', 'rgb(200, 200, 200)'],
         l: '#fc0',
-        m: '#0cf'
+        m: 'rgb(255, 204, 0)'
       },
       100
     )
@@ -90,7 +107,7 @@ test('Value Interpolation', (t) => {
   t.is(obj.j, 0)
   t.is(obj.k, 'rgb(0, 0, 0)')
   t.is(obj.l, 'rgb(0, 204, 255)')
-  t.is(obj.m, 'rgb(255, 204, 0)')
+  t.is(obj.m, 'rgb(0, 204, 255)')
 
   update(50)
 
@@ -133,7 +150,7 @@ test('Value Interpolation', (t) => {
   t.is(obj.j, 2, 'Multi-Interpolation not worked as excepted')
   t.is(obj.k, 'rgb(200, 200, 200)', 'Multi-Interpolation not worked as excepted')
   t.is(obj.l, 'rgb(255, 204, 0)', 'String interpolation not worked as excepted')
-  t.is(obj.m, 'rgb(0, 204, 255)', 'String interpolation not worked as excepted')
+  t.is(obj.m, 'rgb(255, 204, 0)', 'Array as string interpolation not worked as excepted')
 })
 
 test('Value Array-based Interpolation', (t) => {