Css 动画 旋转 转盘

旋转完毕 停靠的位置，  根据后台返回的数据字段 判断停留位置
prizes:{
                'TT_ONE_HUNDRED_PACKAGE': [(4 * Math.PI) / 3], //
                'TT_FIFTY': [(10 * Math.PI) / 6, Math.PI], //  50
                'TT_TWENTY_FIVE': [Math.PI / 3],
                'TT_HALF_DISCOUNT': [(2 * Math.PI) / 3], //, 半价
                'TT_FULL_DISCOUNT': [0],
            },

//canvas渲染每一帧效果图
    onLoadWheel = (angle)=> {
        let canvas = document.getElementById('wheel'); //id选择 元素
        let context = canvas.getContext('2d');
        //先保存，以便后面重绘前回到现在的状态
        context.save();
        let width = canvas.width;
        let height = canvas.height;
        let img = new Image();
        img.src = WheelTable;  //为旋转的图片
        img.onload = function() {
            context.translate(width * 0.5, height * 0.5);
            // context.rotate((Math.PI / 18) * i);
            context.rotate(angle);
            context.drawImage(img, -width / 2, -height / 2, width, height);
            //画图后需要回到之前save的状态
            context.restore();
        };
    }

    //循环调用自身，渲染出动画效果
    startDraw = (stopAngle, boool)=> {
        let that = this;
        let tempSpeed = (stopAngle - currentAngle) / 100;
        currentAngle += tempSpeed;
        setTimeout(function () {
            if ((stopAngle - currentAngle) < 0.01) {
                wheelStatus = false;
                that.setState({
                    showModal:boool,
                });
            } else {
                that.onLoadWheel(currentAngle);
                that.startDraw(stopAngle, boool);
            }
        }, 10);
    }


//点击开始抽奖活动，判断是否应该继续抽奖
    clickStart = ()=> {
        //判断是否正在抽奖
        if (wheelStatus) {
            return;
        }
          let that = this;
          let url = `自己接口信息`;
            reqm.requestGetNoAuth(url).then(res=>{
                if (res.status === 200) {
                    currentAngle = 0;  //每次旋转初始化
                    that.props.changeLeftTime(res.data.lotteryNum);  //后端返回的剩余抽奖次数字段
                    that.props.getCoupon(res.data.coupons);   //展示中奖信息 （自己写样式及其组件）
                    let tempResult = res.data.lotteryType;  //后端返回的中奖信息字段
                    let prize = that.state.prizes[tempResult]; //根据后端返回的中奖信息字段随机给到（对应该奖励的圆盘）一个旋转位置
                    let resultCount = prize.length;
                    let finalResult = Math.floor(Math.random() * resultCount);
                    let plusAngle = prize[finalResult];
                    let stopAngle = 20 * Math.PI + plusAngle;
                    wheelStatus = true;
                    that.startDraw(stopAngle);
                }
    
            }).catch(err=>{
                Alert.show({
                    content:err
                });
            });
        }

加油哦！