目录 背景实现代码需要注意的几点效果 参考链接

背景

学校留了一个作业，要用 React Native 做个游戏。我做的游戏涉及物体下落的效果，今天来尝试一下使用 React Native 的 Animated API 来实现这个效果。

实现 代码

比较简单，这次直接上代码吧：

import { useRef, useEffect } from 'react'; import { Animated, Dimensions } from 'react-native'; const WINDOW_WIDTH = Dimensions.get('window').width; const WINDOW_HEIGHT = Dimensions.get('window').height; const BOX_SIZE = WINDOW_WIDTH / 5; const BOX_INIT_X = WINDOW_WIDTH/2 - BOX_SIZE/2; const BOX_INIT_Y = WINDOW_WIDTH/2; const BOX_FINAL_Y = WINDOW_HEIGHT - BOX_SIZE export default function App() { const positionY = useRef(new Animated.Value(BOX_INIT_Y)).current useEffect(() => { // 使用 Animated.timing 设置动画 Animated.timing( positionY, { toValue: BOX_FINAL_Y, // 在动画过程中把 positionY 变量改变到这个值 duration: 3000, useNativeDriver: false // 注意这里，true 的性能会更好，但这里只能选 false，除非换一种方式使用 positionY } ).start(); }, []) const boxStyle = { position: 'absolute', top: positionY, // positionY 用来指定盒子的 y 轴位置 left: BOX_INIT_X, width: BOX_SIZE, height: BOX_SIZE, backgroundColor: 'red' } return <Animated.View style={boxStyle} /> } 需要注意的几点 useNativeDriver 这个选项写成了 false。如果选 true 的话会报错，因为 top 这个样式不支持 native driver。如果一定要用 useNativeDriver: true（性能会更好），可以考虑使用 transform，参考链接由于 positionY 是一个 Animated.Value 类型，使用的时候只能直接用，比如 top: positionY，不能在其基础上进行运算，比如写成 top: positionY + 100 就会报错；上面用的是 useRef，但用 useState 来定义 positionY 也完全没问题。但即便 positionY 是个 state，在动画过程中也不会触发组件函数重新执行，因为 setPositionY 并没有被调用，其值的改变是通过 positionY.setValue() 实现的； 效果

效果如下：

参考链接

官方文档：Animated API

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。