跑马灯抽奖动画

跑马灯抽奖动画代码

工作中用到了跑道灯抽奖动画，之前模仿的同事写的，总感觉不是很好，昨天百度了下然后看到不错的，自己试着写了下，最后两圈减速的判断条件写的不好，我理想的应该是，快要接近中奖位置的最后 8 个过渡动画是减速的，而现在是第 5 圈就开始减速，如果中奖位置是 7 那就减速了整整 2 圈，自我感觉不太好

html

<section>
    <ul class="lottery-box" id="lotteryUl">
        <li class="li li-0">
            <div class="up"><span class="yuan">￥</span>1</div>
            <div class="down">电影票红包</div>
        </li>
        <li class="li li-1">
            <div class="up"><span class="yuan">￥</span>1000</div>
            <div class="down">观影套餐</div>
        </li>
        <li class="li li-2">
            <div class="up"><span class="yuan">￥</span>5</div>
            <div class="down">景点红包</div>
        </li>
        <li class="li li-7">
            <div class="up"><span class="yuan">￥</span>5</div>
            <div class="down">电影票红包</div>
        </li>
        <li>
            <div class="start" id="startBtn">立即抽奖</div>
        </li>
        <li class="li li-3">
            <div class="up"><span class="yuan">￥</span>10</div>
            <div class="down">电影票红包</div>
        </li>
        <li class="li li-6">
            <div class="up"><span class="yuan">￥</span>40</div>
            <div class="down">观影券</div>
        </li>
        <li class="li li-5">
            <div class="tongcheng"></div>
            <div class="down">同城公仔</div>
        </li>
        <li class="li li-4">
            <div class="up"><span class="yuan">￥</span>3</div>
            <div class="down">电影票红包</div>
        </li>
    </ul>
</section>

css

section {
    background: url(http://img1.40017.cn/cn/s/2016/touch/zt/45587/img_3.jpg) top center no-repeat;
    background-size: contain;
    height: 5.76rem;
    position: relative;
}

.lottery-box {
    margin: auto;
    width: 5.65rem;
    padding-left: .2rem;
    height: 4.6rem;
    overflow: hidden;
    padding-top: .65rem;
}

.lottery-box li {
    background: url(http://img1.40017.cn/cn/s/2016/touch/zt/45587/lottery-bg.png) center no-repeat;
    background-size: contain;
    width: 1.67rem;
    height: 1.43rem;
    float: left;
    margin: 0 .2rem .12rem 0;
    position: relative;
}

.lottery-box li:nth-child(5) {
    background: url(http://img1.40017.cn/cn/s/2016/touch/zt/45587/btn-bg.png) center no-repeat;
    background-size: contain;
    font-size: .32rem;
    color: #222c45;
    font-weight: 600;
    line-height: 1.43rem;
    text-align: center;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .1);
}

.lottery-box .on {
    background: url(http://img1.40017.cn/cn/s/2016/touch/zt/45587/lottery-on.png) center no-repeat;
    background-size: contain;
}

.lottery-box .up {
    padding: 0 .1rem;
    height: .55rem;
    background: #f2ede8;
    border-radius: .15rem;
    color: #8e7b67;
    font-size: .36rem;
    font-family: Arial;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    display: inline-block;
    font-weight: 600;
    position: absolute;
    top: .2rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.lottery-box .yuan {
    font-size: .2rem;
}

.lottery-box .down {
    color: #f7e0c3;
    font-size: .24rem;
    text-align: center;
    line-height: 1em;
    margin: .95rem 0 0 0;
}

.lottery-box .tongcheng {
    width: .91rem;
    height: .75rem;
    background: url(http://img1.40017.cn/cn/s/2016/touch/zt/45587/tongcheng.png) center no-repeat;
    background-size: contain;
    position: absolute;
    top: .2rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

js

function Lottery() {
    this.timer = null; //定时器
    this.rotateIndex = 0; //旋转初始位置
    this.speed = 200; //旋转初始位置
    this.circle = 0; //已转动圈数
    this.minCircle = 5; //至少转多少圈
    this.prize = 0; //中奖索引
    this.count = $('#lotteryUl').find('.li').length; //奖品数量
    this.backFn = function() {}; //动画结束执行的函数
}

Lottery.prototype = {
    // 开始
    start: function() {

        var that = this;
        timer = setTimeout(function() {
            that.start();
        }, this.speed);

        this.addCircle();
        this.setState();
        this.changeSpeed();
    },
    // 停止
    stop: function(argument) {
        if (this.circle > this.minCircle && this.prize == this.rotateIndex) {
            console.log(this.circle, this.rotateIndex)
            clearTimeout(timer);
            // 返回函数
            setTimeout(this.backFn, 300);
        }
    },
    // 动画-当前位置添加class
    setState: function() {
        var beforeIndex = this.rotateIndex === 0 ? this.count - 1 : this.rotateIndex - 1;
        $('#lotteryUl').find('.li-' + beforeIndex).removeClass('on');
        $('#lotteryUl').find('.li-' + this.rotateIndex).addClass('on');

        this.stop();

        this.rotateIndex = this.rotateIndex + 1;
        if (this.rotateIndex == this.count) {
            this.rotateIndex = 0;
        }
    },
    // 改变速度-第一圈加速，最后2圈减速
    changeSpeed: function() {
        // 加速
        if (this.circle < 2) {
            this.speed -= 15;
        }
        // 减速
        if (this.circle > this.minCircle - 1) {
            this.speed += 30;
        }
    },
    // 转动圈数
    addCircle: function(argument) {
        if (this.rotateIndex == 0) {
            this.circle = this.circle + 1;
        }
    }
}

// 点击事件-开始按钮
$('#startBtn').on('click', function() {
    var ul = $('#lotteryUl').find('li');
    ul.removeClass('stop');
    ul.removeClass('on');

    var lotteryFn = new Lottery();
    lotteryFn.start();
    lotteryFn.prize = 3;
    lotteryFn.backFn = function() {
        alert('中奖了！')
    };
})