[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;

样式

相关推荐
Tajang12 分钟前
推荐一个浏览器代理插件(Tajang Proxy),支持Chrome和Edge
前端·chrome·网络安全·渗透测试·靶场·edge
鹏多多17 分钟前
前端音频兼容解决:音频神器howler.js从基础到进阶完整使用指南
前端·javascript·音视频开发
龙仔CLL1 小时前
使用vue-pdf做本地预览pdf文件,通过垂直滚动条展示全部pdf内容,不展示分页按钮
前端·vue.js·pdf
前端架构师-老李1 小时前
12、electron专题(electron-builder)
前端·javascript·electron
IT_陈寒1 小时前
JavaScript性能飞跃:5个V8引擎优化技巧让你的代码提速300%
前端·人工智能·后端
艾小码1 小时前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
reembarkation2 小时前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张4 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2301_768350239 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
华洛10 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品