React Native 动画 ---Animated

关于Animated动画，使用的时候组件不能直接写<Text></Text>

要写成 

<Animated.Text></Animated.Text>

先实现一个简单的动画：

首先导入动画组件：

import {
    StyleSheet,
    Text,
    View,
    Animated,
    Easing,
} from 'react-native';

看一下要实现的效果：

在组件加载的时候，让text的字体从小变大。

首先在state中定义一个初始字体大小,

然后在componentDidMount中，执行动画方法，让字体变大：

Animated.timing(
            this.state.fadeAnim,  //初始值
            {
                toValue: 22,            //结束时字体的大小
                duration: 2000,        //动画时间
                easing: Easing.linear,  // 缓动函数(可省略)
            },
        ).start();

看一下代码：

export default class Swiper extends Component {

    constructor(props) {
        super(props);
        this.state = {
            fadeAnim: new Animated.Value(15),  //设置初始值
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Animated.Text style={{fontSize: this.state.fadeAnim}}>
                    Welcome my react-native !</Animated.Text>
            </View>
        );
    }

    componentDidMount() {
        Animated.timing(
            this.state.fadeAnim,  //初始值
            {
                toValue: 22,            //结束值
                duration: 2000,        //动画时间
                easing: Easing.linear,
            },
        ).start();               //开始
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    
});

稍微复杂点的动画：

/**
 * Created by Lzy on 2017/7/17.
 */
import React from 'react';
import {
    View,
    Animated,
    StyleSheet,
    Easing,
} from 'react-native';


export default class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            spin: new Animated.Value(0),
            animatedValue: new Animated.Value(0),
        }
    }

    componentDidMount() {
        this._spin();
        this._twoAnimate();
    }

    _spin() {
        this.state.spin.setValue(0);
        Animated.timing(
            this.state.spin,
            {
                toValue: 1,
                duration: 4000,
                easing: Easing.linear
            }
        ).start(() => this._spin());
    }

    _twoAnimate() {
        this.state.animatedValue.setValue(0);
        Animated.timing(
            this.state.animatedValue, {
                toValue: 1,
                duration: 2000,
                easing: Easing.linear
            }
        ).start(() => this._twoAnimate());
    }

    render() {
        const spin = this.state.spin.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '360deg']
        });

        const rmarginLeft = this.state.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 300]
        });
        const ropacity = this.state.animatedValue.interpolate({
            inputRange: [0, 0.5, 1],
            outputRange: [0, 1, 0],
        });
        const rmoveMargin = this.state.animatedValue.interpolate({
            inputRange: [0, 0.5, 1],
            outputRange: [0, 300, 0]
        });
        const rtextSize = this.state.animatedValue.interpolate({
            inputRange: [0, 0.5, 1],
            outputRange: [16, 32, 16]
        });
        const rrotateX = this.state.animatedValue.interpolate({
            inputRange: [0, 0.5, 1],
            outputRange: ['0deg', '180deg', '0deg']
        });

        return (
            <View style={{flex: 1, marginTop: 44}}>
                <Animated.Image
                    style={{
                        transform: [{rotate: spin}]
                    }}
                    source={require('./img/a.jpg')}/>


                <Animated.View style={{
                    backgroundColor: 'green',
                    marginVertical: 10,
                    marginLeft: rmarginLeft,
                    width: 30,
                    height: 30
                }}/>
                <Animated.View style={{
                    backgroundColor: 'black',
                    marginVertical: 10,
                    opacity: ropacity,
                    width: 30,
                    height: 30
                }}/>
                <Animated.View style={{
                    backgroundColor: 'red',
                    marginVertical: 10,
                    transform: [{rotateX: rrotateX}],
                    width: 30,
                    height: 30
                }}/>
                <Animated.View style={{
                    backgroundColor: 'blue',
                    marginVertical: 10,
                    transform: [{translateX: rmoveMargin}],
                    width: 30,
                    height: 30
                }}/>


                <Animated.Text
                    style={{fontSize: rtextSize}}
                    onPress={() => {
                        alert('zuhe')
                    }}>组合动画</Animated.Text>
            </View>)
    }


}

const styles = StyleSheet.create({
    text: {
        marginVertical: 15
    },
    container: {
        width: 375,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'green',
        //  height:50
    },
})