Skip to content

Commit

Permalink
Implement modulo operator method
Browse files Browse the repository at this point in the history
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 #5743

Differential Revision: D2979992

fb-gh-sync-id: 69be510feba8c43acb10c253036f5854adff9258
shipit-source-id: 69be510feba8c43acb10c253036f5854adff9258
  • Loading branch information
rt2zz authored and facebook-github-bot-1 committed Feb 26, 2016
1 parent 7d96dbb commit ae0ad1f
Showing 1 changed file with 41 additions and 0 deletions.
41 changes: 41 additions & 0 deletions Libraries/Animated/src/AnimatedImplementation.js
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -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 { class AnimatedTransform extends AnimatedWithChildren {
_transforms: Array<Object>; _transforms: Array<Object>;


Expand Down Expand Up @@ -1233,6 +1260,14 @@ var multiply = function(
return new AnimatedMultiplication(a, b); return new AnimatedMultiplication(a, b);
}; };


var modulo = function(
a: Animated,
modulus: number
): AnimatedModulo {
return new AnimatedModulo(a, modulus);
};


var maybeVectorAnim = function( var maybeVectorAnim = function(
value: AnimatedValue | AnimatedValueXY, value: AnimatedValue | AnimatedValueXY,
config: Object, config: Object,
Expand Down Expand Up @@ -1604,6 +1639,12 @@ module.exports = {
*/ */
multiply, 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. * Starts an animation after the given delay.
*/ */
Expand Down

0 comments on commit ae0ad1f

Please sign in to comment.