ReactJS:AnimationValue.interpolate for sin 和 cos

Question

我正在尝试为 ReactJS 原生中的一个组件设置动画，以便它以圆形方式围绕一个点连续运行。基本上，我需要一个不断增加的计时器，我可以用它来设置 X、Y 坐标，如 {x: r * Math.sin(timer), y: r * Math.cos(timer)}

我发现本指南提供了一些有关插值的非常有用的信息，但我仍然没有取得任何成功:

http://browniefed.com/react-native-animation-book/INTERPOLATION.html

如何像这样更新组件的位置？

额外问题:如何使动画连续？

Answer 1

由于react-native插值不支持函数回调，所以我做了一个辅助函数:

function withFunction(callback) {
    let inputRange = [], outputRange = [], steps = 50;
    /// input range 0-1
    for (let i=0; i<=steps; ++i) {
        let key = i/steps;
        inputRange.push(key);
        outputRange.push(callback(key));
    }
    return { inputRange, outputRange };
}

将动画应用于translateX和translateY:

transform: [
{
   translateX:
      this.rotate.interpolate(
         withFunction( (value) => Math.cos(Math.PI*value*2) * radius )
      )
},
{
   translateY:
      this.rotate.interpolate(
         withFunction( (value) => Math.sin(Math.PI*value*2) * radius )
      )
},
]

视觉效果:

为了使动画连续，我做了这样的事情:

rotate = new Animated.Value(0);

componentDidMount() {
    setInterval( () => {
        let step = 0.05;
        let final = this.rotate._value+step;
        if (final >= 1) final = 0;
        this.rotate.setValue(final);
    }, 50);
}