Implement modulo operator method
Summary:This is an initial take on how to allow for value wrapping in Animated (currently `.timing` only). It adds a wrap config options which is an array specifying a range of values to be wrapped around. Anytime the delta of `toValue and fromValue > wrapDistance / 2` instead of animating the long way it will animate towards the range extremity and then after breaching the range it will readjust to animated to the true toValue. Example Usage: ```js Animated.timing( this.state.animatedDegrees, {toValue: Math.random()*360, wrap: [0, 360]} ).start() ``` This is presumably very valuable in rotation based animations, but could also be useful in other applications like wrapping the edges of the viewport. Questions & Todo: - Is `wrap` as a config key semantically meaningful and accurate? - Is there a way to expose this as a config option on `.interpolate` rather than timing - Generalize to all animated API's (spring, decay), and will this work with ValueXY out of the box? - Add tests Closes https://github.com/facebook/react-native/pull/5743 Differential Revision: D2979992 fb-gh-sync-id: 69be510feba8c43acb10c253036f5854adff9258 shipit-source-id: 69be510feba8c43acb10c253036f5854adff9258
This commit is contained in:
parent
7d96dbb919
commit
ae0ad1fc7e
|
@ -898,6 +898,33 @@ class AnimatedMultiplication extends AnimatedWithChildren {
|
|||
}
|
||||
}
|
||||
|
||||
class AnimatedModulo extends AnimatedWithChildren {
|
||||
_a: Animated;
|
||||
_modulus: number;
|
||||
|
||||
constructor(a: Animated, modulus: number) {
|
||||
super();
|
||||
this._a = a;
|
||||
this._modulus = modulus;
|
||||
}
|
||||
|
||||
__getValue(): number {
|
||||
return (this._a.__getValue() % this._modulus + this._modulus) % this._modulus;
|
||||
}
|
||||
|
||||
interpolate(config: InterpolationConfigType): AnimatedInterpolation {
|
||||
return new AnimatedInterpolation(this, Interpolation.create(config));
|
||||
}
|
||||
|
||||
__attach(): void {
|
||||
this._a.__addChild(this);
|
||||
}
|
||||
|
||||
__detach(): void {
|
||||
this._a.__removeChild(this);
|
||||
}
|
||||
}
|
||||
|
||||
class AnimatedTransform extends AnimatedWithChildren {
|
||||
_transforms: Array<Object>;
|
||||
|
||||
|
@ -1233,6 +1260,14 @@ var multiply = function(
|
|||
return new AnimatedMultiplication(a, b);
|
||||
};
|
||||
|
||||
var modulo = function(
|
||||
a: Animated,
|
||||
modulus: number
|
||||
): AnimatedModulo {
|
||||
return new AnimatedModulo(a, modulus);
|
||||
};
|
||||
|
||||
|
||||
var maybeVectorAnim = function(
|
||||
value: AnimatedValue | AnimatedValueXY,
|
||||
config: Object,
|
||||
|
@ -1604,6 +1639,12 @@ module.exports = {
|
|||
*/
|
||||
multiply,
|
||||
|
||||
/**
|
||||
* Creates a new Animated value that is the (non-negative) modulo of the
|
||||
* provided Animated value
|
||||
*/
|
||||
modulo,
|
||||
|
||||
/**
|
||||
* Starts an animation after the given delay.
|
||||
*/
|
||||
|
|
Loading…
Reference in New Issue