vue 版的老虎機抽獎活動效果折騰小記

時間 2019-12-08

原文原文鏈接

前沿

最近公司有一個活動，讓作一個老虎機抽獎活動，對於以前沒有作過的我來講仍是有些吃力的，因而就開始各類網上找插件，發現大部分都是jquery的，要不就是好多一部分的，一個完整的流程都走不下來，更有甚者讓花錢買他的代碼，我就想說你們都是分享，互相交流，大家怎麼就那麼自私，因此今天把我折騰的老虎機分享出來，以來方便本身之後開發，而來你們也能夠發現不足，指出來共同進步。css

該項目須要雪碧圖哦

來先看看效果圖

代碼裏邊都有註釋，比較容易上手。我用的是曲線救國的方法，就是說並不完美，不太靈活，雪碧圖的位置一旦肯定，就儘可能不要動了，否則下次還須要在從新調雪碧圖的y軸的位置，這個很煩，但願看見的小夥伴給個建議。

做者最近一段時間比較忙，還未將該效果抽出公共組件，後期有機會抽成公共組件，就行了。會省好多事。

好了不說廢話了，上思路，代碼。

思路邏輯：老虎機抽獎結果之後臺告知爲準，因此前臺須要根據後臺返回的是否抽中標示來展現相應的效果前端

其實我剛開始認爲抽獎結果是前端作的，而後越陷越深，發現很差作出來，並且安全性不高，而後跟小夥伴交流才知道通常抽獎類的活動抽獎結果都是由後臺告知，這下就輕鬆多了，由於你只須要根據結果展現相應的效果就行了。jquery

主要運用的技術

老虎機抽獎活動運用到了css3的transition和css3的過渡來實現平滑滾動的效果，經過改變背景雪碧圖的y軸位置backgroundPositionY來展現不一樣的獎品，以達到抽獎效果。js經過定時器能夠達到轉動效果css3

第一步，佈局

<template>
    <div id="slotMachine">
        <div class="PosRela priceCenter HomeBGColor Width100">
            <img class="Width100 Height100" src="../img/2@2x.png">
            <!-- 老虎機抽獎框 -->
            <div class="PosAbso trigerCenter">
                <transition name="down-up-translate-fade">
                    <div class="SpriteChart" :style="{backgroundPositionY: priceOne + 'rem'}"></div>
                </transition>
                <transition name="down-up-translate-fade">
                    <div class="SpriteChart" :style="{backgroundPositionY: priceTwo + 'rem'}"></div>
                </transition>
                <transition name="down-up-translate-fade">
                    <div class="SpriteChart" :style="{backgroundPositionY: priceThr + 'rem'}"></div>
                </transition>
            </div>
        </div>
        <!-- 前往抽獎區參與活動贏好禮！ -->
        <!-- DrawToast 是封裝的公共彈窗組件 -->
        <DrawToast v-show='isGoToPrice' @fromChild="GoToPrice">
            <div class="PosRela GoToPrice" slot="luckyDrawCenter">
                <img class="Width100 Height100" src="../img/彈窗@2x (1).png">
                <div class="PosAbso Width100 Font17 FontWeight GoToPriceText">前往抽獎區參與活動贏好禮！</div>
            </div>
        </DrawToast>
        <!-- 得到福利券彈窗 -->
        <DrawToast v-show='isGetWelfare' @fromChild="GetWelfare">
            <div class="PosRela GetWelfare" slot="luckyDrawCenter">
                <img class="Width100 Height100" src="../img/彈窗-點擊抽獎@2x.png">
                <div class="PosAbso Width100 Font20 FontWeight constrGet">恭喜您得到</div>
                <div class="PosAbso Width100 getVoucher">
                    <div class="getVoucherName Font24 FontWeight Ellipsis">0.8%福利券</div>
                </div>
                <div class="PosAbso Width100 Font14 PrizesIssued">獎品已發放，您可在我的中心查看！</div>
                <div class="PosAbso Width100 FontWeight commonButton CheckNow">
                    <img class="Height100" src="../img/按鈕-當即抽獎@2x (1).png">
                    <div class="PosAbso Width100 Height100 Font18 ColorWhite FontWeight">當即查看</div>
                </div>
            </div>
        </DrawToast>
    </div>
</template>
<style lang="less" scoped>
//這是項目公共的css，在本項目中用到的rem是2倍算法，因此要從你的設計圖尺寸乘2除以100獲得。
@import url('../../../components/tigerBaseCss/index');
.priceCenter {
    height: 4.22rem;
    border: 1px solid blue;
    .trigerCenter {
        border: 1px solid blue;
        width: 5.5rem;
        height: 3rem;
        overflow: hidden;
        left: 1rem;
        top: 0.6rem;
        border-radius: 0.1rem;
        .SpriteChart {
            width: 1.75rem;
            border: 1px solid red;
            height: 9.8rem;
            background: url("../img/choujiangzuhe.png") center center repeat-y;
            background-size: 100% 100%;
            float: left;
            margin-right: 0.1rem;
            background-attachment: scroll;
            &:nth-child(2) {}
            &:nth-child(3) {
                float: right;
                margin: 0;
            }
        }
        .down-up-translate-fade-enter-active,
        .down-up-translate-fade-leave-active {
            transition: all 0.1s;
            -webkit-transition: all 0.1s;
            -moz-transition: all 0.1s;
            -o-transition: all 0.1s;
        }
        .down-up-translate-fade-enter,
        .down-up-translate-fade-leave-active {
            opacity: 1;
        }
        .down-up-translate-fade-enter {
            transform: translateY(0px);
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -o-transform: translateY(0px);
        }
        .down-up-translate-fade-leave-active {
            transform: translateY(0px);
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -o-transform: translateY(0px);
        }
    }
}




