支持的动画组件
单个动画
旋转
缩放
平移
透明度
import React, { Component } from 'react';
import { Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
fadeAnimation: new Animated.Value(0), //设置初始值
};
}
onButtonPress() {
this.state.fadeAnimation.setValue(0);
Animated.timing(
this.state.fadeAnimation, //初始值
{
toValue: 1, //结束值
duration: 2000, //时间
},
).start(); //开始
}
render() {
return (
<View style={styles.container}>
<Animated.Image
style={{
width: 200,
height: 200,
opacity: this.state.fadeAnimation,
}}
source={{ uri: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png' }}
>
</Animated.Image>
<TouchableOpacity
onPress={() => this.onButtonPress()}
style={styles.button}>
<Text>开始动画</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});