Permalink
Browse files

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 #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 ae0ad1fc7e8d7a591b5b1c0789c39bdcdfd3f388
Showing with 41 additions and 0 deletions.
  1. +41 −0 Libraries/Animated/src/AnimatedImplementation.js
@@ -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.
*/

0 comments on commit ae0ad1f

Please sign in to comment.