小程序抽奖动画实现

版权声明：多总结，帮助自己的同时也在帮助别人！留下意见和看法，让技术动起来！ https://blog.csdn.net/qiphon3650/article/details/82896587

#小程序抽奖动画实现

所有的抽奖都是由后台计算后得到的，前台只做动画展示

<view class='top-banner center'> <!--  轮播展示中奖信息区域  -->
    <swiper autoplay="{{true}}" interval="{{1500}}" circular="{{true}}" vertical='{{true}}'>
        <block wx:for="{{prizeInfo}}" wx:key="index">
            <swiper-item>
                <view>{{item.name}}{{item.prize}}</view>
            </swiper-item>
        </block>
    </swiper>
</view>
<!-- 轮播结束 抽奖转盘  -->
<view class='turntable' bindtap='doLottery'>
    <image class='turntable-bj' style="transition:all {{time?time:'3s ease-in'}}; transform:rotate({{transformDeg + 'deg'}}) "  src='../../../img/turntable.png'></image>
    <image class='arrow' src='../../../img/arrow.png'>
    </image>
</view>

const app = getApp();

var index = {
    data:{  
        prizeInfo:[
            {
                name:'qiphon',
                prize:'5元'
            },
            {
                name:'qiphon23423',
                prize:'53元'
            },
            {
                name:'qipsdfhon',
                prize:'35元'
            }
        ],
        transformDeg:0,  // 旋转角度
        transition:'all 3s cubic-bezier(0.005, 1.340, 1.000, 0.865)',
        time:'999s'
    },
    onLoad(opt){
        console.log(opt)

    },
    onReady(){
        this.animation = wx.createAnimation({
            timingFunction:'esse-in-out',
            duration:2000
        });
        this.animationDeg = 360;
    },
    loadCoupons(){ // 加载获奖信息
        
    },
    doLottery(){  // 抽奖
        var _this = this;
        if(this.aniRotate)return;
        this.aniRotate = true;
        this.setData({
            transformDeg:this.data.transformDeg + 360*900,
            time:'100s ease'
        })
        setTimeout(function(){
            console.log('请求完成'+_this.data.transformDeg)  // setTimeout 模拟ajax请求
            _this.setData({
                transformDeg:-360*4,
                time:'3s ease'
            })
            setTimeout(function(){
                console.log('返回结果'+_this.data.transformDeg)
                _this.setData({
                    transformDeg:360*2 + 0,
                    time:'6s cubic-bezier(0.000, 0.765, 0.000, 0.955)'
                })
                setTimeout(function(){
                    _this.aniRotate = false;
                    wx.showModal({
                        title:'中奖信息',
                        content:'恭喜获得奖品'
                    })
                },6000)
            },2000)
        },3000)
    },
}
Page(index);

.top-banner{
    background: #fff;
    padding:20rpx;
}
.top-banner swiper{
    height: 50rpx;
    line-height: 50rpx;
}
/* 转盘 */
.turntable{
    position: relative;
    width: 100%;
    height: 530rpx;
}
.turntable-bj{
    display: block;
    margin:0 auto;
    width:600rpx;
    height: 530rpx;
}
.turntable .arrow{
    position: absolute;
    top:0;
    right:0;
    left:0;
    bottom:110rpx;
    margin:auto;
    width:93.5rpx;
    height: 212rpx;
}