微信小程序之图片频繁变化，几秒之后输出结果(适用于抽奖)

本文主要是介绍微信小程序之图片频繁变化，几秒之后输出结果(适用于抽奖)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

测试数据自己动手组建
先上效果图(动画滚动，体现在代码定时器里)

    //抽奖
    runLottery() {
        const that = this
        const {
            getLuckyBoxHomepage,
            classData,
            numType
        } = this.data
        let openOneRewardFiveData = this.data.openOneRewardFiveData
        //关闭确认消耗积分弹框
        this.setData({
            isshowpop: false,
            //试玩数据清空
            openOneRewardFiveData: []
        })
        //启动定时器
        var inteValTime = setInterval(() => {
            var result = []
            var clickNumber = that.data.clickNumber + 1
            if (clickNumber > classData.length - 1) {
                clickNumber = 0
            }
            result.push(classData[clickNumber])
            that.setData({
                //商品滚动效果
                openOneRewardData: result,
                clickNumber
            })
            // console.log(clickNumber, "clickNumber")
            // console.log(this.data.openOneRewardFiveData, "openOneRewardFiveData")
            // console.log(this.data.animationStatus, "animationStatus")
        }, 450);
        //抽奖
        this.setData({
            openOneRewardFiveData: []
        })
        //可以先用测试数据查看效果
        common.request(api, {
            luckyBoxId: getLuckyBoxHomepage.id,
             //开启1次还是5连抽
            counts: numType == 'one' ? 1 : 5,
            periods: getLuckyBoxHomepage.periods
        }, 'POST').then(res => {
            console.log("抽奖", res)
            if (res.code == 'SUCCESS') {
                if (numType == 'one') {
                    setTimeout(() => {
                        that.setData({                            
                            openOneRewardFiveData: res.data,
                            clickNumber: 0,
                            animationStatus: true,
                            //显示好的按钮
                            showBtnStatus: true
                        })
                        console.log("openOneRewardFiveData", this.data.openOneRewardFiveData)
                        clearInterval(inteValTime)
                    }, 3200)
                } else {
                    var fiveTime = setInterval(() => {
                        var clickNumber_five = that.data.clickNumber_five
                        clickNumber_five++
                        //5连抽会隔0.4秒出现抽奖结果
                        if (clickNumber_five == 5) {
                            clearInterval(inteValTime)
                            clearInterval(fiveTime)
                            that.setData({
                                clickNumber_five: -1,
                                clickNumber: 0
                            })
                            return false
                        }
                    }, 450)
                    setTimeout(() => {
                        var fiveDataTime = setInterval(() => {
                            var clickNumber_five_data = that.data.clickNumber_five_data
                            clickNumber_five_data++
                            if (clickNumber_five_data == 5) {
                                clearInterval(fiveDataTime)
                                that.setData({
                                    clickNumber_five_data: -1,
                                    showBtnStatus: true,
                                })
                                return false
                            }
                            openOneRewardFiveData.push(res.data[clickNumber_five_data])
                            that.setData({
                                openOneRewardFiveData,
                                animationStatus: true,
                                clickNumber_five_data,
                            })
                            if (openOneRewardFiveData.length == 5) {
                                this.setData({
                                    showBtnStatus: true
                                })
                            }
                        }, 480)
                    }, 2300)
                }
                //开奖弹框
                this.setData({
                    runLotteryStatus: !this.data.runLotteryStatus
                })
            } else {
              //积分不足做处理
            }
           
        })
},              

