[react-native] 12 Animated partA 开始有意思了?

🤔

我们的组件必须要经过处理才可以生成动画

React Native 中,有四个组件是可以直接使用的动画组件

  • Animated.View

  • Animated.Text

  • Animated.ScrollView

  • Animated.Image

如何创建动画(步骤)

  1. 创建初始值

Animated.Value() --- 单个值

Animated.ValueXY() --- 向量值

将初始值绑定到动画组件上(一般是将其绑定到某个样式属性下。例如:opacitytranslate)

通过动画类型API,一帧一帧地更改初始值.

在 RN 中,提供了最常见的3种动画类型的API

Animated.decay() --- 加速效果

Animated.Spring() --- 弹跳效果

Animated.timing() --- 时间渐变效果 用的是最多的

官网体验

官网链接地址

Fade in. Fade out. 体验代码

js 复制代码
// 直接复制粘贴的体验代码
import React, {useRef} from 'react';  
import {  
Animated,  
Text,  
View,  
StyleSheet,  
Button,  
SafeAreaView,  
} from 'react-native';  
  
const App = () => {  
// fadeAnim will be used as the value for opacity. Initial Value: 0  
const fadeAnim = useRef(new Animated.Value(0)).current;  
  
const fadeIn = () => {  
// Will change fadeAnim value to 1 in 5 seconds  
Animated.timing(fadeAnim, {  
toValue: 1,  
duration: 5000,  
useNativeDriver: true,  
}).start();  
};  
  
const fadeOut = () => {  
// Will change fadeAnim value to 0 in 3 seconds  
Animated.timing(fadeAnim, {  
toValue: 0,  
duration: 3000,  
useNativeDriver: true,  
}).start();  
};  
  
return (  
<SafeAreaView style={styles.container}>  
<Animated.View  
style={[  
styles.fadingContainer,  
{  
// Bind opacity to animated value  
opacity: fadeAnim,  
},  
]}>  
<Text style={styles.fadingText}>Fading View!</Text>  
</Animated.View>  
<View style={styles.buttonRow}>  
<Button title="Fade In View" onPress={fadeIn} />  
<Button title="Fade Out View" onPress={fadeOut} />  
</View>  
</SafeAreaView>  
);  
};  
  
const styles = StyleSheet.create({  
container: {  
flex: 1,  
alignItems: 'center',  
justifyContent: 'center',  
},  
fadingContainer: {  
padding: 20,  
backgroundColor: 'powderblue',  
},  
fadingText: {  
fontSize: 28,  
},  
buttonRow: {  
flexBasis: 100,  
justifyContent: 'space-evenly',  
marginVertical: 16,  
},  
});  
  
export default App;

默认初始化透明度为 0

js 复制代码
// fadeAnim will be used as the value for opacity. Initial Value: 0  
const fadeAnim = useRef(new Animated.Value(0)).current;

入场属性

js 复制代码
const fadeIn = () => {  
// Will change fadeAnim value to 1 in 5 seconds  
Animated.timing(fadeAnim, {  
toValue: 1,  
duration: 5000,  
useNativeDriver: true,  
}).start();  
};

出场属性

js 复制代码
const fadeOut = () => {  
// Will change fadeAnim value to 0 in 3 seconds  
Animated.timing(fadeAnim, {  
toValue: 0,  
duration: 3000,  
useNativeDriver: true,  
}).start();  
};

注意看,这里有两个属性词: toValue. duration。一个是决定淡入还是淡出。另外一个觉得市场。

添加 回调函数

js 复制代码
//添加回调函数
const fadeIn = () => {  
    // Will change fadeAnim value to 1 in 5 seconds  
    Animated.timing(fadeAnim, {  
        toValue: 1,  
        duration: 5000,  
        useNativeDriver: true,  
    }).start(()=>{  
        alert('我来了')  
    });  
};  
  
const fadeOut = () => {  
    // Will change fadeAnim value to 0 in 3 seconds  
    Animated.timing(fadeAnim, {  
        toValue: 0,  
        duration: 3000,  
        useNativeDriver: true,  
    }).start(()=>{  
        alert('我走了')  
    });  
};
js 复制代码
start(()=>{  
        alert('我走了')  
    })

扫描框 暂存

完整代码

js 复制代码
import React, { useEffect, useRef } from 'react';  
import { Animated, AppRegistry, StyleSheet, View } from 'react-native';  
  
const App = () => {  
const animation = useRef(new Animated.Value(0)).current; // 动画值  
  
useEffect(() => {  
Animated.loop(  
Animated.sequence([  
Animated.timing(animation, {  
toValue: 1,  
duration: 1000,  
useNativeDriver: true,  
}),  
Animated.timing(animation, {  
toValue: 0,  
duration: 1000,  
useNativeDriver: true,  
}),  
]),  
).start();  
}, [animation]);  
  
const movingMargin = animation.interpolate({  
inputRange: [0, 1],  
outputRange: [0, 150], // 根据容器高度调整  
});  
  
return (  
<View style={styles.container}>  
<Animated.View  
style={[  
styles.scannerLine,  
{  
transform: [{ translateY: movingMargin }],  
},  
]}  
/>  
</View>  
);  
};  
  
const styles = StyleSheet.create({  
container: {  
height: 200, // 容器的高度  
width: 200, // 容器的宽度  
borderColor: '#00FF00', // 边框颜色  
borderWidth: 4,  
backgroundColor: 'black',  
justifyContent: 'center',  
alignItems: 'center',  
overflow: 'hidden',  
},  
scannerLine: {  
position: 'absolute',  
height: 2,  
width: '100%',  
backgroundColor: '#00FF00', // 扫描线颜色  
},  
});  
  
export default App;

样式

相关推荐
Nan_Shu_61418 小时前
Web前端面试题(2)
前端
知识分享小能手18 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队19 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光19 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql52020 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days205020 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端20 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿20 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉20 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~20 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js