//Animated.timing實(shí)現(xiàn)view的位置移動(dòng)
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很特殊，可以插入一些參數(shù)
            <Animated.View style={[{marginTop: 20, backgroundColor: '#ff00ff'}, {left: this.state.left.interpolate({
                //inputRange和outputRange定義了旋轉(zhuǎn)的范圍，可以調(diào)整參數(shù)看看兩者有什么聯(lián)系
                inputRange: [0, 1],
                outputRange: [0, 200],
            })}]}>
                <Text>我要開始移動(dòng)了</Text>
            </Animated.View>
        );
        return(
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <TouchableHighlight onPress={this.animation}>
                    <Text>點(diǎn)我開始動(dòng)畫</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