<!-- 开奖 -->
    <view class="protocol-win {{runLotteryStatus? 'block' : 'none'}}" catchtouchmove="touchmove">
        <view class="protocol-content-runLottery">
            <view class="market_specialEffects">
                <view style="position: relative;top: 17.5%;">
                    <view class="market_rewardDialog">
                        <view wx:if="{{!animationStatus}}" class="runLotteryTitle_five">正在开盒中，请耐心等待...</view>
                        <view wx:else class="runLotteryTitle_five">恭喜您，获得以下奖品</view>
                        <!-- 开启一次弹框内容 -->
                        <view wx:if="{{numType=='one'}}">
                            <view wx:if="{{animationStatus}}" class="{{animationStatus?'animation':''}}">
                                <view wx:for="{{openOneRewardFiveData}}" wx:key="index">
                                    <view class="runLotteryFlex">
                                        <!-- 0超级盒，2幸运盒，1惊喜盒,3人气盒 -->
                                        <view wx:if="{{item.level==0 && animationStatus}}"
                                            style="background-image: url('https://cdn-hb.ben1.com.cn/weima/market/market_winningLogo.jpg');background-size: 100% 100%;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
                                            <image src="{{item.image}}" />
                                        </view>
                                        <view wx:else>
                                            <image src="{{item.image}}" />
                                        </view>
                                    </view>
                                    <view class="prizeTitle" wx:if="{{item.commodityName}}">{{item.commodityName}}
                                    </view>
                                    <!-- 试玩 -->
                                    <view class="prizeTitle" wx:if="{{item.prizeName}}">{{item.prizeName}}
                                    </view>
                                    <view class="prizeTitle" wx:if="{{item.integral>0}}">获得{{item.integral}}积分</view>
                                    <view class="prizeMoney" wx:if="{{item.price>0}}">
                                        <text style="font-size: 26rpx;">￥</text>
                                        <text style="font-size: 48rpx;">{{item.price||0}}</text>
                                    </view>
                                    <view class="prizeMoney" wx:if="{{item.integral>0}}">
                                        <text style="font-size: 26rpx;">积分：</text>
                                        <text style="font-size: 48rpx;">{{item.integral}}</text>
                                    </view>
                                </view>
                            </view>
                            <!-- 试玩 -->
                            <view wx:else>
                                <view wx:for="{{openOneRewardData}}" wx:key="index">
                                    <view class="runLotteryFlex">
                                        <view wx:if="{{item.level==0 && animationStatus}}"
                                            style="background-image: url('https://cdn-hb.ben1.com.cn/weima/market/market_winningLogo.jpg');background-size: 100% 100%;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
                                            <image src="{{item.image}}" />
                                        </view>
                                        <view wx:else>
                                            <image src="{{item.image}}" />
                                        </view>
                                    </view>
                                    <view class="prizeTitle">{{item.prizeName}}</view>
                                    <view class="prizeMoney" wx:if="{{item.price>0}}">
                                        <text style="font-size: 26rpx;">￥</text>
                                        <text style="font-size: 48rpx;">{{item.price}}</text>
                                    </view>
                                    <view class="prizeMoney" wx:if="{{item.integral>0}}">
                                        <text style="font-size: 26rpx;">积分：</text>
                                        <text style="font-size: 48rpx;">{{item.integral}}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <!-- 开启五次次弹框内容 -->
                        <view wx:else>
                            <view wx:if="{{animationStatus}}" class="{{animationStatus?'animation':''}}">
                                <view class="runLotteryFlex_five_flex_row">
                                    <view class="runLotteryFlex_five_flex" wx:for="{{openOneRewardFiveData}}"
                                        wx:key="index">
                                        <view class="runLotteryFlex_five">
                                            <view wx:if="{{item.level==0 && animationStatus}}"
                                                style="background-image: url('https://cdn-hb.ben1.com.cn/weima/market/market_winningLogo.jpg');background-size: 100% 100%;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
                                                <image src="{{item.image}}" />
                                            </view>
                                            <view wx:else>
                                                <image src="{{item.image}}" />
                                            </view>
                                        </view>
                                        <view class="prizeTitle_five" wx:if="{{item.commodityName}}">
                                            {{item.commodityName}}</view>
                                        <view class="prizeTitle_five" wx:if="{{item.integral>0}}">获得{{item.integral}}积分
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <!-- 试玩 -->
                            <view wx:else>
                                <view wx:for="{{openOneRewardData}}" wx:key="index">
                                    <view class="runLotteryFlex">
                                        <view wx:if="{{animationStatus}}"
                                            style="background-image: url('https://cdn-hb.ben1.com.cn/weima/market/market_winningLogo.jpg');background-size: 100% 100%;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
                                            <image src="{{item.image}}" />
                                        </view>
                                        <view wx:else>
                                            <image src="{{item.image}}" />
                                        </view>
                                    </view>
                                    <view class="prizeTitle">{{item.prizeName}}</view>
                                    <view class="prizeMoney" wx:if="{{item.price>0}}">
                                        <text style="font-size: 26rpx;">￥</text>
                                        <text style="font-size: 48rpx;">{{item.price}}</text>
                                    </view>
                                    <view class="prizeMoney" wx:if="{{item.integral>0}}">
                                        <text style="font-size: 26rpx;">积分：</text>
                                        <text style="font-size: 48rpx;">{{item.integral}}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view wx:if="{{!playTrueStatus}}" class="hint">可在【我的物品里查看】</view>
                    <view wx:else class="hint">试玩结果仅供参考!</view>
                    <view wx:if="{{!playTrueStatus}}">
                        <view wx:if="{{numType=='one' && showBtnStatus}}" class="market_rewardResult_flex"
                            catchtap="closeProtocol" data-type="runLottery" data-num="one">
                            好 的
                        </view>
                        <view wx:if="{{numType=='five' && showBtnStatus}}" class="market_rewardResult_flex"
                            catchtap="closeProtocol" data-type="runLottery" data-num="five">
                            好 的
                        </view>
                    </view>
                    <view wx:else>
                        <view wx:if="{{demoStatus}}" class="market_rewardResult_flex" catchtap="closeProtocol"
                            data-type="runLottery" data-num="one">
                            赶紧来一把真的!
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
<!-- 开奖 -->

