微信抽獎(jiǎng)小程序類(lèi)似翻牌樣式怎么做

微信抽獎(jiǎng)功能是小程序推廣中非常實(shí)用有效功能，其中樣式有轉(zhuǎn)盤(pán)形式，也有翻牌打亂式等等其他不同的抽獎(jiǎng)形式，下面小編就微信抽獎(jiǎng)小程序類(lèi)似翻牌樣式的開(kāi)發(fā)流程來(lái)詳細(xì)介紹

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

這個(gè)需求本身其實(shí)不難，主要是分為三步；

 1卡牌翻轉(zhuǎn)

我們先在dom中渲染9個(gè)卡牌。

1. <view class="card-module">
2. <view class="card {{showClass ? 'change' : ''}}>
3. <view class="front card-item">{{cardItem.front}}</view>
4. <view class="back card-item">{{cardItem.back}}</view>
5. </view>
6. </repeat>
7. </view>

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

1. cardData: [
2. {
3. animationData: {},
4. front: '正面1',
5. back: '反面1'
6. },
7. ...
8. ...
9. {
10. animationData: {},
11. front: '正面9',
12. back: '反面9'
13. }
14. ],
15. showClass: false,

在樣式中把卡牌的基本樣式渲染出來(lái)

1. .card-module{
2. padding: 45rpx;
3. display: flex;
4. flex-direction: row;
5. flex-wrap: wrap;
6. transform:translate3d(0,0,0);
7. .card{
8. width: 200rpx;
9. height: 200rpx;
10. line-height: 200rpx;
11. text-align: center;
12. color: #fff;
13. margin: 10rpx;
14. position:relative;
15. overflow:hidden;
16. .card-item{
17. position:absolute;
18. left:0;
19. top:0;
20. width:100%;
21. height:100%;
22. transition:all .5s ease-in-out;
23. transform-style:preserve-3d;
24. backface-visibility:hidden;
25. box-sizing:border-box;
26. }
27. .front{
28. background-color: red;
29. transform: rotateY(0deg);
30. z-index:2;
31. }
32. .back{
33. background-color: #009fff;
34. transform: rotateY(180deg);
35. z-index:1;
36. }
37. }
38. .card.change{
39. .front{
40. z-index:1;
41. transform: rotateY(180deg);
42. }
43. .back{
44. z-index:2;
45. transform: rotateY(0deg);
46. }
47. }
48. }

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

css3 backface-visibility 屬性

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

CSS3 perspective 屬性

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

2卡牌打亂

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

1. <view class="card-module">
2. <view class="card {{showClass ? 'change' : ''}} animation="{{cardItem.animationData}}" >
3. <view class="front card-item">{{cardItem.front}}</view>
4. <view class="back card-item">{{cardItem.back}}</view>
5. </view>
6. </repeat>
7. </view>

script

1. allMove () {
2. // 110 是卡牌寬度加邊距
3. this.methods.shuffle.call(this, 110)
4. let timer = setTimeout(() => {
5. clearTimeout(timer)
6. this.methods.shuffle.call(this, 0)
7. this.$apply()
8. }, 1000)
9. },
10. // 洗牌
11. shuffle (translateUnit) {
12. let curCardData = this.cardData
13. curCardData.map((item, index) => {
14. let animation = wepy.createAnimation({
15. duration: 500,
16. timingFunction: 'ease'
17. })
18. animation.export()
19. switch (index) {
20. case 0:
21. animation.translate(translateUnit, translateUnit).step()
22. break
23. case 1:
24. animation.translate(0, translateUnit).step()
25. break
26. case 2:
27. animation.translate(-translateUnit, translateUnit).step()
28. break
29. case 3:
30. animation.translate(translateUnit, 0).step()
31. break
32. case 4:
33. animation.translate(0, 0).step()
34. break
35. case 5:
36. animation.translate(-translateUnit, 0).step()
37. break
38. case 6:
39. animation.translate(translateUnit, -translateUnit).step()
40. break
41. case 7:
42. animation.translate(0, -translateUnit).step()
43. break
44. case 8:
45. animation.translate(-translateUnit, -translateUnit).step()
46. break
47. }
48. item.animationData = animation.export()
49. })
50. this.cardData = curCardData
51. this.$apply()
52. },

3卡牌翻轉(zhuǎn)

dom代碼

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

script代碼

1. data中定義一個(gè)curIndex = -1的對(duì)象
2. data = {
3. curOpen: -1,
4. }
5. methods = {
6. // 抽獎(jiǎng)
7. itemChage (item, curIndex) {
8. this.cardData[curIndex].front = 'iphone x'
9. console.log(item, curIndex)
10. this.curOpen = curIndex
11. }
12. }

less

1. .card.getprize{
2. .front{
3. z-index:2;
4. transform: rotateY(0deg);
5. }
6. .back{
7. z-index:1;
8. transform: rotateY(180deg);
9. }
10. }

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

1. resetData () {
2. const total = 9 // 總數(shù)
3. const lineTotal = 3 // 單行數(shù)
4. curCardData.map((item, index) => {
5. let curCardData = this.cardData
6. let x = index % lineTotal
7. let y = parseInt(index / lineTotal)
8. item.twoArry = {x, y}
9. })
10. }

在位移動(dòng)畫(huà)中使用二維布局的差值進(jìn)行位移

1. // 洗牌
2. shuffle (translateUnit) {
3. let curCardData = this.cardData
4. curCardData.map((item, index) => {
5. let animation = wepy.createAnimation({
6. duration: 500,
7. timingFunction: 'ease'
8. })
9. animation.export()
10. const translateUnitX = translateUnit * (1 - item.twoArry.x)
11. const translateUnitY = translateUnit * (1 - item.twoArry.y)
12. animation.translate(translateUnitX, translateUnitY).step()
13. item.animationData = animation.export()
14. })
15. this.cardData = curCardData
16. this.$apply()
17. },

這樣整個(gè)動(dòng)畫(huà)就算完成了，當(dāng)然還想了解其他抽獎(jiǎng)樣式如何開(kāi)發(fā)制作，可以參考以下文章：