react native中利用插值实现自定义动画效果

cairostar2025-03-19 10:22

设想在RN如何实现一段抽奖转盘的动画：20%前慢，20-80%快，80-90%减慢，90-100%摇摆一下回正。难道用顺序动画去写？多种实现中感觉插值更方便，也许你没注意到它在动画中的使用。

官方代码：

js 复制代码

value.interpolate({ 
        inputRange: [-300, -100, 0, 100, 101], 
        outputRange: [300, 0, 1, 0, 0] 
    });

我们可以创建一个线性动画0-1，作为inputRange。然后outputRange输出"0deg"到终点角度，对应关系可以这么做：

js 复制代码

inputRange: [0, 0.2, 0.8, 0.9, 1], 
outputRange: ['0deg', '100deg', '800deg', '830deg', '810deg']

输出是非线性的，以此为例可以做出你想要的动画效果。

实现代码：

js 复制代码

let [zAnim,setzAnim] = useState(new Animated.Value(0));
  let [dis,setDis]=useState(false)
  let getDeg = () => {
    return zAnim.interpolate({
      inputRange: [0, 0.2, 0.8, 0.9, 1],
      outputRange: ['0deg', '100deg', '800deg', '830deg', '810deg'],
      useNativeDriver: true
    });
  }
  let degAnim = getDeg()
  let ads = () => {
    Animated.timing(zAnim, {
      toValue: 1,
      duration: 4000
    }).start();
    setDis(true)
    setTimeout(() => {
      setzAnim(new Animated.Value(0))
      setDis(false)
    }, 4000)
  }
  return <View>
    <Animated.Image
      style={[styles.img, {
        transform: [
          { rotate: degAnim}
        ]
      }]}
      source={require("./img/logo.jpg")}
    />
    <Button title="开始" onPress={ads.bind(null)} disabled={dis}/>
  </View>
}