react native 动画组件Animated

Animate.js

import React,{ Component } from 'react'
import {
    AppRegistry,StyleSheet,Text,View,Animated,//使用Animated组件
    Easing,//引入Easing渐变函数
} from 'react-native';

export default class Animate extends Component {
    constructor(props) {
        super(props);
        //使用Animated.Value设定初始化值（缩放度，角度等等）
        this.state = {
            fadeAnim: new Animated.Value(0),bounceValue: new Animated.Value(1),//你可以改变这个值看看效果是什么
            rotateValue: new Animated.Value(0),//旋转角度的初始值
        };
    }
 
    componentDidMount() {
        //先执行显现动画
        Animated.timing(this.state.fadeAnim,{
            toValue: 1,//角度从0变1
            duration: 3000,//从0到1的时间
        }).start()
        //在初始化渲染执行之后立刻调用动画执行函数
        this.startAnimation();
    }
 
    startAnimation() {
        this.state.bounceValue.setValue(1);//和上面初始值一样，所以
//弹动没有变化
        this.state.rotateValue.setValue(0);
        Animated.parallel([
            //通过Animated.spring等函数设定动画参数
            //可选的基本动画类型: spring,decay,timing
            Animated.spring(this.state.bounceValue,{
                toValue: 1,//变化目标值，也没有变化
                friction: 20,//friction 摩擦系数，默认40
            }),Animated.timing(this.state.rotateValue,//角度从0变1
                duration: 10000,//从0到1的时间
                easing: Easing.out(Easing.linear),//线性变化，匀速旋转
            })
            //调用start启动动画,start可以回调一个函数,从而实现动画循环
        ]).start(()=>this.startAnimation());
    }
    render() {
        let { fadeAnim } = this.state;
    
        return (
               //插入一张图片
            <Animated.View 
                style={{width:100,height: 100,marginBottom: 50,borderRadius:50,//图片变园
                        opacity: fadeAnim,transform: [
                        //将初始化值绑定到动画目标的style属性上
                        {scale: this.state.bounceValue},//使用interpolate插值函数,实现了从数值单位的映
//射转换,上面角度从0到1，这里把它变成0-360的变化
                        {rotateZ: this.state.rotateValue.interpolate({
                        inputRange: [0,1],outputRange: ['0deg','360deg'],})},]
            }}>
                  {this.props.children}
            </Animated.View>
        );
      }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,justifyContent: 'center',alignItems: 'center',}
});

HomeScreen.js引用

import React,{Component} from 'react';
import {View,Image} from 'react-native';
import Animate from './Animate'

export default class HomeScreen extends Component {
    static navigationOptions = {
        title: 'Home'
      }
    render() {
        return (
            <View>
                <Animate>
                    <Image
                      style={{width:100,height:100,borderRadius:50}}
                      source={{uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544688258390&di=3bec0483b2dedc9cc6f4249b88fe642e&imgtype=0&src=http%3A%2F%2Fstatic.open-open.com%2Flib%2FuploadImg%2F20160117%2F20160117152222_31.png'}}
                    />
                </Animate>
                <Text>Home  Screen</Text>
            </View>
        )
    }
}