React-Native 学习Animated -1

//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