9

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?

kimar
  • 646
  • 4
  • 10

0 Answers0