Commit Graph

1 Commits

Author SHA1 Message Date
Kevin Gozali 0a0dd30c6a Introduced AnimatedDivision
Summary:
Combining 2 animated values via addition, multiplication, and modulo are already supported, and this adds another one: division.
There are some cases where an animated value needs to invert (1 / x) another animated value for calculation. An example is inverting a scale (2x --> 0.5x), e.g.:

```
const a = Animated.Value(1);
const b = Animated.divide(1, a);

Animated.spring(a, {
  toValue: 2,
}).start();
```

`b` will then follow `a`'s spring animation and produce the value of `1 / a`.

The basic usage is like this:

```
<Animated.View style={{transform: [{scale: a}]}}>
  <Animated.Image style={{transform: [{scale: b}]}} />
<Animated.View>
```

In this example, the inner image won't get stretched at all because the parent's scaling gets cancelled out.

Also added this to native animated implementation.

Reviewed By: foghina, mmmulani

Differential Revision: D3922891

fbshipit-source-id: 32508956c4b65b2deb7574d50a10c85b4809b961
2016-09-26 16:43:51 -07:00