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

最新推荐文章于 2024-09-07 09:16:28 发布

Justin86713

最新推荐文章于 2024-09-07 09:16:28 发布

阅读量613

点赞数 1

文章标签： react native

本文链接：https://blog.csdn.net/Justin86713/article/details/108740414

版权

本文介绍了如何在React Native中通过插值技术实现一段复杂的抽奖转盘动画，包括慢速启动、快速转动、减速以及末尾的摇摆效果。利用动画的inputRange和outputRange特性，可以轻松创建非线性动画，达到自定义的视觉体验。

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

设想在RN如何实现一段抽奖转盘的动画：20%前慢，20-80%快，80-90%减慢，90-100%摇摆一下回正。
难道用顺序动画去写？这里介绍的插值更方便，也许你没注意到它的强大。
官方代码：

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

注意input与output的对应方式。我们可以创建一个线性动画0-1，作为inputRange，然后输出"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