animated spring cleaning and MIT license

Author: drcmda

src/animated/AnimatedArray.js

@@ -6,57 +6,51 @@ import guid from './guid'
 class AnimatedArray extends AnimatedWithChildren {
     constructor(array) {
         super()
-        this.values = array.map(n => new AnimatedValue(n))
+        this._values = array.map(n => new AnimatedValue(n))
         this._listeners = {}
     }
 
     setValue(values) {
-        values.forEach((n, i) => this.values[i].setValue(n))
+        values.forEach((n, i) => this._values[i].setValue(n))
     }
 
     setOffset(values) {
-        values.forEach((n, i) => this.values[i].setOffset(n))
+        values.forEach((n, i) => this._values[i].setOffset(n))
     }
 
     flattenOffset() {
-        this.values.forEach(v => v.flattenOffset())
+        this._values.forEach(v => v.flattenOffset())
     }
 
     __getValue() {
-        return this.values.map(v => v.__getValue())
+        return this._values.map(v => v.__getValue())
     }
 
     stopAnimation(callback) {
-        this.values.forEach(v => v.stopAnimation())
+        this._values.forEach(v => v.stopAnimation())
         callback && callback(this.__getValue())
     }
 
     addListener(callback) {
         const id = guid()
         const jointCallback = ({ value: number }) => callback(this.__getValue())
-        this._listeners[id] = this.values.map(v => v.addListener(jointCallback))
+        this._listeners[id] = this._values.map(v => v.addListener(jointCallback))
         return id
     }
 
     removeListener(id) {
-        this.values.forEach(v => v.removeListener(id))
+        this._values.forEach(v => v.removeListener(id))
         delete this._listeners[id]
     }
 
     __attach() {
-        for (let i = 0; i < this.values.length; ++i) {
-            if (this.values[i] instanceof Animated) {
-                this.values[i].__addChild(this)
-            }
-        }
+        for (let i = 0; i < this._values.length; ++i)
+            if (this._values[i] instanceof Animated) this._values[i].__addChild(this)
     }
 
     __detach() {
-        for (let i = 0; i < this.values.length; ++i) {
-            if (this.values[i] instanceof Animated) {
-                this.values[i].__removeChild(this)
-            }
-        }
+        for (let i = 0; i < this._values.length; ++i)
+            if (this._values[i] instanceof Animated) this._values[i].__removeChild(this)
     }
 }
 

src/animated/AnimatedInterpolation.js

@@ -26,7 +26,6 @@ class AnimatedInterpolation extends AnimatedWithChildren {
                 }
             })
         }
-
         const id = guid()
         this._listeners[id] = callback
         return id
@@ -46,7 +45,6 @@ class AnimatedInterpolation extends AnimatedWithChildren {
 
     __detach() {
         this._parent.__removeChild(this)
-
         this._parentListener = this._parent.removeListener(this._parentListener)
     }
 }

src/animated/AnimatedProps.js

@@ -22,7 +22,6 @@ class AnimatedProps extends Animated {
             if (value instanceof Animated) props[key] = value.__getValue()
             else props[key] = value
         }
-
         return props
     }
 

src/animated/AnimatedTemplate.js

@@ -15,22 +15,19 @@ class AnimatedTemplate extends AnimatedWithChildren {
 
     __getValue() {
         let value = this._strings[0]
-        for (let i = 0; i < this._values.length; ++i) {
+        for (let i = 0; i < this._values.length; ++i)
             value += this.__transformValue(this._values[i]) + this._strings[1 + i]
-        }
         return value
     }
 
     __attach() {
-        for (let i = 0; i < this._values.length; ++i) {
+        for (let i = 0; i < this._values.length; ++i)
             if (this._values[i] instanceof Animated) this._values[i].__addChild(this)
-        }
     }
 
     __detach() {
-        for (let i = 0; i < this._values.length; ++i) {
+        for (let i = 0; i < this._values.length; ++i)
             if (this._values[i] instanceof Animated) this._values[i].__removeChild(this)
-        }
     }
 }
 

src/animated/AnimatedValue.js