//彈窗內公共彈窗樣式
.commonButton {
    height: 0.9rem;
    div {
        top: 0;
        left: 0;
        line-height: 0.8rem;
    }
}


.GoToPrice {
    width: 5.48rem;
    height: 5.58rem;
    .GoToPriceText {
        top: 4.2rem;
        color: #DF2531;
    }
}


.GetWelfare {
    width: 5.6rem;
    height: 5.5rem;
    .constrGet {
        color: #B46C38;
        top: 1.02rem;
    }
    .getVoucher {
        top: 2.22rem;
        .getVoucherName {
            width: 3rem;
            margin: auto;
            color: #E04D4B;
        }
    }
    .PrizesIssued {
        color: #B46C38;
        top: 3rem;
    }
    .CheckNow {
        top: 3.9rem;
    }
}
</style>
複製代碼

第二步：邏輯

<script>
export default {
    data() {
        return {
            isGoToPrice: false, //前往抽獎區參與活動贏好禮！
            isGetWelfare: false, //得到福利券彈窗
            priceOne: 8.1, //控制滾動圖的位置，顯示那個獎品在中間的位置（須要雪碧圖)
            priceTwo: 35.44,   //也就是背景雪碧圖的y軸的位置
            priceThr: 53.02,
            textone: 0, //抽中某個獎品第一列的展現的圖片，下邊倆以此類推
            texttwo: 0,
            textthe: 0,
        }
    },
    mounted() {
    },
    watch: {
        //經過監聽第三列的圖的y軸的位置判斷中的什麼獎，展現該獎的名字
        priceThr(newValue, olderValue) {
            const that = this;
            switch (newValue) {
                case 1181.2:   //這個模擬的中獎的狀況，因此彈出中獎彈層
                    setTimeout(() => {
                        //控制中獎彈層是否彈出
                        that.isGetWelfare = true;
                    }, 500);
                    break;
                case 1276.88:   //這個位置未中獎  因此彈出很抱歉
                    setTimeout(() => {
                        that.isGoToPrice = true;
                    }, 500);
                    break;
            }
        }
    },
    methods: {
        //開始抽獎
        beganDraw() {
            console.log(this.LuckyDraw);
            if (this.LuckyDraw > 0) {
                //此處須要調接口，從接口裏獲取是否中獎，而後改變number的值，這樣就能夠在this.showPrize(number);方法中設置雪碧圖的詳細位置
                let number = 7;
                this.showPrize(number);
                //該方法是經過定時器來控制雪碧圖的位置，以達到轉動的效果
                this.startDraw();
            }
        },
        startDraw() {
            this.timeone(10);
            setTimeout(() => {
                this.timetwo(0);
            }, 500);
            setTimeout(() => {
                this.timethe(0);
            }, 1000);
        },
        timeone(num) {
            var t = setInterval(() => {
                if (num <= this.textone) {
                    num += 10;
                    this.priceOne = num;
                } else {
                    clearInterval(t);
                    this.priceOne = this.textone;
                }
            }, 30);
        },
        timetwo(num) {
            var t = setInterval(() => {
                if (num <= this.texttwo) {
                    num += 10;
                    this.priceTwo = num;
                } else {
                    clearInterval(t);
                    this.priceTwo = this.texttwo;
                }
            }, 30);
        },
        timethe(num) {
            var t = setInterval(() => {
                if (num <= this.textthe) {
                    num += 10;
                    this.priceThr = num;
                } else {
                    clearInterval(t);
                    this.priceThr = this.textthe;
                }
            }, 30);
        },
        // 根據抽獎信息判斷抽中的獎品
        showPrize(num) {
            console.log(num);
            const that = this;
            switch (num) {
                case 1: // 抽中每一個獎項的展現圖（也就是雪碧圖的y軸的位置），須要單獨設置
                    that.textone = 1091;
                    that.texttwo = 1091;
                    that.textthe = 1091;
                    break;
                case 2: 
                    that.textone = 1112;   //這裏的數值均可以設置成變量，方便控制
                    that.texttwo = 1112;
                    that.textthe = 1112;
                    break;
                case 3: 
                    that.textone = 1135;
                    that.texttwo = 1135;
                    that.textthe = 1135;
                    break;
                case 4: 
                    that.textone = 1158;
                    that.texttwo = 1158;
                    that.textthe = 1158;
                    break;
                case 5: 
                    that.textone = 1181.2;
                    that.texttwo = 1181.2;
                    that.textthe = 1181.2;
                    break;
                case 6: 
                    that.textone = 1203;
                    that.texttwo = 1203;
                    that.textthe = 1203;
                    break;
                case 7:  //如有未中獎狀況單獨設置一個或多個未中獎的展現圖（也就是雪碧圖的y軸的位置）
                    that.textone = 1210.5;
                    that.texttwo = 1253.43;
                    that.textthe = 1276.88;
                    break;
            }
        },

    }
};
</script>

複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。