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

「已注销」

于 2023-01-14 21:57:16 发布

阅读量99

点赞数

文章标签：动画 react native

本文链接：https://blog.csdn.net/caithis/article/details/128689877

版权

如何实现一段抽奖转盘的动画：20%前慢，20-80%快，80-90%减慢，90-100%摇摆一下回正。难道用顺序动画去写？多种实现中感觉插值更方便，也许你没注意到它写动画中的作用。我们可以创建一个线性动画0-1，作为inputRange。输出是非线性的，以此为例可以做出你想要的动画效果。

摘要由CSDN通过智能技术生成

设想在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({

关注