Optimize

Author: codepunkt

package.json

@@ -21,7 +21,9 @@
     "lint": "eslint src",
     "test": "jest --coverage"
   },
-  "dependencies": {},
+  "dependencies": {
+    "lodash": "^4.17.4"
+  },
   "devDependencies": {
     "babel-cli": "^6.18.0",
     "babel-eslint": "^7.1.1",

src/__tests__/props.test.js src/__tests__/parse.test.jssrc/__tests__/props.test.js renamed to src/__tests__/parse.test.js

@@ -1,4 +1,4 @@
-import { getAnimatableProps } from '../props'
+import { getAnimatableProps } from '../parse'
 
 describe('getAnimatableProps', () => {
   test('omits keys that do not exist in both startProps and endProps', () => {

src/__tests__/util.test.js

@@ -1,7 +1,9 @@
+import { isArray, mapKeys, mapValues, pickBy } from 'lodash'
 import stepper from './stepper'
-import { mapValues } from './util'
-import { getAnimatableProps } from './props'
+import { combine } from './values'
+import { getAnimatableProps } from './parse'
 
+// spring presets. selected combinations of stiffness/damping.
 const presets = {
   noWobble: { stiffness: 170, damping: 26 },
   gentle: { stiffness: 120, damping: 14 },
@@ -11,15 +13,51 @@ const presets = {
 
 // default spring options.
 // damping and precision reflect the values of the `wobbly` preset,
-// precision defaults to 3 which should be a good tradeoff between
+// precision defaults to 2 which should be a good tradeoff between
 // animation detail and resulting filesize.
 const defaultOptions = {
   stiffness: 180,
   damping: 12,
-  precision: 3,
+  precision: 2,
+}
+
+export const appendUnits = (object, units) =>
+  mapValues(object, (value, key) => {
+    return isArray(value)
+      ? value.map((value, i) => `${value}${units[key][i]}`)
+      : `${value}${units[key]}`
+  })
+
+// @todo comment
+const buildInterpolation = (stiffness, damping) => {
+  return (start, end) => {
+    const interpolated = []
+    const interpolateArray = isArray(start)
+    let value = interpolateArray ? start[0] : start
+    let velocity = 0
+
+    for (let i = 1; i < 100; i += 1) {
+      if (interpolateArray) {
+        let something
+        for (let j = 0; j < start.length; j += 1) {
+          something = [];
+          [ value, velocity ] = stepper(0.01, value, velocity, end[j], stiffness, damping)
+          something.push(value)
+        }
+        interpolated.push(something)
+      } else {
+        [ value, velocity ] = stepper(0.01, value, velocity, end, stiffness, damping)
+        interpolated.push(value)
+      }
+    }
+
+    return [].concat(start, interpolated, end)
+  }
 }
 
 export const spring = (startProps, endProps, options = {}) => {
+  let result = {}
+
   // define stiffness, damping and precision based on default options
   // and options given in arguments.
   const { stiffness, damping, precision } = Object.assign(
@@ -29,51 +67,65 @@ export const spring = (startProps, endProps, options = {}) => {
     presets[options.preset] || {}
   )
 
-  const animatableProps = getAnimatableProps(startProps, endProps)
-  const startValues = mapValues(animatableProps, ({ start }) => start)
-  const endValues = mapValues(animatableProps, ({ end }) => end)
+  // build an interpolation function based on the given stiffness and
+  // damping values
+  const interpolate = buildInterpolation(stiffness, damping)
 
-  const addUnits = (object) =>
-    mapValues(object, (v, k) => `${v}${animatableProps[k].unit}`)
+  // @todo comment!
+  const data = getAnimatableProps(startProps, endProps)
+  data.forEach(({ prop, unit, start, end }) => {
+    interpolate(start, end).forEach((interpolated, i) => {
+      // round to desired precision (except when interpolating pixels)
+      const value = Number(interpolated.toFixed(unit === 'px' ? 0 : precision))
+      // when the value is 0, there's no need to add a unit.
+      const valueWithUnit = value === 0 ? value : `${value}${unit}`
 
-  const keyframes = {
-    '0%': addUnits(startValues),
-    '100%': addUnits(endValues),
-  }
-
-  Object.keys(startValues).forEach((key) => {
-    let velocity = 0
-    let value = startValues[key]
-    const end = endValues[key]
+      if (result[i] === undefined) {
+        result[i] = { [prop]: valueWithUnit }
+      } else {
+        result[i][prop] = result[i][prop] === undefined
+          ? valueWithUnit
+          : [].concat(result[i][prop], valueWithUnit)
+      }
+    })
+  })
 
-    for (let i = 1; i < 100; i += 1) {
-      [ value, velocity ] = stepper(0.01, value, velocity, end, stiffness, damping)
-      const percent = `${i}%`
-      keyframes[percent] = Object.assign(
-        keyframes[percent] || {},
-        { [key]: `${Number(value.toFixed(precision))}${animatableProps[key].unit}` }
-      )
+  // iterate over the result object, combining values and identifying
+  // equal frames to be able to eliminate duplicates in a later step
+  let prevFrame
+  const obsoleteFrames = []
+  Object.keys(result).forEach((i) => {
+    const currentFrame = JSON.stringify(result[i])
+    result[i] = mapValues(result[i], (value, key) => combine(key, value))
+    if (prevFrame === currentFrame) {
+      obsoleteFrames.push(i - 1)
     }
+    prevFrame = currentFrame
   })
 
-  return keyframes
+  // remove obsolute frames to reduce size and add % to keys
+  // @todo might chain this - not using chain.
+  // @see https://medium.com/making-internets/why-using-chain-is-a-mistake-9bc1f80d51ba
+  result = mapKeys(
+    pickBy(result, (value, key) => obsoleteFrames.indexOf(Number(key)) < 0),
+    (value, key) => `${key}%`
+  )
+
+  console.log(result)
+  return result
 }
 
-// console.log(spring({
-//   left: '10px',
-//   right: '20em',
-//   foo: 'bar',
-//   opacity: 0,
-//   rotate: '5deg'
-// }, {
-//   left: '20px',
-//   right: '30em',
-//   baz: true,
-//   opacity: 1,
-//   rotate: '10deg'
-// }, {
-//   preset: 'noWobble'
-// }))
+spring({
+  left: '10px',
+  right: '20px',
+  padding: '0 0 10px 10rem',
+}, {
+  left: '20px',
+  right: 0,
+  padding: '10em 10em 0 20rem',
+}, {
+  preset: 'noWobble',
+})
 
 export { default as toString } from './to-string'
 export default spring

src/index.js

@@ -0,0 +1,76 @@
+import { split } from './values'
+import { isArray, map } from 'lodash'
+
+// this splits css numbers from units.
+// according to the css spec, a number can either be an integer or it can be
+// zero or more digits followed by a dot followed by one or more digits.
+// assuming the unit can be any sequence of lowercase letters (including none)
+const numberUnitSplit = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/
+
+// WAT
+const parseUnit = (startProp, endProp) => {
+  const startMatches = startProp.toString().match(numberUnitSplit)
+  const endMatches = endProp.toString().match(numberUnitSplit)
+
+  // when start and end match css number with optional unit
+  if (startMatches && endMatches) {
+    const startUnit = startMatches[2]
+    const endUnit = endMatches[2]
+
+    // when start unit is the same as end unit or one of them is unitless
+    if (startUnit === endUnit || !startUnit || !endUnit) {
+      return {
+        unit: startUnit || endUnit,
+        start: Number(startMatches[1]),
+        end: Number(endMatches[1]),
+      }
+    }
+  }
+}
+
+// returns an object that lists the unit, start and end values of the
+// animatable properties based on the given arguments.
+// to be animatable, a property has to be present on both `startProps` and
+// `endProps` with a numeric value and same unit for both or unitless for one
+// of them which will then take the unit of the other.
+export const getAnimatableProps = (startProps, endProps) => {
+  let result = []
+
+  // @todo check if props are listed in animatable properties!
+  // @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
+  // @see https://github.com/gilmoreorless/css-animated-properties
+  for (let prop in startProps) {
+    if (prop in endProps) {
+      const startProp = split(prop, startProps[prop])
+      const endProp = split(prop, endProps[prop])
+
+      if (isArray(startProp) && isArray(endProp) && startProp.length === endProp.length) {
+        // array of values
+        const temp = []
+        for (let key in startProp) {
+          if ({}.hasOwnProperty.call(startProp, key)) {
+            const parsed = parseUnit(startProp[key], endProp[key])
+
+            if (parsed) {
+              const { unit, start, end } = parsed
+              temp.push({ prop, unit, start, end })
+            }
+          }
+        }
+        if (temp.length === startProp.length) {
+          result = result.concat(temp)
+        }
+      } else {
+        // probably single values
+        const parsed = parseUnit(startProp, endProp)
+
+        if (parsed) {
+          const { unit, start, end } = parsed
+          result.push({ prop, unit, start, end })
+        }
+      }
+    }
+  }
+
+  return result
+}

src/parse.js

@@ -3,7 +3,7 @@
 const reusedTuple = [ 0, 0 ]
 
 // eslint-disable-next-line max-params
-export default (secondPerFrame, x, v, destX, k, b, precision = 0.01) => {
+const stepper = (secondPerFrame, x, v, destX, k, b, precision = 0.01) => {
   // Spring stiffness, in kg / s^2
 
   // for animations, destX is really spring length (spring at rest). initial
@@ -21,6 +21,8 @@ export default (secondPerFrame, x, v, destX, k, b, precision = 0.01) => {
   const newV = v + (a * secondPerFrame)
   const newX = x + (newV * secondPerFrame)
 
+  stepper.count += 1
+
   if (Math.abs(newV) < precision && Math.abs(newX - destX) < precision) {
     reusedTuple[0] = destX
     reusedTuple[1] = 0
@@ -31,3 +33,6 @@ export default (secondPerFrame, x, v, destX, k, b, precision = 0.01) => {
   reusedTuple[1] = newV
   return reusedTuple
 }
+
+stepper.count = 0
+export default stepper