React Native 动画 ---Animated

来源：互联网发布：被淘宝内部优惠券骗了编辑：程序博客网时间：2024/06/05 09:20

关于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    },})

阅读全文

0 0