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

最新推荐文章于 2024-01-16 00:39:03 发布

原创

最新推荐文章于 2024-01-16 00:39:03 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#动画 #react native

本文探讨如何在React Native中使用插值来实现复杂动画效果，例如模拟抽奖转盘的动画。通过设置不同的输入范围(inputRange)和输出范围(outputRange)，可以灵活控制动画的速度变化，如在20%、80%和90%时改变速度，并在最后加入摇摆效果。通过这种方式，可以避免使用复杂的顺序动画，让动画制作更为便捷。

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

官方代码：


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

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

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

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

实现代码：

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
    });

最低0.47元/天解锁文章