@@ -27,27 +27,24 @@ import guid from './guid'
  * this two-phases process is to deal with composite props such as
  * transform which can receive values from multiple parents.
  */
-function _flush(rootNode) {
-    var animatedStyles = new Set()
 
-    function findAnimatedStyles(node) {
-        if (typeof node.update === 'function') {
-            animatedStyles.add(node)
-        } else {
-            node.__getChildren().forEach(findAnimatedStyles)
-        }
-    }
+function findAnimatedStyles(node, styles) {
+    if (typeof node.update === 'function') styles.add(node)
+    else node.__getChildren().forEach(findAnimatedStyles, styles)
+}
 
-    findAnimatedStyles(rootNode)
+function _flush(rootNode) {
+    var animatedStyles = new Set()
+    findAnimatedStyles(rootNode, animatedStyles)
     animatedStyles.forEach(animatedStyle => animatedStyle.update())
 }
+
 /**
  * Standard value for driving animations.  One `Animated.Value` can drive
  * multiple properties in a synchronized fashion, but can only be driven by one
  * mechanism at a time.  Using a new mechanism (e.g. starting a new animation,
  * or calling `setValue`) will stop any previous ones.
  */
-
 class AnimatedValue extends AnimatedWithChildren {
     constructor(value) {
         super()
@@ -64,44 +61,42 @@ class AnimatedValue extends AnimatedWithChildren {
     __getValue() {
         return this._value + this._offset
     }
+
     /**
      * Directly set the value.  This will stop any animations running on the value
      * and update all the bound properties.
      */
-
     setValue(value) {
         if (this._animation) {
             this._animation.stop()
-
             this._animation = null
         }
-
         this._updateValue(value)
     }
+
     /**
      * Sets an offset that is applied on top of whatever value is set, whether via
      * `setValue`, an animation, or `Animated.event`.  Useful for compensating
      * things like the start of a pan gesture.
      */
-
     setOffset(offset) {
         this._offset = offset
     }
+
     /**
      * Merges the offset value into the base value and resets the offset to zero.
      * The final output of the value is unchanged.
      */
-
     flattenOffset() {
         this._value += this._offset
         this._offset = 0
     }
+
     /**
      * Adds an asynchronous listener to the value so you can observe updates from
      * animations.  This is useful because there is no way to
      * synchronously read the value because it might be driven natively.
      */
-
     addListener(callback) {
         var id = guid()
         this._listeners[id] = callback
@@ -115,31 +110,31 @@ class AnimatedValue extends AnimatedWithChildren {
     removeAllListeners() {
         this._listeners = {}
     }
+
     /**
      * Stops any running animation or tracking.  `callback` is invoked with the
      * final value after stopping the animation, which is useful for updating
      * state to match the animation position with layout.
      */
-
     stopAnimation(callback) {
         this.stopTracking()
         this._animation && this._animation.stop()
         this._animation = null
         callback && callback(this.__getValue())
     }
+
     /**
      * Interpolates the value before updating the property, e.g. mapping 0-1 to
      * 0-10.
      */
-
     interpolate(config) {
         return new AnimatedInterpolation(this, Interpolation.create(config))
     }
+
     /**
      * Typically only used internally, but could be used by a custom Animation
      * class.
      */
-
     animate(animation, callback) {
         var handle = null
         if (animation.__isInteraction) handle = InteractionManager.current.createInteractionHandle()
@@ -157,18 +152,18 @@ class AnimatedValue extends AnimatedWithChildren {
             previousAnimation,
         )
     }
+
     /**
      * Typically only used internally.
      */
-
     stopTracking() {
         this._tracking && this._tracking.__detach()
         this._tracking = null
     }
+
     /**
      * Typically only used internally.
      */
-
     track(tracking) {
         this.stopTracking()
         this._tracking = tracking
@@ -177,11 +172,8 @@ class AnimatedValue extends AnimatedWithChildren {
     _updateValue(value) {
         this._value = value
         _flush(this)
-        for (var key in this._listeners) {
-            this._listeners[key]({
-                value: this.__getValue(),
-            })
-        }
+        for (var key in this._listeners)
+            this._listeners[key]({ value: this.__getValue() })
     }
 }
 

src/animated/Interpolation.js

@@ -1,11 +1,11 @@
 import normalizeColor from 'normalize-css-color'
 
 var linear = t => t
+
 /**
  * Very handy helper to map input ranges to output ranges with an easing
  * function and custom behavior outside of the ranges.
  */
-
 class Interpolation {
     static create(config) {
         if (config.outputRange && typeof config.outputRange[0] === 'string') {
@@ -47,8 +47,9 @@ class Interpolation {
 }
 
 function interpolate(input, inputMin, inputMax, outputMin, outputMax, easing, extrapolateLeft, extrapolateRight) {
-    var result = input // Extrapolate
-
+    var result = input
+    
+    // Extrapolate
     if (result < inputMin) {
         if (extrapolateLeft === 'identity') {
             return result
@@ -77,7 +78,6 @@ function interpolate(input, inputMin, inputMax, outputMin, outputMax, easing, ex
         if (input <= inputMin) {
             return outputMin
         }
-
         return outputMax
     } // Input Range
 
@@ -105,9 +105,7 @@ function interpolate(input, inputMin, inputMax, outputMin, outputMax, easing, ex
 function colorToRgba(input) {
     var int32Color = normalizeColor(input)
 
-    if (int32Color === null) {
-        return input
-    }
+    if (int32Color === null) return input
 
     int32Color = int32Color || 0 // $FlowIssue
 
@@ -119,6 +117,7 @@ function colorToRgba(input) {
 }
 
 var stringShapeRegex = /[0-9\.-]+/g
+
 /**
  * Supports string shapes by extracting numbers so new values can be computed,
  * and recombines those values into new strings of the same shape.  Supports
@@ -127,10 +126,10 @@ var stringShapeRegex = /[0-9\.-]+/g
  *   rgba(123, 42, 99, 0.36) // colors
  *   -45deg                  // values with units
  */
-
 function createInterpolationFromStringOutputRange(config) {
     var outputRange = config.outputRange
     outputRange = outputRange.map(colorToRgba)
+
     // ->
     // [
     //   [0, 50],
@@ -142,7 +141,6 @@ function createInterpolationFromStringOutputRange(config) {
     /* $FlowFixMe(>=0.18.0): `outputRange[0].match()` can return `null`. Need to
    * guard against this possibility.
    */
-
     var outputRanges = outputRange[0].match(stringShapeRegex).map(() => [])
     outputRange.forEach(value => {
         /* $FlowFixMe(>=0.18.0): `value.match()` can return `null`. Need to guard
@@ -152,18 +150,16 @@ function createInterpolationFromStringOutputRange(config) {
             outputRanges[i].push(+number)
         })
     })
-    /* $FlowFixMe(>=0.18.0): `outputRange[0].match()` can return `null`. Need to
-   * guard against this possibility.
-   */
 
+    /* $FlowFixMe(>=0.18.0): `outputRange[0].match()` can return `null`. Need to
+     * guard against this possibility.
+     */
     var interpolations = outputRange[0].match(stringShapeRegex).map((value, i) => {
-        return Interpolation.create({
-            ...config,
-            outputRange: outputRanges[i],
-        })
-    }) // rgba requires that the r,g,b are integers.... so we want to round them, but we *dont* want to
-    // round the opacity (4th column).
+        return Interpolation.create({ ...config, outputRange: outputRanges[i] })
+    })
 
+    // rgba requires that the r,g,b are integers.... so we want to round them, but we *dont* want to
+    // round the opacity (4th column).
     const shouldRound = /^rgb/.test(outputRange[0])
     return input => {
         var i = 0 // 'rgba(0, 100, 200, 0)'
@@ -177,9 +173,7 @@ function createInterpolationFromStringOutputRange(config) {
 }
 
 function findRange(input, inputRange) {
-    for (var i = 1; i < inputRange.length - 1; ++i) {
-        if (inputRange[i] >= input) break
-    }
+    for (var i = 1; i < inputRange.length - 1; ++i) if (inputRange[i] >= input) break
     return i - 1
 }