Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Deprecate interpolate method from animated nodes and add to AnimatedImplementation. #18030

Closed
wants to merge 1 commit into from
Closed

Deprecate interpolate method from animated nodes and add to AnimatedImplementation. #18030

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions Libraries/Animated/src/AnimatedImplementation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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.
Expand Down
7 changes: 0 additions & 7 deletions Libraries/Animated/src/nodes/AnimatedAddition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand Down
7 changes: 0 additions & 7 deletions Libraries/Animated/src/nodes/AnimatedDiffClamp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
7 changes: 0 additions & 7 deletions Libraries/Animated/src/nodes/AnimatedDivision.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand Down
4 changes: 0 additions & 4 deletions Libraries/Animated/src/nodes/AnimatedInterpolation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
7 changes: 0 additions & 7 deletions Libraries/Animated/src/nodes/AnimatedModulo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -36,10 +33,6 @@ class AnimatedModulo extends AnimatedWithChildren {
);
}

interpolate(config: InterpolationConfigType): AnimatedInterpolation {
return new AnimatedInterpolation(this, config);
}

__attach(): void {
this._a.__addChild(this);
}
Expand Down
7 changes: 0 additions & 7 deletions Libraries/Animated/src/nodes/AnimatedMultiplication.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand Down
16 changes: 16 additions & 0 deletions Libraries/Animated/src/nodes/AnimatedNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
21 changes: 5 additions & 16 deletions Libraries/Animated/src/nodes/AnimatedValue.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand Down Expand Up @@ -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.
Expand Down