一直覺得網(wǎng)易云音樂的播放界面很酷，現(xiàn)在利用react-native 動(dòng)畫實(shí)現(xiàn)這個(gè)界面.要點(diǎn)有兩個(gè)，1圖片要變園使用borderRadius=1/2height.2動(dòng)畫處理改變圖片的旋轉(zhuǎn)角度

Untitled.gif

使用方法，直接react-native init 一個(gè)項(xiàng)目，然后把這段代碼復(fù)制到入口文件中
下面看代碼

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * 
 */


import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Animated,   //使用Animated組件
    Easing,     //引入Easing漸變函數(shù)
} from 'react-native';
 
class ReactNativeDemo extends Component {
    constructor(props:any) {
        super(props);
        //使用Animated.Value設(shè)定初始化值（縮放度，角度等等）
        this.state = {
            bounceValue: new Animated.Value(1), //你可以改變這個(gè)值看
//看效果是什么
            rotateValue: new Animated.Value(0),//旋轉(zhuǎn)角度的初始值
        };
    }
 
    componentDidMount() {
        //在初始化渲染執(zhí)行之后立刻調(diào)用動(dòng)畫執(zhí)行函數(shù)
        this.startAnimation();
    }
 
    startAnimation() {
        this.state.bounceValue.setValue(1);//和上面初始值一樣，所以
//彈動(dòng)沒有變化
        this.state.rotateValue.setValue(0);
        Animated.parallel([
            //通過Animated.spring等函數(shù)設(shè)定動(dòng)畫參數(shù)
            //可選的基本動(dòng)畫類型: spring, decay, timing
            Animated.spring(this.state.bounceValue, {
                toValue: 1,      //變化目標(biāo)值，也沒有變化
                friction: 20,    //friction 摩擦系數(shù)，默認(rèn)40
            }),
            Animated.timing(this.state.rotateValue, {
                toValue: 1,  //角度從0變1
                duration: 15000,  //從0到1的時(shí)間
                easing: Easing.out(Easing.linear),//線性變化，勻速旋轉(zhuǎn)
            }),
            //調(diào)用start啟動(dòng)動(dòng)畫,start可以回調(diào)一個(gè)函數(shù),從而實(shí)現(xiàn)動(dòng)畫循環(huán)
        ]).start(()=>this.startAnimation());
    }
 
    render() {
        return (
            <View style={styles.container}>
               //插入一張圖片
                <Animated.Image source={require('./img/pic.jpg')}
                                style={{width:150,
                                height: 150,borderRadius:75, //圖片變園
                                transform: [
                                //將初始化值綁定到動(dòng)畫目標(biāo)的style屬性上
                                {scale: this.state.bounceValue},
                                //使用interpolate插值函數(shù),實(shí)現(xiàn)了從數(shù)值單位的映
//射轉(zhuǎn)換,上面角度從0到1，這里把它變成0-360的變化
                                {rotateZ: this.state.rotateValue.interpolate({
                                inputRange: [0,1],
                                outputRange: ['0deg', '360deg'],
                                })},
                     ]}}>
                </Animated.Image>
 
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});
 


AppRegistry.registerComponent('AnimatinoDemo', () => ReactNativeDemo);