react-native 仿网易云音乐旋转唱片动画

一直觉得网易云音乐的播放界面很酷，现在利用react-native 动画实现这个界面.要点有两个，1图片要变园使用borderRadius=1/2height.2动画处理改变图片的旋转角度

Untitled.gif

使用方法，直接react-native init 一个项目，然后把这段代码复制到入口文件中
下面看代码

/** * Sample React Native App * https://github.com/facebook/react-native *  */import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Animated,   //使用Animated组件    Easing,     //引入Easing渐变函数} from 'react-native';class ReactNativeDemo extends Component {    constructor(props:any) {        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() {        return (            <View style={styles.container}>               //插入一张图片                <Animated.Image source={require('./img/pic.jpg')}                                style={{width:150,                                height: 150,borderRadius:75, //图片变园                                transform: [                                //将初始化值绑定到动画目标的style属性上                                {scale: this.state.bounceValue},                                //使用interpolate插值函数,实现了从数值单位的映//射转换,上面角度从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);