微信抽獎小程序類似翻牌樣式如何做

這篇文章主要介紹了微信抽獎小程序類似翻牌樣式如何做的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇微信抽獎小程序類似翻牌樣式如何做文章都會有所收獲，下面我們一起來看看吧。

翻牌打亂活動抽獎活動，大概需求是這樣的，九宮格卡牌，先正面展示所有獎品，然后卡牌翻轉(zhuǎn)，打亂排序，點擊卡牌，然后抽獎。

 1卡牌翻轉(zhuǎn)

我們先在dom中渲染9個卡牌。

<view class="card-module"><view class="card {{showClass ? 'change' : ''}}><view class="front card-item">{{cardItem.front}}</view><view class="back card-item">{{cardItem.back}}</view></view></repeat></view>

在數(shù)據(jù)中生成模擬卡牌數(shù)據(jù)

cardData: [{animationData: {},front: '正面1',back: '反面1'},......{animationData: {},front: '正面9',back: '反面9'}],showClass: false,

在樣式中把卡牌的基本樣式渲染出來

.card-module{padding: 45rpx;display: flex;flex-direction: row;flex-wrap: wrap;transform:translate3d(0,0,0);.card{width: 200rpx;height: 200rpx;line-height: 200rpx;text-align: center;color: #fff;margin: 10rpx;position:relative;overflow:hidden;.card-item{position:absolute;left:0;top:0;width:100%;height:100%;transition:all .5s ease-in-out;transform-style:preserve-3d;backface-visibility:hidden;box-sizing:border-box;}.front{background-color: red;transform: rotateY(0deg);z-index:2;}.back{background-color: #009fff;transform: rotateY(180deg);z-index:1;}}.card.change{.front{z-index:1;transform: rotateY(180deg);}.back{z-index:2;transform: rotateY(0deg);}}}

這里有些css屬性可能需要大部補充學(xué)習(xí)一下

css3 backface-visibility 屬性

定義和用法  backface-visibility 屬性定義當(dāng)元素不面向屏幕時是否可見。  如果在旋轉(zhuǎn)元素不希望看到其背面時，該屬性很有用。

CSS3 perspective 屬性

perspective 屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。  當(dāng)為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。

2卡牌打亂

由于業(yè)務(wù)上是抽獎使用的，所以選擇的方案是：翻轉(zhuǎn)后，卡牌收回到中間的卡牌中間，然后再讓卡牌回到原來的位置。  關(guān)于小程序的原生框架有支持的動畫接口，若不了解的請前往：  developers.weixin.qq.com/miniprogram…  在對動畫有基本了解之后，我們可以開始在翻轉(zhuǎn)的基礎(chǔ)上加上打亂的動畫了  微信小程序的動畫接口使用方式是在dom對象上面加上animation對象。  dom

<view class="card-module"><view class="card {{showClass ? 'change' : ''}} animation="{{cardItem.animationData}}" ><view class="front card-item">{{cardItem.front}}</view><view class="back card-item">{{cardItem.back}}</view></view></repeat></view>

script

allMove () {// 110 是卡牌寬度加邊距this.methods.shuffle.call(this, 110)let timer = setTimeout(() => {clearTimeout(timer)this.methods.shuffle.call(this, 0)this.$apply()}, 1000)},// 洗牌shuffle (translateUnit) {let curCardData = this.cardDatacurCardData.map((item, index) => {let animation = wepy.createAnimation({duration: 500,timingFunction: 'ease'})animation.export()switch (index) {case 0:animation.translate(translateUnit, translateUnit).step()breakcase 1:animation.translate(0, translateUnit).step()breakcase 2:animation.translate(-translateUnit, translateUnit).step()breakcase 3:animation.translate(translateUnit, 0).step()breakcase 4:animation.translate(0, 0).step()breakcase 5:animation.translate(-translateUnit, 0).step()breakcase 6:animation.translate(translateUnit, -translateUnit).step()breakcase 7:animation.translate(0, -translateUnit).step()breakcase 8:animation.translate(-translateUnit, -translateUnit).step()break}item.animationData = animation.export()})this.cardData = curCardDatathis.$apply()},

3卡牌翻轉(zhuǎn)

dom代碼

<view class="card-module"><view class="card {{showClass ? 'change' : ''}} {{curIndex === index ? 'getprize' : ''}}" @tap="itemChage({{cardItem}}, {{index}})" animation="{{cardItem.animationData}}" ><view class="front card-item">{{cardItem.front}}</view><view class="back card-item">{{cardItem.back}}</view></view></repeat></view>

script代碼

data中定義一個curIndex = -1的對象data = {curOpen: -1,}methods = {// 抽獎itemChage (item, curIndex) {this.cardData[curIndex].front = 'iphone x'console.log(item, curIndex)this.curOpen = curIndex}}

less

.card.getprize{.front{z-index:2;transform: rotateY(0deg);}.back{z-index:1;transform: rotateY(180deg);}}

那我們是不是可以在卡牌中也使用二維數(shù)組布局屬性

resetData () {const total = 9 // 總數(shù)const lineTotal = 3 // 單行數(shù)curCardData.map((item, index) => {let curCardData = this.cardDatalet x = index % lineTotallet y = parseInt(index / lineTotal)item.twoArry = {x, y}})}

在位移動畫中使用二維布局的差值進行位移

// 洗牌shuffle (translateUnit) {let curCardData = this.cardDatacurCardData.map((item, index) => {let animation = wepy.createAnimation({duration: 500,timingFunction: 'ease'})animation.export()const translateUnitX = translateUnit * (1 - item.twoArry.x)const translateUnitY = translateUnit * (1 - item.twoArry.y)animation.translate(translateUnitX, translateUnitY).step()item.animationData = animation.export()})this.cardData = curCardDatathis.$apply()},

關(guān)于“微信抽獎小程序類似翻牌樣式如何做”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“微信抽獎小程序類似翻牌樣式如何做”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。