#小程序抽奖动画实现

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

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;}