I'm trying to animate the X value from 0 to PI, and the Y value from 0 to sin(x).
Something like:
this.positionX = new Animated.Value(0);
Animated.timing(
this.positionX, {
toValue: Math.PI,
duration: 1000,
}
).start();
// this obviously won't work
this.positionY = Math.sin(this.positionX);
I tried interpolating the X value with:
this.positionX.interpolate({
inputRange: [0, ..., PI],
outputRange: [0, ..., sin(PI)],
});
but I still get a linear approximation and slows down the animation drastically.
How can I compose an Animated.Value from a custom function the same way Animated.add
or Animated.divide
work?