目录

前言

一、效果展示

二、主要代码

1.wxml主要代码：

2.wxss主要代码

3.js主要代码

4.app.js主要代码

三、实现思路及注意点

1.洗牌功能实现方法

2.翻牌功能实现方式

3.分享页面获取抽奖次数实现方式

4.为何将Times和MyPrices设置为全局变量

说明

前言

利用css动画完成重新洗牌以及翻牌的动画效果，能够通过分享页面获取翻牌次数，以及查看获得的奖品

一、效果展示

二、主要代码

1.wxml主要代码：

<view class="LUCKY-TEXT"><view class="LUCKY-TEXT-Nav"><text decode>翻牌赢大奖&nbsp;</text></view> <view class="LUCKY-TEXT-Box"><text class="LUCKY-TEXT-Times" decode>&nbsp;翻牌次数:&nbsp;{{times}}次&nbsp;</text><text class="LUCKY-TEXT-Times" style="color: rgb(236, 143, 21);" decode bindtap="GETMORETIMES">&nbsp;获取次数&nbsp;</text><text class="LUCKY-TEXT-PRICES" decode bindtap="ShowLuckyBox">&nbsp;我的奖品&nbsp;</text></view> </view><view class="Restart" bindtap="ReStartCard" style="background: {{RSB1}};"><text style="color: {{RST1}};">重新发牌</text></view><view class="LUCKY-BOX"><block wx:for="{{9}}"><view class="LBOX {{Position[index].PC}} {{Position[index].FZ}}" style="background-image: {{BGColor[index].color}}; top: {{Position[index].top}}; left: {{Position[index].left}}" bindtap="CLICKCARD" data-id="{{index}}"> <text class="LBOX-TEXT" wx:if="{{Position[index].TIF}}">点我翻牌</text> <image src="{{NowPresent[index].src}}" class="LBOX-IMA" wx:if="{{NowPresent[index].IF}}"></image> </view></block></view><view class="LUCKY-PRICES-BOX" wx:if="{{MyPrices_Box}}"><image src="/images/20-57-13.png" class="LPB-IMA1"></image><image src="/images/none.png" class="LPB-IMA2"></image><image src="/images/QUIT.png" class="LPB-IMA3" bindtap="CloseLuckyBox"></image><text class="LPB-Title" decode>&nbsp;获奖记录&nbsp;</text><view class="LPB-Scroll-Box"><scroll-view class="LPB-Scroll" scroll-y><block wx:if="{{MyPrices.length == 0}}"><text>暂无获奖数据</text></block><block wx:else><view wx:for="{{MyPrices}}"><text>{{item}}</text></view></block></scroll-view></view></view>

2.wxss主要代码

