diff --git a/Libraries/Animated/src/AnimatedImplementation.js b/Libraries/Animated/src/AnimatedImplementation.js index 2c1ce431d10686..2d3b6d198d276d 100644 --- a/Libraries/Animated/src/AnimatedImplementation.js +++ b/Libraries/Animated/src/AnimatedImplementation.js @@ -38,6 +38,34 @@ import type {TimingAnimationConfig} from './animations/TimingAnimation'; import type {DecayAnimationConfig} from './animations/DecayAnimation'; import type {SpringAnimationConfig} from './animations/SpringAnimation'; import type {Mapping, EventConfig} from './AnimatedEvent'; +import type {InterpolationConfigType} from './nodes/AnimatedInterpolation'; + +const interpolateMethod = function( + config: InterpolationConfigType, +): AnimatedInterpolation { + console.warn( + 'The animation.interpolate(config) method will be removed from animated nodes in favour of Animated.interpolate(animation, config).', + ); + return new AnimatedInterpolation(this, config); +}; + +// To avoid some code duplication and a circular dependency we +// are adding the interpolate method directly onto these prototypes. +// This should eventually be removed. +//$FlowFixMe +AnimatedAddition.prototype.interpolate = interpolateMethod; +//$FlowFixMe +AnimatedDiffClamp.prototype.interpolate = interpolateMethod; +//$FlowFixMe +AnimatedDivision.prototype.interpolate = interpolateMethod; +//$FlowFixMe +AnimatedInterpolation.prototype.interpolate = interpolateMethod; +//$FlowFixMe +AnimatedModulo.prototype.interpolate = interpolateMethod; +//$FlowFixMe +AnimatedMultiplication.prototype.interpolate = interpolateMethod; +//$FlowFixMe +AnimatedValue.prototype.interpolate = interpolateMethod; export type CompositeAnimation = { start: (callback?: ?EndCallback) => void, @@ -232,6 +260,13 @@ const timing = function( ); }; +const interpolate = function( + value: AnimatedValue, + config: InterpolationConfigType, +): AnimatedInterpolation { + return new AnimatedInterpolation(value, config); +}; + const decay = function( value: AnimatedValue | AnimatedValueXY, config: DecayAnimationConfig, @@ -545,6 +580,12 @@ module.exports = { */ Node: AnimatedNode, + /** + * Interpolates the value before updating the property, e.g. mapping 0-1 to + * 0-10. + */ + interpolate, + /** * Animates a value from an initial velocity to zero based on a decay * coefficient. diff --git a/Libraries/Animated/src/nodes/AnimatedAddition.js b/Libraries/Animated/src/nodes/AnimatedAddition.js index 60713da500213c..459e8726a0eca7 100644 --- a/Libraries/Animated/src/nodes/AnimatedAddition.js +++ b/Libraries/Animated/src/nodes/AnimatedAddition.js @@ -9,13 +9,10 @@ */ 'use strict'; -const AnimatedInterpolation = require('./AnimatedInterpolation'); const AnimatedNode = require('./AnimatedNode'); const AnimatedValue = require('./AnimatedValue'); const AnimatedWithChildren = require('./AnimatedWithChildren'); -import type {InterpolationConfigType} from './AnimatedInterpolation'; - class AnimatedAddition extends AnimatedWithChildren { _a: AnimatedNode; _b: AnimatedNode; @@ -36,10 +33,6 @@ class AnimatedAddition extends AnimatedWithChildren { return this._a.__getValue() + this._b.__getValue(); } - interpolate(config: InterpolationConfigType): AnimatedInterpolation { - return new AnimatedInterpolation(this, config); - } - __attach(): void { this._a.__addChild(this); this._b.__addChild(this); diff --git a/Libraries/Animated/src/nodes/AnimatedDiffClamp.js b/Libraries/Animated/src/nodes/AnimatedDiffClamp.js index 4219eccfb377ff..b78bb71576e775 100644 --- a/Libraries/Animated/src/nodes/AnimatedDiffClamp.js +++ b/Libraries/Animated/src/nodes/AnimatedDiffClamp.js @@ -9,12 +9,9 @@ */ 'use strict'; -const AnimatedInterpolation = require('./AnimatedInterpolation'); const AnimatedNode = require('./AnimatedNode'); const AnimatedWithChildren = require('./AnimatedWithChildren'); -import type {InterpolationConfigType} from './AnimatedInterpolation'; - class AnimatedDiffClamp extends AnimatedWithChildren { _a: AnimatedNode; _min: number; @@ -36,10 +33,6 @@ class AnimatedDiffClamp extends AnimatedWithChildren { super.__makeNative(); } - interpolate(config: InterpolationConfigType): AnimatedInterpolation { - return new AnimatedInterpolation(this, config); - } - __getValue(): number { const value = this._a.__getValue(); const diff = value - this._lastValue; diff --git a/Libraries/Animated/src/nodes/AnimatedDivision.js b/Libraries/Animated/src/nodes/AnimatedDivision.js index 3498d322211f64..7961b4e87d14a1 100644 --- a/Libraries/Animated/src/nodes/AnimatedDivision.js +++ b/Libraries/Animated/src/nodes/AnimatedDivision.js @@ -9,13 +9,10 @@ */ 'use strict'; -const AnimatedInterpolation = require('./AnimatedInterpolation'); const AnimatedNode = require('./AnimatedNode'); const AnimatedValue = require('./AnimatedValue'); const AnimatedWithChildren = require('./AnimatedWithChildren'); -import type {InterpolationConfigType} from './AnimatedInterpolation'; - class AnimatedDivision extends AnimatedWithChildren { _a: AnimatedNode; _b: AnimatedNode; @@ -41,10 +38,6 @@ class AnimatedDivision extends AnimatedWithChildren { return a / b; } - interpolate(config: InterpolationConfigType): AnimatedInterpolation { - return new AnimatedInterpolation(this, config); - } - __attach(): void { this._a.__addChild(this); this._b.__addChild(this); diff --git a/Libraries/Animated/src/nodes/AnimatedInterpolation.js b/Libraries/Animated/src/nodes/AnimatedInterpolation.js index e8f9823c20e4f4..2e981fdf7a7653 100644 --- a/Libraries/Animated/src/nodes/AnimatedInterpolation.js +++ b/Libraries/Animated/src/nodes/AnimatedInterpolation.js @@ -333,10 +333,6 @@ class AnimatedInterpolation extends AnimatedWithChildren { return this._interpolation(parentValue); } - interpolate(config: InterpolationConfigType): AnimatedInterpolation { - return new AnimatedInterpolation(this, config); - } - __attach(): void { this._parent.__addChild(this); } diff --git a/Libraries/Animated/src/nodes/AnimatedModulo.js b/Libraries/Animated/src/nodes/AnimatedModulo.js index 6699ded50a658a..9313e32c922469 100644 --- a/Libraries/Animated/src/nodes/AnimatedModulo.js +++ b/Libraries/Animated/src/nodes/AnimatedModulo.js @@ -9,12 +9,9 @@ */ 'use strict'; -const AnimatedInterpolation = require('./AnimatedInterpolation'); const AnimatedNode = require('./AnimatedNode'); const AnimatedWithChildren = require('./AnimatedWithChildren'); -import type {InterpolationConfigType} from './AnimatedInterpolation'; - class AnimatedModulo extends AnimatedWithChildren { _a: AnimatedNode; _modulus: number; @@ -36,10 +33,6 @@ class AnimatedModulo extends AnimatedWithChildren { ); } - interpolate(config: InterpolationConfigType): AnimatedInterpolation { - return new AnimatedInterpolation(this, config); - } - __attach(): void { this._a.__addChild(this); } diff --git a/Libraries/Animated/src/nodes/AnimatedMultiplication.js b/Libraries/Animated/src/nodes/AnimatedMultiplication.js index 889f530c76baee..ecafbabe89a177 100644 --- a/Libraries/Animated/src/nodes/AnimatedMultiplication.js +++ b/Libraries/Animated/src/nodes/AnimatedMultiplication.js @@ -9,13 +9,10 @@ */ 'use strict'; -const AnimatedInterpolation = require('./AnimatedInterpolation'); const AnimatedNode = require('./AnimatedNode'); const AnimatedValue = require('./AnimatedValue'); const AnimatedWithChildren = require('./AnimatedWithChildren'); -import type {InterpolationConfigType} from './AnimatedInterpolation'; - class AnimatedMultiplication extends AnimatedWithChildren { _a: AnimatedNode; _b: AnimatedNode; @@ -36,10 +33,6 @@ class AnimatedMultiplication extends AnimatedWithChildren { return this._a.__getValue() * this._b.__getValue(); } - interpolate(config: InterpolationConfigType): AnimatedInterpolation { - return new AnimatedInterpolation(this, config); - } - __attach(): void { this._a.__addChild(this); this._b.__addChild(this); diff --git a/Libraries/Animated/src/nodes/AnimatedNode.js b/Libraries/Animated/src/nodes/AnimatedNode.js index 34e010a62f8c45..24e8ee9dd7b2b4 100644 --- a/Libraries/Animated/src/nodes/AnimatedNode.js +++ b/Libraries/Animated/src/nodes/AnimatedNode.js @@ -33,6 +33,22 @@ class AnimatedNode { return []; } + /** + * Deprecated - Use `Animated.interpolate(animation, config)` instead. + * + * Interpolates the value before updating the property, e.g. mapping 0-1 to + * 0-10. Not available on all node types. + * + * @deprecated + */ + interpolate(config: any): AnimatedNode { + throw new Error( + 'This node type does not implement an interpolate method,' + + ' the interpolate method will be removed from all nodes' + + ' in favour of Animated.interpolate(animation, config).', + ); + } + /* Methods and props used by native Animated impl */ __isNative: boolean; __nativeTag: ?number; diff --git a/Libraries/Animated/src/nodes/AnimatedValue.js b/Libraries/Animated/src/nodes/AnimatedValue.js index a3fb3a325b838e..5bffc29b0e2011 100644 --- a/Libraries/Animated/src/nodes/AnimatedValue.js +++ b/Libraries/Animated/src/nodes/AnimatedValue.js @@ -9,14 +9,11 @@ */ 'use strict'; -const AnimatedInterpolation = require('./AnimatedInterpolation'); -const AnimatedNode = require('./AnimatedNode'); const AnimatedWithChildren = require('./AnimatedWithChildren'); const InteractionManager = require('InteractionManager'); const NativeAnimatedHelper = require('../NativeAnimatedHelper'); import type Animation, {EndCallback} from '../animations/Animation'; -import type {InterpolationConfigType} from './AnimatedInterpolation'; import type AnimatedTracking from './AnimatedTracking'; const NativeAnimatedAPI = NativeAnimatedHelper.API; @@ -30,11 +27,11 @@ let _uniqueId = 1; * transparently when you render your Animated components. * * new Animated.Value(0) - * .interpolate() .interpolate() new Animated.Value(1) - * opacity translateY scale - * style transform - * View#234 style - * View#123 + * Animated.interpolate() Animated.interpolate() new Animated.Value(1) + * opacity translateY scale + * style transform + * View#234 style + * View#123 * * A) Top Down phase * When an Animated.Value is updated, we recursively go down through this @@ -260,14 +257,6 @@ class AnimatedValue extends AnimatedWithChildren { this._value = this._startingValue; } - /** - * Interpolates the value before updating the property, e.g. mapping 0-1 to - * 0-10. - */ - interpolate(config: InterpolationConfigType): AnimatedInterpolation { - return new AnimatedInterpolation(this, config); - } - /** * Typically only used internally, but could be used by a custom Animation * class.