完善动效

2023-10-23 14:05:38 +08:00
parent 2e76b126e4
commit 276b62cd8e
8 changed files with 285 additions and 55 deletions
--- a/view/yinmeng/activity/2023-halloween/css/index.css
+++ b/view/yinmeng/activity/2023-halloween/css/index.css
@@ -54,7 +54,7 @@ body::-webkit-scrollbar {
  position: fixed;
  top: 0.93333rem;
  left: 0.45333rem;
-  z-index: 8;
+  z-index: 99;
  width: 0.82667rem;
  height: 0.82667rem;
 }
@@ -375,6 +375,7 @@ body::-webkit-scrollbar {
  bottom: 0.9rem;
  position: absolute;
  transition: all .3s;
+  z-index: 2;
 }

 .page1 .road .boxImg {
@@ -418,6 +419,51 @@ body::-webkit-scrollbar {
  top: 6.86667rem;
 }

+.page1 .road .boxImgSvgaA,
+.page1 .road .boxImgSvgaB,
+.page1 .road .boxImgSvgaC {
+  width: 103%;
+  height: 132%;
+  position: absolute;
+  left: 50%;
+  bottom: -0.6rem;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 3;
+  transform: translateX(-50%);
+  border-radius: 0.26667rem;
+  display: none;
+}
+
+.page1 .road .boxImgSvgaA .boxImgSvga_in1,
+.page1 .road .boxImgSvgaA .boxImgSvga_in2,
+.page1 .road .boxImgSvgaA .boxImgSvga_in3,
+.page1 .road .boxImgSvgaB .boxImgSvga_in1,
+.page1 .road .boxImgSvgaB .boxImgSvga_in2,
+.page1 .road .boxImgSvgaB .boxImgSvga_in3,
+.page1 .road .boxImgSvgaC .boxImgSvga_in1,
+.page1 .road .boxImgSvgaC .boxImgSvga_in2,
+.page1 .road .boxImgSvgaC .boxImgSvga_in3 {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 4.66667rem;
+  height: 4.66667rem;
+}
+
+.page1 .road .boxImgSvgaA .boxImgSvga_in1 canvas,
+.page1 .road .boxImgSvgaA .boxImgSvga_in2 canvas,
+.page1 .road .boxImgSvgaA .boxImgSvga_in3 canvas,
+.page1 .road .boxImgSvgaB .boxImgSvga_in1 canvas,
+.page1 .road .boxImgSvgaB .boxImgSvga_in2 canvas,
+.page1 .road .boxImgSvgaB .boxImgSvga_in3 canvas,
+.page1 .road .boxImgSvgaC .boxImgSvga_in1 canvas,
+.page1 .road .boxImgSvgaC .boxImgSvga_in2 canvas,
+.page1 .road .boxImgSvgaC .boxImgSvga_in3 canvas {
+  width: 100%;
+  height: 100%;
+}
+
 .page1 .diceBox {
  width: 8.8rem;
  height: 2.78667rem;
@@ -449,6 +495,7 @@ body::-webkit-scrollbar {
 }

 .page1 .diceBox .diceSvga {
+  display: none;
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
@@ -458,6 +505,11 @@ body::-webkit-scrollbar {
  z-index: 2;
 }

+.page1 .diceBox .diceSvga canvas {
+  width: 100%;
+  height: 100%;
+}
+
 .page1 .diceBox .diceLeftBut {
  width: 2.82667rem;
  height: 1.10667rem;
@@ -1522,6 +1574,7 @@ body::-webkit-scrollbar {
  display: flex;
  justify-content: space-around;
  overflow-y: scroll;
+  flex-wrap: wrap;
 }

 .gx .gx_in .gxBox li {
@@ -1675,6 +1728,7 @@ body::-webkit-scrollbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
+  margin-bottom: 0.13333rem;
 }

 .record_box .record_box_in ul li .left {
--- a/view/yinmeng/activity/2023-halloween/css/index.scss
+++ b/view/yinmeng/activity/2023-halloween/css/index.scss
@@ -62,7 +62,7 @@ body {
    position: fixed;
    top: px2rem(70);
    left: px2rem(34);
-    z-index: 8;
+    z-index: 99;
    width: px2rem(62);
    height: px2rem(62);

@@ -384,6 +384,7 @@ body {
            bottom: 0.9rem;
            position: absolute;
            transition: all .3s;
+            z-index: 2;
        }

        .boxImg {
@@ -427,6 +428,36 @@ body {
            top: px2rem(515);
        }

+        .boxImgSvgaA,
+        .boxImgSvgaB,
+        .boxImgSvgaC {
+            width: 103%;
+            height: 132%;
+            position: absolute;
+            left: 50%;
+            bottom: -0.6rem;
+            background: rgba(0, 0, 0, 0.6);
+            z-index: 3;
+            transform: translateX(-50%);
+            border-radius: 0.26667rem;
+            display: none;
+
+            .boxImgSvga_in1,
+            .boxImgSvga_in2,
+            .boxImgSvga_in3 {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                width: px2rem(350);
+                height: px2rem(350);
+
+                canvas {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
    }

    .diceBox {
@@ -459,7 +490,7 @@ body {
        }

        .diceSvga {
-            // display: none;
+            display: none;
            width: px2rem(120);
            height: px2rem(120);
            position: absolute;
@@ -467,6 +498,11 @@ body {
            transform: translateX(-50%);
            bottom: px2rem(42);
            z-index: 2;
+
+            canvas {
+                width: 100%;
+                height: 100%;
+            }
        }

        .diceLeftBut {
@@ -1464,7 +1500,8 @@ body {
        .p3 {
            top: px2rem(300);
        }
-        .p4{
+
+        .p4 {
            top: px2rem(346);
        }

@@ -1576,6 +1613,7 @@ body {
            display: flex;
            justify-content: space-around;
            overflow-y: scroll;
+            flex-wrap: wrap;

            li {
                width: px2rem(166);
@@ -1730,6 +1768,7 @@ body {
                width: 100%;
                display: flex;
                justify-content: space-between;
+                margin-bottom: px2rem(10);

                .left {
                    height: px2rem(50);
--- a/view/yinmeng/activity/2023-halloween/images/boxBig1.svga
+++ b/view/yinmeng/activity/2023-halloween/images/boxBig1.svga
--- a/view/yinmeng/activity/2023-halloween/images/boxBig2.svga
+++ b/view/yinmeng/activity/2023-halloween/images/boxBig2.svga
--- a/view/yinmeng/activity/2023-halloween/images/boxBig3.svga
+++ b/view/yinmeng/activity/2023-halloween/images/boxBig3.svga
--- a/view/yinmeng/activity/2023-halloween/images/dice0.png
+++ b/view/yinmeng/activity/2023-halloween/images/dice0.png
--- a/view/yinmeng/activity/2023-halloween/index.html
+++ b/view/yinmeng/activity/2023-halloween/index.html
@@ -74,14 +74,26 @@
        <div class="candyLine2"></div>
        <!-- 地图路线 -->
        <div class="road">
+            <!-- 鬼 -->
            <img src="./images/gui.png" alt="" class="gui">
-            <img src="./images/box1.png" alt="" class="boxImg boxImg1">
-            <img src="./images/box1.png" alt="" class="boxImg boxImg2">
-            <img src="./images/box1.png" alt="" class="boxImg boxImg3">
-            <img src="./images/box1.png" alt="" class="boxImg boxImg4">
-            <img src="./images/box1.png" alt="" class="boxImg boxImg5">
-            <img src="./images/box1.png" alt="" class="boxImg boxImg6">
-            <img src="./images/box1.png" alt="" class="boxImg boxImg7">
+            <!-- 静态宝箱 -->
+            <img src="./images/box1.png" alt="" class="boxImg boxImg1 boxImgs4">
+            <img src="./images/box1.png" alt="" class="boxImg boxImg2 boxImgs8">
+            <img src="./images/box1.png" alt="" class="boxImg boxImg3 boxImgs13">
+            <img src="./images/box1.png" alt="" class="boxImg boxImg4 boxImgs18">
+            <img src="./images/box1.png" alt="" class="boxImg boxImg5 boxImgs22">
+            <img src="./images/box1.png" alt="" class="boxImg boxImg6 boxImgs26">
+            <img src="./images/box1.png" alt="" class="boxImg boxImg7 boxImgs30">
+            <!-- 宝箱动效 -->
+            <div class="boxImgSvgaA boxImgSvga1">
+                <div class="boxImgSvga_in1"></div>
+            </div>
+            <div class="boxImgSvgaB boxImgSvga2">
+                <div class="boxImgSvga_in2"></div>
+            </div>
+            <div class="boxImgSvgaC boxImgSvga3">
+                <div class="boxImgSvga_in3"></div>
+            </div>
        </div>
        <!-- 骰子 -->
        <div class="diceBox">
@@ -234,12 +246,12 @@
                </p>
                <p>二、礼物上新：<br>
                    活动期间将限时上架5款万圣新限定礼物；1款万圣限定福袋</p>
-                <p>叁、活动攻略<br>
+                <p>三、活动攻略<br>
                    万圣地图<br>
                    1.送出≥1的万圣限定福袋解锁万圣地图<br>
                    2.收到≥5的万圣限定福袋解锁万圣地图<br>
                    3.地图升级详情查看升级条件和奖励内容<br>
-                    4.行走到宝箱位置可获得奖励，非宝箱位置无奖励<br>
+                    4.行走到宝箱位置可获得奖励，非宝箱位置无奖励，若刚好走到起点也可以获得奖励；<br>
                    糖果任务<br>
                    1.活动期间完成每日任务和循环任务领取糖果券；<br>
                    2.每日任务0点刷新，完成后进入活动页领取奖励；<br>
--- a/view/yinmeng/activity/2023-halloween/js/index.js
+++ b/view/yinmeng/activity/2023-halloween/js/index.js
@@ -37,7 +37,10 @@ var type = 'a';//a:送礼b:收礼;
 var type2 = 'a';//a:日榜b:总榜;
 var page = 1;//页码
 var drawPageSizeLack = true;//记录滑动锁
-var pooType = null;//宝箱等级
+var poolType = null;//宝箱等级
+var mapPos = null;//当前格子下标
+var drawLock = true;//抽奖的锁
+var candyNum = 0;//糖果卷
 // 初始化函数
 $(function () {
    getInfoFromClient()
@@ -69,6 +72,7 @@ $(function () {
        })
        getRecommendRoom();
        getConfig();
+        getTaskConfig();
    }, 100)
 })
 // 获取房间Uid接口
@@ -93,7 +97,7 @@ function getRecommendRoom () {
 }
 // 抽奖配置接口
 function getConfig () {
-    showLoading()
+    // showLoading()
    networkRequest({
        type: 'GEt',
        url: urlPrefix + '/act/2023Halloween/draw/getConfig',
@@ -101,7 +105,9 @@ function getConfig () {
            if (res.code === 200) {
                // 处理糖果数量
                $('.myCandy').text('我的糖果券：' + res.data.candyNum);
+                candyNum = res.data.candyNum;
                // 当前格子下标
+                mapPos = res.data.mapPos;
                $('.page1 .road .gui').css({
                    left: leftArr[res.data.mapPos],
                    bottom: bottArr[res.data.mapPos],
@@ -112,7 +118,7 @@ function getConfig () {
                    $('.endActivity').show();
                }
                // 判断等级处理
-                pooType = res.data.boxLevel;
+                poolType = res.data.boxLevel;
                if (res.data.boxLevel == 0) {
                    $('.page1 .mc').show();
                } else if (res.data.boxLevel == 1) {
@@ -128,6 +134,17 @@ function getConfig () {
                    $('.page1 .boxs3').addClass('boxOpen3');
                    $('.page1 .road .boxImg').attr('src', './images/box3.png');
                }
+                // 特效移动
+                $('.page1 .road .gui').css({
+                    left: leftArr[mapPos],
+                    bottom: bottArr[mapPos],
+                })
+                // 判断当前位置是否处于宝箱点位
+                if (mapPos == 4 || mapPos == 8 || mapPos == 13 || mapPos == 18 || mapPos == 22 || mapPos == 26 || mapPos == 30) {
+                    $(`.page1 .road .boxImgs${mapPos}`).attr('src', `./images/boxOpen${poolType}.png`)
+                } else {
+                    $(`.page1 .road .boxImg`).attr('src', `./images/box${poolType}.png`);
+                }
            } else {
                toastMsg(res.message)
            }
@@ -152,7 +169,7 @@ function getTaskConfig () {
                    $(`.page2 .task${i + 1} .but`).attr('click', res.status);
                    $(`.page2 .task${i + 1} .but`).text(res.status == 0 ? '去完成' : '已完成');
                    res.status == 1 ? $(`.page2 .task${i + 1} .but`).addClass('butActive') : $(`.page2 .task${i + 1} .but`).removeClass('butActive');
-                    if (i == 1) {
+                    if (i == 0) {
                        $('.page2 .task1 p').text(`登录活动页(${res.cur}/${res.need})`);
                    }
                    if (i == 1) {
@@ -233,8 +250,8 @@ $('.page1 .boxs').click(function () {
        $('.box_pub .box_pub_in .p1').text('活动期间送出万圣福袋*10');
        $('.box_pub .box_pub_in .p3').text('活动期间收到万圣福袋*20');
    } else {
-        $('.box_pub .box_pub_in .p1').text('活动期间送出南瓜棒棒糖/幽灵糖果*1');
-        $('.box_pub .box_pub_in .p3').text('活动期间收到南瓜棒棒糖/幽灵糖果*2');
+        $('.box_pub .box_pub_in .p1').text('活动期间送出万圣福袋*20');
+        $('.box_pub .box_pub_in .p3').text('活动期间收到万圣福袋*30');
    }
    $('.box_pub .box_pub_in .box_pub_ul li').removeClass('li1').removeClass('li2').removeClass('li3');
    $('.box_pub .box_pub_in .box_pub_ul li').addClass(`li${i}`);
@@ -410,11 +427,13 @@ $('.box_pub').click(function () {
 })
 // 关闭恭喜获得弹窗
 $('.gx .gx_in .but').click(function () {
+    drawLock = true;
    $('.gx').hide();
    bodyScroolFun(false);
 })
 // 关闭糟糕弹窗
 $('.zg').click(function () {
+    drawLock = true;
    $('.zg').hide();
    bodyScroolFun(false);
 })
@@ -450,7 +469,7 @@ function pageRecord (page) {
                        <li>
                            <div class="left">
                                <p>${dateFormat(res.createTime, 'yyyy/MM/dd')}</p>
-                                ${dateFormat(res.createTime, 'hh:mm:ss')}
+                                <b>${dateFormat(res.createTime, 'hh:mm:ss')}</b>
                            </div>
                            <div class="right">${res.rewardDesc}</div>
                        </li>
@@ -515,12 +534,23 @@ function diceSvga () {
 }
 // 摇骰子按钮
 $('.page1 .diceBox .dice').click(function () {
-    // diceSvga();
-    draw(pooType, 1);
+    if (drawLock) {
+        if (candyNum < 1) {
+            toastMsg('糖果券不足')
+            return
+        }
+        draw(poolType, 1);
+    }
 })
 // 全部投入
 $('.page1 .diceBox .diceRightBut').click(function () {
-    draw(pooType, null);
+    if (drawLock) {
+        if (candyNum < 1) {
+            toastMsg('糖果券不足')
+            return
+        }
+        draw(poolType, null);
+    }
 })
 // 活动结束按钮
 $('.endActivity .endActivity_in .but').click(function () {
@@ -530,64 +560,159 @@ $('.endActivity .endActivity_in .but').click(function () {
    getRank(rankType, data);
    $('.page3').show();
 })
+// 宝箱开奖动画定义
+let boxBig1 = new SVGA.Player('.boxImgSvga_in1');
+let boxBigParser1 = new SVGA.Parser('.boxImgSvga_in1');
+boxBigParser1.load(`./images/boxBig1.svga`, function (videoItem) {
+    boxBig1.loops = 1;
+    boxBig1.clearsAfterStop = false;
+    boxBig1.setVideoItem(videoItem);
+    boxBig1.startAnimation();
+    boxBig1.setContentMode('AspectFill');
+})
+// 宝箱开奖动画函数
+function boxBigSvga1 () {
+    $('.boxImgSvgaA').show();
+    boxBigParser1.load(`./images/boxBig1.svga`, function (videoItem) {
+        boxBig1.loops = 1;
+        boxBig1.clearsAfterStop = false;
+        boxBig1.setVideoItem(videoItem);
+        boxBig1.startAnimation();
+        boxBig1.setContentMode('AspectFill');
+        boxBig1.onFinished(() => {
+            $('.boxImgSvgaA').hide();
+            $('.gx').show();
+        })
+    })
+}
+// 宝箱开奖动画定义
+let boxBig2 = new SVGA.Player('.boxImgSvga_in2');
+let boxBigParser2 = new SVGA.Parser('.boxImgSvga_in2');
+boxBigParser2.load(`./images/boxBig2.svga`, function (videoItem) {
+    boxBig2.loops = 1;
+    boxBig2.clearsAfterStop = false;
+    boxBig2.setVideoItem(videoItem);
+    boxBig2.startAnimation();
+    boxBig2.setContentMode('AspectFill');
+})
+// 宝箱开奖动画函数
+function boxBigSvga2 () {
+    $('.boxImgSvgaB').show();
+    boxBigParser2.load(`./images/boxBig2.svga`, function (videoItem) {
+        boxBig2.loops = 1;
+        boxBig2.clearsAfterStop = false;
+        boxBig2.setVideoItem(videoItem);
+        boxBig2.startAnimation();
+        boxBig2.setContentMode('AspectFill');
+        boxBig2.onFinished(() => {
+            $('.boxImgSvgaB').hide();
+            $('.gx').show();
+        })
+    })
+}
+// 宝箱开奖动画定义
+let boxBig3 = new SVGA.Player('.boxImgSvga_in3');
+let boxBigParser3 = new SVGA.Parser('.boxImgSvga_in3');
+boxBigParser2.load(`./images/boxBig3.svga`, function (videoItem) {
+    boxBig3.loops = 1;
+    boxBig3.clearsAfterStop = false;
+    boxBig3.setVideoItem(videoItem);
+    boxBig3.startAnimation();
+    boxBig3.setContentMode('AspectFill');
+})
+// 宝箱开奖动画函数
+function boxBigSvga3 () {
+    $('.boxImgSvgaC').show();
+    boxBigParser2.load(`./images/boxBig3.svga`, function (videoItem) {
+        boxBig3.loops = 1;
+        boxBig3.clearsAfterStop = false;
+        boxBig3.setVideoItem(videoItem);
+        boxBig3.startAnimation();
+        boxBig3.setContentMode('AspectFill');
+        boxBig3.onFinished(() => {
+            $('.boxImgSvgaC').hide();
+            $('.gx').show();
+        })
+    })
+}
 // 抽奖接口
-function draw (pooType, num) {
+function draw (poolType, num) {
+    drawLock = false;
    showLoading()
    networkRequest({
        type: 'GEt',
        url: urlPrefix + '/act/2023Halloween/draw/draw',
-        data: { pooType, num },
+        data: { poolType, num },
        success (res) {
            if (res.code === 200) {
                // 判断是否全部投入或单次投入
                if (num != null) {
-                    // 特效移动
-                    for (let index = 0; index < res.data.step.length; index++) {
-                        setTimeout(function () {
-                            $('.page1 .road .gui').css({
-                                left: leftArr[index],
-                                bottom: bottArr[index],
-                            })
-                        }, (index + 1) * 300)
-                    }
-                }
-                //判断是否中奖
-                if (res.hasReward) {
-                    // 渲染中奖列表<p>xxx头饰*1天</p>
-                    var str = '';
-                    $('.gx .gx_in .gxBox li').remove();
-                    res.data.rewardList.forEach((res, i) => {
-                        str += `
-                        <li>
-                            <img src="${res.pic}" alt="" class="gift">
-                            <p>${res.desc}</p>
-                        </li>
-                        `
-                    })
-                    $('.gx .gx_in .gxBox').append(str);
-                    $('.gx').show();
-                    bodyScroolFun(true);
+                    diceSvga();
+                    setTimeout(function () {
+                        res.data.step.forEach((res, index) => {
+                            console.log(res);
+                            setTimeout(function () {
+                                $('.page1 .road .gui').css({
+                                    left: leftArr[res],
+                                    bottom: bottArr[res],
+                                })
+                            }, (index + 1) * 300)
+                        });
+                        drawOut(res, res.data.step.length + 1, poolType);
+                    }, 1600);
                } else {
-                    $('.zg').show();
-                    bodyScroolFun(true);
+                    drawOut(res, 0, poolType);
                }
                // 设置步数
-                $('.page1 .diceBox .dice').attr('src', `./images/dice${res.step.length}.png`);
-                getConfig();
+                $('.page1 .diceBox .dice').attr('src', `./images/dice${res.data.step.length}.png`);
            } else if (res.code == 4000) {
                toastMsg(res.message);
                getConfig();
+                drawLock = true;
            } else {
+                drawLock = true;
                toastMsg(res.message)
            }
            hideLoading(layerIndex)
        },
        error (err) {
+            drawLock = true;
            hideLoading(layerIndex)
            toastMsg('网络错误，请退出重进')
        }
    })
 }
+// 中奖或未中奖渲染
+function drawOut (res, time, poolType) {
+    //判断是否中奖
+    if (res.data.hasReward) {
+        // 渲染中奖列表<p>xxx头饰*1天</p>
+        var str = '';
+        $('.gx .gx_in .gxBox li').remove();
+        res.data.rewardList.forEach((res, i) => {
+            str += `
+        <li>
+            <img src="${res.pic}" alt="" class="gift">
+            <p>${res.desc}</p>
+        </li>
+        `
+        })
+        $('.gx .gx_in .gxBox').append(str);
+        setTimeout(function () {
+            poolType == 1 ? boxBigSvga1() : poolType == 2 ? boxBigSvga2() : boxBigSvga3();
+            $(`.page1 .road .boxImgs${res.data.step[res.data.step.length - 1]}`).attr('src', `./images/boxOpen${poolType}.png`);
+            getConfig();
+            // drawLock = true;
+        }, time * 300)
+    } else {
+        setTimeout(function () {
+            $('.zg').show();
+            // drawLock = true;
+            getConfig();
+        }, time * 300)
+    }
+    bodyScroolFun(true);
+}
 //返回页面 重新请求接口
 var hiddenProperty = 'hidden' in document ? 'hidden' :
    'webkitHidden' in document ? 'webkitHidden' :