商城系統(tǒng) 注冊

微信抽獎小程序類似翻牌樣式怎么做

2020-09-27|HiShop
導(dǎo)讀:微信抽獎功能是小程序推廣中非常實用有效功能,其中樣式有轉(zhuǎn)盤形式,也有翻牌打亂式等等其他不同的抽獎形式,下面小編就微信抽獎小程序類似翻牌樣式的開發(fā)流程來詳細(xì)介紹...

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

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

微信抽獎小程序類似翻牌樣式怎么做

這個需求本身其實不難,主要是分為三步;


 1卡牌翻轉(zhuǎn)

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


微信抽獎小程序類似翻牌樣式怎么做

  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,

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

 

  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屬性可能需要大部補充學(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

 

  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中定義一個curIndex = -1的對象
  2. data = {
  3. curOpen: -1,
  4. }
  5. methods = {
  6. // 抽獎
  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. }

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

 

  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. },

這樣整個動畫就算完成了,當(dāng)然還想了解其他抽獎樣式如何開發(fā)制作,可以參考以下文章:

電話咨詢 預(yù)約演示 0元開店