react-native Animated, 旋转动画

import React, {Component} from 'react';
import { StyleSheet, View, Animated, Easing } from 'react-native';

const circle = require('../../resources/img/loginCircle.png');
class Index extends Component {
    constructor(props) {
        super(props);
        this.spinValue = new Animated.Value(0)
        this.state = {
        };
    }
    componentDidMount(){
        this.spin();
    }
    //旋转方法
    spin = () => {
        this.spinValue.setValue(0)
        Animated.timing(this.spinValue,{
          toValue: 1, // 最终值 为1,这里表示最大旋转 360度
          duration: 4000,
          easing: Easing.linear
       }).start(() => this.spin())
    }
    render() {
        const { user, pwd, fadeAnim} = this.state;
        //映射 0-1的值 映射 成 0 - 360 度  
        const spin = this.spinValue.interpolate({
            inputRange: [0, 1],//输入值
            outputRange: ['0deg', '360deg'] //输出值
          })
        return(
            <View style={styles.container}>
                    <Animated.Image style={[styles.circle,{transform:[{rotate: spin }]}]} source={circle}/>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'#00a0e4'
    },
    circle:{
        position:'absolute',
        width: 300,
        height: 306
    }
});
export default Index;

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值