react-native Animated简单动画制作

react-native Animated简单动画制作

1、代码

import React from "react";
import { StyleSheet, View, Animated, Image } from "react-native";
class LoopAnimate extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            spinVal: new Animated.Value(0),
            spinVal1: new Animated.Value(0),
        }
    }
    componentDidMount() {
        this.startAnimate();
    }
   //开启动画
   tartAnimate = () => {
        const animatedLoop = Animated.sequence([
            Animated.parallel([
                Animated.timing(this.state.spinVal, {
                    toValue: 1,
                    duration: 200,
                    delay: 200,
                    useNativeDriver: true
                })，
                Animated.timing(this.state.spinVal1, {
                    toValue: 1,
                    duration: 200,
                    delay: 200,
                    useNativeDriver: true
                })
            ]),
            Animated.parallel([
                Animated.timing(this.state.spinVal, {
                    toValue: 0,
                    duration: 200,
                    useNativeDriver: true
                })，
                Animated.timing(this.state.spinVal1, {
                    toValue: 0,
                    duration: 200,
                    useNativeDriver: true
                })
            ])
        ])
        Animated.loop(animatedLoop).start();
    }
     render() {
        const douone = require('../assets/images/dou1.png');
        const { spinVal, spinVal1} = this.state;
        const spinValue = spinVal.interpolate({ // 0、1值转化'20deg'、'0deg'
            inputRange: [0, 1],
            outputRange: ['20deg', '0deg']
        })
         const spinValue1 = spinVal1.interpolate({
            inputRange: [0, 1],
            outputRange: ['20deg', '0deg']
        })
        return (
            <View>
                <Animated.View style={{transform: [{rotate: spinValue}]}}>
                    <Image source={douone} style={styles.douImgcss}></Image>
                </Animated.View>
                <Animated.View style={{transform: [{rotate: spinValue1}]}}>
                    <Image source={douone} style={styles.douImgcss}></Image>
                </Animated.View>
            </View>
        )
    }
}
var styles = StyleSheet.create({
    douImgcss: {
        position: "absolute",
        width: pxToDp(60),
        height: pxToDp(73),
        top: pxToDp(-100),
        resizeMode: 'contain'
    }
})
export default LoopAnimate;

2、效果

[‘20deg’, ‘0deg’]来回循环摆动

3、animated功能介绍

一、 Animated.sequence循环执行
二、 Animated.parallel 同时开始一个动画数组里的全部动画
三、 Animated.timing 推动一个值按照一个过渡曲线而随时间变化
四、 interpolate转化值例：0、1值转化’20deg’、‘0deg’