/* pages/FanPai/FanPai.wxss */page{background-image: linear-gradient(45deg, #45b7da, #13eb49);}.LUCKY-TEXT{width: 100%;height: 200rpx;margin-top: 50rpx;}.LUCKY-BOX{position: relative;width: 600rpx;height: 600rpx;margin: 0 auto;border-radius: 50rpx;box-shadow: 4rpx 4rpx 8rpx 6rpx rgba(85, 85, 85, 0.40);-webkit-box-shadow: 2px 2px 4px 3px rgba(85, 85, 85, 0.40); background: rgba(121,45,179,0.2); overflow: hidden;margin-top: 50rpx;}.LBOX{position: absolute;width: 180rpx;height: 180rpx;border-radius: 50rpx;box-shadow: 4rpx 4rpx 16rpx 8rpx rgba(85, 85, 85, 0.40);-webkit-box-shadow: 2px 2px 8px 4px rgba(39, 38, 38, 0.4);overflow: hidden;}.CHOUJIANG{width: 170rpx;height: 170rpx;}.LB-IMA{width: 100rpx;height: 100rpx;margin-top: 35rpx;margin-left: 35rpx;}.LUCKY-TEXT-Nav{width: 430rpx;height: 105rpx;margin: 0 auto;position: relative;top: 15rpx;border-radius: 30rpx;background-image: linear-gradient(45deg, #cde981, #1ce4a1);box-shadow: 4rpx 4rpx 16rpx 8rpx rgba(85, 85, 85, 0.40);-webkit-box-shadow: 2px 2px 8px 4px rgba(39, 38, 38, 0.4);}.LUCKY-TEXT-Nav text{color: rgb(243, 247, 13);font-size: 80rpx;font-style:oblique;font-weight: bold;text-shadow: 5px 5px 5px #e25542;position: relative;top: -10rpx;}.LUCKY-TEXT-Box{position: relative;width: 100%;height: 55rpx;top: 35rpx;}.LUCKY-TEXT-Times{font-size: 28rpx;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;font-weight: bold;color: red;margin-left: 15rpx;border-radius: 15rpx;box-shadow: 4rpx 4rpx 16rpx 8rpx rgba(85, 85, 85, 0.40);-webkit-box-shadow: 2px 2px 8px 4px rgba(39, 38, 38, 0.4);}.LUCKY-TEXT-PRICES{font-size: 28rpx;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;font-weight: bold;color: rgb(38, 155, 233);float: right;margin-right: 15rpx;border-radius: 15rpx;box-shadow: 4rpx 4rpx 16rpx 8rpx rgba(85, 85, 85, 0.40);-webkit-box-shadow: 2px 2px 8px 4px rgba(39, 38, 38, 0.4);}.LUCKY-PRICES-BOX{width: 300rpx;height: 400rpx;background: white;position: absolute;top: 250rpx;left: 225rpx;border-radius: 30rpx;box-shadow: 4rpx 4rpx 16rpx 8rpx rgba(85, 85, 85, 0.40);-webkit-box-shadow: 2px 2px 8px 4px rgba(39, 38, 38, 0.4);overflow: hidden;z-index: 10;}.LPB-IMA1{position: absolute;top: 0rpx;right: 0rpx;width: 221rpx;height: 220rpx;}.LPB-IMA2{position: absolute;bottom: 0rpx;width: 300rpx;height: 210rpx;}.LPB-IMA3{position: absolute;top: 10rpx;right: 10rpx;width: 34rpx;height: 34rpx;}.LPB-Title{position: relative;top: 23rpx;left: 70rpx;color: #20B2AA;font-size: 36rpx;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;font-weight: bold;border-radius: 30rpx;box-shadow: 4rpx 4rpx 16rpx 8rpx rgba(85, 85, 85, 0.50);-webkit-box-shadow: 2px 2px 8px 4px rgba(39, 38, 38, 0.5);}.LPB-Scroll-Box{width: 70%;height: 65%;position: relative;top: 15%;left: 15%;}.LPB-Scroll{width: 100%;height: 100%;text-align: center;color: #B0C4DE;border-radius: 20rpx;box-shadow: 4rpx 4rpx 16rpx 8rpx rgba(85, 85, 85, 0.70);-webkit-box-shadow: 2px 2px 8px 4px rgba(39, 38, 38, 0.7);}.LPB-Scroll text{color: #778899;font-size: 26rpx;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}.Restart{width: 300rpx;height: 100rpx;margin: 0 auto;border-radius: 20rpx;box-shadow: 4rpx 4rpx 16rpx 8rpx rgba(85, 85, 85, 0.10);-webkit-box-shadow: 2px 2px 8px 4px rgba(39, 38, 38, 0.1);text-align: center;}.Restart text{font-size: 40rpx;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;font-weight: bold;position: relative;top: 20rpx;}.contin0{animation: contin0 alternate linear 2 0.5s;}@keyframes contin0{from {top: 15rpx;left: 15rpx;}to {top: 210rpx;left: 210rpx;}}.contin1{animation: contin1 alternate linear 2 0.5s;}@keyframes contin1{from {top: 15rpx;left: 210rpx;}to {top: 210rpx;left: 210rpx;}}.contin2{animation: contin2 alternate linear 2 0.5s;}@keyframes contin2{from {top: 15rpx;left: 405rpx;}to {top: 210rpx;left: 210rpx;}}.contin3{animation: contin3 alternate linear 2 0.5s;}@keyframes contin3{from {top: 210rpx;left: 15rpx;}to {top: 210rpx;left: 210rpx;}}.contin5{animation: contin5 alternate linear 2 0.5s;}@keyframes contin5{from {top: 210rpx;left: 405rpx;}to {top: 210rpx;left: 210rpx;}}.contin6{animation: contin6 alternate linear 2 0.5s;}@keyframes contin6{from {top: 405rpx;left: 15rpx;}to {top: 210rpx;left: 210rpx;}}.contin7{animation: contin7 alternate linear 2 0.5s;}@keyframes contin7{from {top: 405rpx;left: 210rpx;}to {top: 210rpx;left: 210rpx;}}.contin8{animation: contin8 alternate linear 2 0.5s;}@keyframes contin8{from {top: 405rpx;left: 405rpx;}to {top: 210rpx;left: 210rpx;}}.fanzhuan{animation: fanzhuan 1.2s;}@keyframes fanzhuan{0% {transform: rotateY(0deg);} 50% {transform: rotateY(0deg);} 100% {transform: rotateY(179.9deg);}}.LBOX-TEXT{position: absolute;top: 70rpx;left: 23rpx;color: white;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;font-size: 34rpx;}.LBOX-IMA{width: 70rpx;height: 70rpx;position: absolute;top: 55rpx;left: 55rpx;}

3.js主要代码

// pages/FanPai/FanPai.jsvar app = getApp();Page({/*** 页面的初始数据*/data: {BGColor: [{color: "linear-gradient(45deg, #0081ff, #1cbbb4);"},{color: "linear-gradient(45deg, #0081ff, #1cbbb4);"},{color: "linear-gradient(45deg, #0081ff, #1cbbb4);"},{color: "linear-gradient(45deg, #0081ff, #1cbbb4);"},{color: "linear-gradient(45deg, #0081ff, #1cbbb4);"},{color: "linear-gradient(45deg, #0081ff, #1cbbb4);"},{color: "linear-gradient(45deg, #0081ff, #1cbbb4);"},{color: "linear-gradient(45deg, #0081ff, #1cbbb4);"},{color: "linear-gradient(45deg, #0081ff, #1cbbb4);"},],Position:[{top: "15rpx", left: "15rpx", PC: "", PC1: "contin0", FZ: "", TIF: true},{top: "15rpx", left: "210rpx", PC: "", PC1: "contin1", FZ: "", TIF: true},{top: "15rpx", left: "405rpx", PC: "", PC1: "contin2", FZ: "", TIF: true},{top: "210rpx", left: "15rpx", PC: "", PC1: "contin3", FZ: "", TIF: true},{top: "210rpx", left: "210rpx", PC: "", PC1: "contin4", FZ: "", TIF: true},{top: "210rpx", left: "405rpx", PC: "", PC1: "contin5", FZ: "", TIF: true},{top: "405rpx", left: "15rpx", PC: "", PC1: "contin6", FZ: "", TIF: true},{top: "405rpx", left: "210rpx", PC: "", PC1: "contin7", FZ: "", TIF: true},{top: "405rpx", left: "405rpx", PC: "", PC1: "contin8", FZ: "", TIF: true},],Present: [{src: "/images/08-55-33.png", text: "谢谢惠顾", flag: false, IF: false},{src: "/images/08-55-33.png", text: "谢谢惠顾", flag: false, IF: false},{src: "/images/08-55-33.png", text: "谢谢惠顾", flag: false, IF: false},{src: "/images/09-10-01.png", text: "一筐胡萝卜 * 1", flag: false, IF: false},{src: "/images/09-10-25.png", text: "鸿星尔克跑鞋 * 1", flag: false, IF: false},{src: "/images/09-10-34.png", text: "三元红包 * 1", flag: false, IF: false},{src: "/images/09-10-34.png", text: "五元红包 * 1", flag: false, IF: false},{src: "/images/09-01-58.png", text: "博物馆门票 * 1", flag: false, IF: false},{src: "/images/09-24-08.png", text: "随机纪念品 * 1", flag: false, IF: false},],Flag: false,//标志位，表示还未开始翻牌times: 0, //当前抽奖次数MyPrices: [],//获得的奖品NowPresent: [], //每张票背后的奖品（重新发牌后）MyPrices_Box: false,RSB1: "#8470FF",RST1: "#FFD700"},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//获取全局的翻牌次数以及获奖记录this.setData({times: app.globalData.Times,MyPrices: app.globalData.MyPrices,NowPresent: this.data.Present})//打乱奖品var a = []for(let i = 0; i < 9; i++){let flag = true;let num = -1;while(flag){num = parseInt(Math.random() * 9);if(this.data.Present[num].flag == false){var S = this.data.Present[num];a.push(S);flag = false;var temp = "Present[" + num + "].flag";this.setData({[temp]: true})}}}this.setData({NowPresent: a})for(let i = 0; i < 9; i++){var temp = "Present[" + i + "].flag";this.setData({[temp]: false})}},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {wx.hideHomeButton()//隐藏默认返回按钮},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {var T = this.data.times + 3;this.setData({times: T})app.globalData.Times = T; //更新全局变量return {title: "翻牌赢大奖", //转发的标题，默认是小程序的名称desc: "转发赢大奖",path: "/pages/FanPai/FanPai" // 默认是当前页面，必须是以‘/’开头的完整路径，分享当前页面}},GETMORETIMES() {wx.showToast({//提示中奖信息title: '分享该页面获取更多次数',icon: 'none',duration: 5000})},ShowLuckyBox() {this.setData({MyPrices_Box: true})},CloseLuckyBox() {this.setData({MyPrices_Box: false})},ReStartCard() {for(let i = 0; i < 9; i++)//初始化{var T1 = "Position[" + i + "].FZ";var T2 = "BGColor[" + i + "].color";var T3 = "Position[" + i + "].TIF";var T4 = "NowPresent[" + i + "].IF";this.setData({[T1]: "",[T2]: "linear-gradient(45deg, #0081ff, #1cbbb4)",[T3]: true,[T4]: false})}this.setData({Flag: false})var that = this;this.setData({RSB1: "#FFD700",RST1: "#8470FF"})for(let i = 0; i < 9; i++){var temp = "Position[" + i + "].PC";var S = this.data.Position[i].PC1;this.setData({[temp]: S,})}setTimeout(function () {that.setData({RSB1: "#8470FF",RST1: "#FFD700"})for(let i = 0; i < 9; i++){var temp = "Position[" + i + "].PC";that.setData({[temp]: "",})} }, 1000)//打乱奖品var a = []for(let i = 0; i < 9; i++){let flag = true;let num = -1;while(flag){num = parseInt(Math.random() * 9);if(this.data.Present[num].flag == false){var S = this.data.Present[num];a.push(S);flag = false;var temp = "Present[" + num + "].flag";this.setData({[temp]: true})}}}this.setData({NowPresent: a})for(let i = 0; i < 9; i++){var temp = "Present[" + i + "].flag";this.setData({[temp]: false})}},CLICKCARD(e) {if(this.data.Flag == true)//如果已经翻了牌return ;if(this.data.times <= 0){wx.showToast({title: '次数不足',icon: 'error',duration: 3000})return ;}var TIMES = this.data.times - 1;this.setData({times: TIMES})app.globalData.QFTimes = TIMES;var that = this;let index = e.currentTarget.dataset.id;var temp1 = "Position[" + index + "].FZ";var temp2 = "BGColor[" + index + "].color";var textIF = "Position[" + index + "].TIF";var IMAIF = "NowPresent[" + index + "].IF";this.setData({//翻转选中的牌[temp1]: "fanzhuan",Flag: true})setTimeout(function() {//延时变色that.setData({[temp2]: "linear-gradient(45deg, #e1e41b, #e9260d)",[textIF]: false})}, 800)setTimeout(function() {//延时显示图片that.setData({[IMAIF]: true})}, 1200)setTimeout(function() {for(let i = 0; i < 9; i++){if(i != index){var temp3 = "Position[" + i + "].FZ";that.setData({[temp3]: "fanzhuan"})}}}, 1300)setTimeout(function() {for(let i = 0; i < 9; i++){if(i != index){var textIF2 = "Position[" + i + "].TIF"var temp4 = "BGColor[" + i + "].color";that.setData({[temp4]: "linear-gradient(45deg, #cde981, #1ce4a1);",[textIF2]: false})}}}, 2100)setTimeout(function() {for(let i = 0; i < 9; i++){if(i != index){var IMAIF2 = "NowPresent[" + i + "].IF";that.setData({[IMAIF2]: true})}}}, 2700)setTimeout(function() {if(that.data.NowPresent[index].text == "谢谢惠顾"){wx.showToast({title: '很遗憾您未中奖',icon: 'error',duration: 3000})}else{wx.showToast({//提示中奖信息title: '恭喜您获得: '+ that.data.NowPresent[index].text,icon: 'none',duration: 5000})var S = that.data.NowPresent[index].text;var prices = that.data.MyPrices;prices.push(S);that.setData({MyPrices: prices})app.globalData.MyPrices = prices; //更新全局变量}}, 2800)}})

4.app.js主要代码

​​

// app.jsApp({onLaunch() {// 展示本地存储能力const logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId}})},globalData: {userInfo: null,Times: 0, //当前翻牌次数MyPrices: [], //翻牌获得的奖品}})

三、实现思路及注意点

1.洗牌功能实现方法

洗牌功能实现的主要思路是给9个“牌”设置css样式，通过设置点击事件，动态改变“牌”的class属性（利用数据动态绑定实现），通过改变“牌”的位置，实现洗牌时四周的牌向中间靠拢。

例如：

.contin0{animation: contin0 alternate linear 2 0.5s;}@keyframes contin0{from {top: 15rpx;left: 15rpx;}to {top: 210rpx;left: 210rpx;}}

当左上角的“牌”的class属性切换为contin0,将实现“牌”从左上角向中间移动，再回到左上角，完成洗牌后，再将class属性切换为其他样式（只有切换样式时，才会产生动画效果，如果不改变样式，下次洗牌时，contin0切换成contin0将无法实现动画效果）

2.翻牌功能实现方式

翻牌功能则是通过3D转换，将“牌”翻转。

当翻了一张“牌”后，通过设置setTimeout定时器延时显示奖品（当然也可以在.fanzhuan属性中设置perspective属性，使其子元素获得透视效果，这样在翻转“牌”的过程中，奖品不会显示出来，不过当牌翻转完成后，奖品会有个镜像翻转的过程，使用定时器延时显示奖品则可以避免）。

最后，再设置setTimeout延时翻转其他“牌”，并延时显示奖品。

3.分享页面获取抽奖次数实现方式

通过在js界面定义onShareAppMessage函数，实现分享页面获取抽奖次数

/*** 用户点击右上角分享*/onShareAppMessage: function () {var T = this.data.times + 3;this.setData({times: T})app.globalData.Times = T; //更新全局变量return {title: "翻牌赢大奖", //转发的标题，默认是小程序的名称desc: "转发赢大奖",path: "/pages/FanPai/FanPai" // 默认是当前页面，必须是以‘/’开头的完整路径，分享当前页面}}

4.为何将Times和MyPrices设置为全局变量

由于一个完整的微信小程序有许多页面，如果设置为局部变量，当从翻牌赢大奖页面切换到其他页面，再切换回该页面时，翻牌次数和奖品记录将被重新初始化。如果设置为全局变量，每次载入翻牌赢大奖页面时，通过onLoad函数获取app.js中的Times和Myprices，获取之前的翻牌次数和奖品记录，防止记录丢失（当然直接写入数据库比较方便，此处不讨论数据库的存取）。

onLoad: function (options) {//获取全局的翻牌次数以及获奖记录this.setData({times: app.globalData.Times,MyPrices: app.globalData.MyPrices,NowPresent: this.data.Present})//打乱奖品var a = []for(let i = 0; i < 9; i++){let flag = true;let num = -1;while(flag){num = parseInt(Math.random() * 9);if(this.data.Present[num].flag == false){var S = this.data.Present[num];a.push(S);flag = false;var temp = "Present[" + num + "].flag";this.setData({[temp]: true})}}}this.setData({NowPresent: a})for(let i = 0; i < 9; i++){var temp = "Present[" + i + "].flag";this.setData({[temp]: false})}}

说明

本人学习微信小程序时间尚短（只有暑假十多天的课外实训学习），该功能是我的微信小程序结课项目中的一个部分，对于微信小程序还没有足够的学习，部分地方可能写的不对，欢迎大佬们纠错指正。