在 React Native 中动画旋转到最近的值

Question

鉴于插值，必须旋转汽车标记：

this.rotation.interpolate({
  inputRange: [0, 360],
  outputRange: ['0deg', '360deg'],
  extrapolate: 'clamp'
})

下面的GIF代表以下轴承：

1. 337.38055647641903
2. 335.202973299875
3. 13.03761189748721
4. 13.042704554861551
5. 358.77805501498045

绿线是我希望它的工作方式（旋转到最接近的值）。红线是它目前的工作方式（在 GIF 上）。

有没有办法将旋转动画设置为最接近的值？（在我们的例子中，顺时针方向从 335 到 13）。也许有更好的方法而不是插值？

Answer 1

let heading = this.state.heading;
    let oldHeading = this.state.oldHeading;
    const duration = 200;
    if (oldHeading - heading > 180) {
        Animated.timing(
            this.state.spinAnim,
        { 
            toValue: 360,
            duration: duration,
            easing: Easing.linear,
            useNativeDriver: true
        }).start(() => this.state.spinAnim.setValue(0));
    } else if (oldHeading - heading < -180) {
        Animated.timing(
            this.state.spinAnim,
        { 
            toValue: 0,
            duration: duration,
            easing: Easing.linear,
            useNativeDriver: true
        }).start(() => this.state.spinAnim.setValue(360));
    } else {
        Animated.timing(
            this.state.spinAnim,
        { 
            toValue: heading,
            duration: duration,
            easing: Easing.linear,
            useNativeDriver: true
        }).start();
    }

我遇到了同样的问题，所以我的解决方案是每次都保留前一个标题，如果距离大于 180，我使用两个单独的动画。一种是从 x 到 0 进行动画处理，然后将 value 设置为 360（或 x 到 360，然后将 value 设置为 0），另一种是“默认”并且每次都会运行。