//Animated.timing实现view的位置移动
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Animated, TouchableHighlight, View, Text} from 'react-native';
var xx = 0;
class RnAnimatedView extends Component {
constructor(props) {
super(props);
this.state= {
left: new Animated.Value(0),
}
}
render() {
let animView = (
//这里需要使用transform， rotateX被包含在transform的属性中。
//interpolate很特殊，可以插入一些参数
<Animated.View style={[{marginTop: 20, backgroundColor: '#ff00ff'}, {left: this.state.left.interpolate({
//inputRange和outputRange定义了旋转的范围，可以调整参数看看两者有什么联系
inputRange: [0, 1],
outputRange: [0, 200],
})}]}>
<Text>我要开始移动了</Text>
</Animated.View>
);
return(
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<TouchableHighlight onPress={this.animation}>
<Text>点我开始动画</Text>
</TouchableHighlight>
{animView}
</View>
)
}
animation= () => {
xx = xx === 0 ? 1 : 0;
let timing = Animated.timing;
timing(this.state.left, {
toValue: xx,
duration: 1000,
}).start();
}
}
AppRegistry.registerComponent('RnAnimatedView', () => RnAnimatedView);
Untitled3.gif
