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 = {
            bounceValue: new Animated.Value(1), //你可以改變這個值看看效果是什麼
            rotateValue: new Animated.Value(0),//旋轉角度的初始值
        };
    }
 
    componentDidMount() {
        //在初始化渲染執行之後立刻呼叫動畫執行函式
        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, {
                toValue: 1,  //角度從0變1
                duration: 15000,  //從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, //圖片變園
                        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,Text, 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>
        )
    }
}