.enroll {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
}

.block {
    display: block;
}

.none {
    display: none;
}

.market_rewardDialog .runLotteryFlex {
    width: 334.41rpx;
    height: 334.41rpx;
    border-radius: 34rpx;
    background: rgba(255, 255, 255, 1);
    margin: 0 auto 42.56rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.market_rewardDialog .runLotteryFlex_five {
    width: 160.47rpx;
    height: 160.47rpx;
    border-radius: 22rpx;
    background: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.market_rewardDialog .runLotteryFlex image {
    width: 226rpx;
    height: 272rpx;
    animation: anLoca 1s alternate infinite;
    border-radius: 8rpx;
}
/* 图标动画 */
.animation {
    /* animation: anLoca 1s;
    animation-iteration-count: 10000;
    animation-direction: alternate; */
    /* Safari 和 Chrome */
    /* transform: rotate(0deg) scale(0.5); */
    animation: run 0.5s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    /*动画只执行一次*/
    -moz-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-fill-mode: forwards;
    /*让动画停留在最后一帧 */
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
}
@-webkit-keyframes run {

    from {
        transform: scale(0.1);
    }

    to {
        transform: scale(1);
    }

    /* 25% {
        transform: scale(0.8);
        transform: rotate(0deg);
    } */

    /* 50% {
        transform: scale(0.8);
        transform: rotate(0deg);
    }

    75% {
        transform: scale(1);
        transform: rotate(0deg);
    } */
}

.market_rewardDialog .runLotteryFlex_five_flex_row {
    padding-left: 62.03rpx;
    display: flex;
    flex-wrap: wrap;
}

.market_rewardDialog .runLotteryFlex_five_flex {
    width: 169.47rpx;
    margin-right: 18.44rpx;
}

.market_rewardDialog .runLotteryFlex_five image {
    width: 116rpx;
    height: 139rpx;
}

.market_rewardDialog .prizeTitle {
    font-weight: Medium;
    font-size: 26rpx;
    color: #fff;
    padding-left: 84rpx;
    padding-right: 80rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
}

.market_rewardDialog .prizeTitle_five {
    padding-top: 12.88rpx;
    margin-bottom: 25.66rpx;
    font-weight: Medium;
    font-size: 22.52rpx;
    color: #fff;
    padding-left: 10.97rpx;
    /*  padding-right: 80rpx; */
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    /* 这里是超出几行省略 */
    overflow: hidden;
}

.market_rewardDialog .prizeMoney {
    color: #FFFFFF;
    text-align: center;
    padding-top: 20rpx;
    font-weight: bold;
}

.protocol-content-runLottery .hint {
    padding-top: 19rpx;
    margin-bottom: 45.03rpx;
    color: #FEBD6D;
    font-size: 20rpx;
    text-align: center;
}

这篇关于微信小程序之图片频繁变化，几秒之后输出结果(适用于抽奖)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！