rn 动画组件

左手的ㄟ右手 2021-07-25 00:34 702阅读 0赞

1、设置动画属性对象
    	可以通过this设置全局对象
    		this.xx=new Animated.Value(值);
    
    2、将动画属性对象绑定到要动画的组件style上,当属性来使用
    		如style={
       {width:this.xx}}
    
    3、设置动画
    		
    		Animated.timing(要改变的动画属性对象,{
    			toValue:改变动画属性的最终值
    			duration:持续时间毫秒数
    		}).start()

动画配置信息:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]能使用动画的组件：

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
        }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/944401b7b1974cf387fc11b336d83c6f.png