rn 动画组件

1、设置动画属性对象
	可以通过this设置全局对象
		this.xx=new Animated.Value(值);

2、将动画属性对象绑定到要动画的组件style上,当属性来使用
		如style={{width:this.xx}}

3、设置动画
		
		Animated.timing(要改变的动画属性对象,{
			toValue:改变动画属性的最终值
			duration:持续时间毫秒数
		}).start()

动画配置信息:
能使用动画的组件：

Animated.Image
Animated.ScrollView
Animated.Text
Animated.View

代码示例：

import React,{Component} from 'react'
import {View,Text,StyleSheet,Animated,TouchableOpacity,TouchableHighlight} from 'react-native'

export default class App extends Component{
    UNSAFE_componentWillMount=()=>{
        //创建动画属性对象
        this.ax=new Animated.Value(50);
        this.ay=new Animated.Value(100);

    }
    AnimatedBox=()=>{
        //点击后,设置动画变化
        Animated.timing(this.ax,{
            toValue:200,
            duration:1000
        }).start()

        Animated.timing(this.ay,{toValue:500,duration:500}).start()

    }

    render(){
        return(
            <>
                <View>
                        <TouchableOpacity
                            onPress={this.AnimatedBox}
                        >
                            <Animated.View style={[style.box,{wdith:this.ax,height:this.ay}]}><Text>hh</Text></ Animated.View>
                        </TouchableOpacity>
                </View>
            </>
        )
    }
}
const style=StyleSheet.create({
    box:{
        backgroundColor:'blue',
        width:50,
        height:100
    }
})