pp电子

登录
免费开通
产品中心
更多服务

微信抽奖小程序类似翻牌样式怎么做

—— 2020 ——
09/27
00:00

泉源：

作者：未知

阅读：0

栏目：小程序开发

2020/9/27 0:00:00 泉源：不详 作者：未知

微信抽奖功效是小程序推广中很是适用有用功效，，，，其中样式有转盘形式，，，，也有翻牌打乱式等等其他差别的抽奖形式，，，，下面小编就微信抽奖小程序类似翻牌样式的开发流程来详细介绍

翻牌打乱活动抽奖活动，，，，或许需求是这样的，，，，九宫格卡牌，，，，先正面展示所有奖品，，，，然后卡牌翻转，，，，打乱排序，，，，点击卡牌，，，，然后抽奖。。。。。

微信抽奖小程序类似翻牌样式怎么做

这个需求自己着实不难，，，，主要是分为三步；；；

目录
  • 1、展示所有卡牌，，，，然后翻转
  • 2、打乱所有卡牌
  • 3、点击其中一张卡牌，，，，抽奖



 1卡牌翻转



我们先在dom中渲染9个卡牌。。。。。





微信抽奖小程序类似翻牌样式怎么做


    

  1. 
<view class="card-module">
    2. 

  2. 
<view class="card {{showClass ? 'change' : ''}}>
    3. 

  3. 
<view class="front card-item">{{cardItem.front}}</view>
    4. 

  4. 
<view class="back card-item">{{cardItem.back}}</view>
    5. 

  5. 
</view>
    6. 

  6. 
</repeat>
    7. 

  7. 
</view>
    8. 




在数据中天生模拟卡牌数据



 




    

  1. 
cardData: [
    2. 

  2. 
{
    3. 

  3. 
animationData: {},
    4. 

  4. 
front: '正面1',
    5. 

  5. 
back: '反面1'
    6. 

  6. 
},
    7. 

  7. 
...
    8. 

  8. 
...
    9. 

  9. 
{
    10. 

  10. 
animationData: {},
    11. 

  11. 
front: '正面9',
    12. 

  12. 
back: '反面9'
    13. 

  13. 
}
    14. 

  14. 
],
    15. 

  15. 
showClass: false,
    16. 




在样式中把卡牌的基本样式渲染出来



 




    

  1. 
.card-module{
    2. 

  2. 
padding: 45rpx;
    3. 

  3. 
display: flex;
    4. 

  4. 
flex-direction: row;
    5. 

  5. 
flex-wrap: wrap;
    6. 

  6. 
transform:translate3d(0,0,0);
    7. 

  7. 
.card{
    8. 

  8. 
width: 200rpx;
    9. 

  9. 
height: 200rpx;
    10. 

  10. 
line-height: 200rpx;
    11. 

  11. 
text-align: center;
    12. 

  12. 
color: #fff;
    13. 

  13. 
margin: 10rpx;
    14. 

  14. 
position:relative;
    15. 

  15. 
overflow:hidden;
    16. 

  16. 
.card-item{
    17. 

  17. 
position:absolute;
    18. 

  18. 
left:0;
    19. 

  19. 
top:0;
    20. 

  20. 
width:100%;
    21. 

  21. 
height:100%;
    22. 

  22. 
transition:all .5s ease-in-out;
    23. 

  23. 
transform-style:preserve-3d;
    24. 

  24. 
backface-visibility:hidden;
    25. 

  25. 
box-sizing:border-box;
    26. 

  26. 
}
    27. 

  27. 
.front{
    28. 

  28. 
background-color: red;
    29. 

  29. 
transform: rotateY(0deg);
    30. 

  30. 
z-index:2;
    31. 

  31. 
}
    32. 

  32. 
.back{
    33. 

  33. 
background-color: #009fff;
    34. 

  34. 
transform: rotateY(180deg);
    35. 

  35. 
z-index:1;
    36. 

  36. 
}
    37. 

  37. 
}
    38. 

  38. 
.card.change{
    39. 

  39. 
.front{
    40. 

  40. 
z-index:1;
    41. 

  41. 
transform: rotateY(180deg);
    42. 

  42. 
}
    43. 

  43. 
.back{
    44. 

  44. 
z-index:2;
    45. 

  45. 
transform: rotateY(0deg);
    46. 

  46. 
}
    47. 

  47. 
}
    48. 

  48. 
}
    49. 




这里有些css属性可能需要大部增补学习一下



css3 backface-visibility 属性



界说和用法  backface-visibility 属性界说当元素不面向屏幕时是否可见。。。。。  若是在旋转元素不希望看到其反面时，，，，该属性很有用。。。。。



CSS3 perspective 属性



perspective 属性界说 3D 元素距视图的距离，，，，以像素计。。。。。该属性允许您改变 3D 元素审查 3D 元素的视图。。。。。  当为元素界说 perspective 属性时，，，，其子元素会获得透视效果，，，，而不是元素自己。。。。。



2卡牌打乱



由于营业上是抽奖使用的，，，，以是选择的方案是：翻转后，，，，卡牌收回到中心的卡牌中心，，，，然后再让卡牌回到原来的位置。。。。。  关于小程序的原生框架有支持的动画接口，，，，若不相识的请前往：  developers.weixin.qq.com/miniprogram…  在对动画有基真相识之后，，，，我们可以最先在翻转的基础上加上打乱的动画了  微信小程序的动画接口使用方式是在dom工具上面加上animation工具。。。。。  dom



 




    

  1. 
<view class="card-module">
    2. 

  2. 
<view class="card {{showClass ? 'change' : ''}} animation="{{cardItem.animationData}}" >
    3. 

  3. 
<view class="front card-item">{{cardItem.front}}</view>
    4. 

  4. 
<view class="back card-item">{{cardItem.back}}</view>
    5. 

  5. 
</view>
    6. 

  6. 
</repeat>
    7. 

  7. 
</view>
    8. 




script



 




    

  1. 
allMove () {
    2. 

  2. 
// 110 是卡牌宽度加边距
    3. 

  3. 
this.methods.shuffle.call(this, 110)
    4. 

  4. 
let timer = setTimeout(() => {
    5. 

  5. 
clearTimeout(timer)
    6. 

  6. 
this.methods.shuffle.call(this, 0)
    7. 

  7. 
this.$apply()
    8. 

  8. 
}, 1000)
    9. 

  9. 
},
    10. 

  10. 
// 洗牌
    11. 

  11. 
shuffle (translateUnit) {
    12. 

  12. 
let curCardData = this.cardData
    13. 

  13. 
curCardData.map((item, index) => {
    14. 

  14. 
let animation = wepy.createAnimation({
    15. 

  15. 
duration: 500,
    16. 

  16. 
timingFunction: 'ease'
    17. 

  17. 
})
    18. 

  18. 
animation.export()
    19. 

  19. 
switch (index) {
    20. 

  20. 
case 0:
    21. 

  21. 
animation.translate(translateUnit, translateUnit).step()
    22. 

  22. 
break
    23. 

  23. 
case 1:
    24. 

  24. 
animation.translate(0, translateUnit).step()
    25. 

  25. 
break
    26. 

  26. 
case 2:
    27. 

  27. 
animation.translate(-translateUnit, translateUnit).step()
    28. 

  28. 
break
    29. 

  29. 
case 3:
    30. 

  30. 
animation.translate(translateUnit, 0).step()
    31. 

  31. 
break
    32. 

  32. 
case 4:
    33. 

  33. 
animation.translate(0, 0).step()
    34. 

  34. 
break
    35. 

  35. 
case 5:
    36. 

  36. 
animation.translate(-translateUnit, 0).step()
    37. 

  37. 
break
    38. 

  38. 
case 6:
    39. 

  39. 
animation.translate(translateUnit, -translateUnit).step()
    40. 

  40. 
break
    41. 

  41. 
case 7:
    42. 

  42. 
animation.translate(0, -translateUnit).step()
    43. 

  43. 
break
    44. 

  44. 
case 8:
    45. 

  45. 
animation.translate(-translateUnit, -translateUnit).step()
    46. 

  46. 
break
    47. 

  47. 
}
    48. 

  48. 
item.animationData = animation.export()
    49. 

  49. 
})
    50. 

  50. 
this.cardData = curCardData
    51. 

  51. 
this.$apply()
    52. 

  52. 
},
    53. 




3卡牌翻转



dom代码



 




    

  1. 
<view class="card-module">
    2. 

  2. 
<view class="card {{showClass ? 'change' : ''}} {{curIndex === index ? 'getprize' : ''}}" @tap="itemChage({{cardItem}}, {{index}})" animation="{{cardItem.animationData}}" >
    3. 

  3. 
<view class="front card-item">{{cardItem.front}}</view>
    4. 

  4. 
<view class="back card-item">{{cardItem.back}}</view>
    5. 

  5. 
</view>
    6. 

  6. 
</repeat>
    7. 

  7. 
</view>
    8. 




script代码



 




    

  1. 
data中界说一个curIndex = -1的工具
    2. 

  2. 
data = {
    3. 

  3. 
curOpen: -1,
    4. 

  4. 
}
    5. 

  5. 
methods = {
    6. 

  6. 
// 抽奖
    7. 

  7. 
itemChage (item, curIndex) {
    8. 

  8. 
this.cardData[curIndex].front = 'iphone x'
    9. 

  9. 
console.log(item, curIndex)
    10. 

  10. 
this.curOpen = curIndex
    11. 

  11. 
}
    12. 

  12. 
}
    13. 




less



 




    

  1. 
.card.getprize{
    2. 

  2. 
.front{
    3. 

  3. 
z-index:2;
    4. 

  4. 
transform: rotateY(0deg);
    5. 

  5. 
}
    6. 

  6. 
.back{
    7. 

  7. 
z-index:1;
    8. 

  8. 
transform: rotateY(180deg);
    9. 

  9. 
}
    10. 

  10. 
}
    11. 




那我们是不是可以在卡牌中也使用二维数组结构属性



 




    

  1. 
resetData () {
    2. 

  2. 
const total = 9 // 总数
    3. 

  3. 
const lineTotal = 3 // 单行数
    4. 

  4. 
curCardData.map((item, index) => {
    5. 

  5. 
let curCardData = this.cardData
    6. 

  6. 
let x = index % lineTotal
    7. 

  7. 
let y = parseInt(index / lineTotal)
    8. 

  8. 
item.twoArry = {x, y}
    9. 

  9. 
})
    10. 

  10. 
}
    11. 




在位移动画中使用二维结构的差值举行位移



 




    

  1. 
// 洗牌
    2. 

  2. 
shuffle (translateUnit) {
    3. 

  3. 
let curCardData = this.cardData
    4. 

  4. 
curCardData.map((item, index) => {
    5. 

  5. 
let animation = wepy.createAnimation({
    6. 

  6. 
duration: 500,
    7. 

  7. 
timingFunction: 'ease'
    8. 

  8. 
})
    9. 

  9. 
animation.export()
    10. 

  10. 
const translateUnitX = translateUnit * (1 - item.twoArry.x)
    11. 

  11. 
const translateUnitY = translateUnit * (1 - item.twoArry.y)
    12. 

  12. 
animation.translate(translateUnitX, translateUnitY).step()
    13. 

  13. 
item.animationData = animation.export()
    14. 

  14. 
})
    15. 

  15. 
this.cardData = curCardData
    16. 

  16. 
this.$apply()
    17. 

  17. 
},
    18. 




这样整个动画就算完成了，，，，虽然还想相识其他抽奖样式怎样开发制作，，，，可以参考以下文章：


【本站声明】 
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，，，由于未联系到知识产权人或未发明有关知识产权的挂号，，，，若有知识产权人并不肯意我们使用，，，，若是有侵权请连忙联系。。。。。 
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，，，仅系客观性形貌，，，，如您需要相识该类商品/服务详细的资讯，，，，请您直接与该类商品/服务的提供者联系。。。。。


KESION pp电子软件
KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。。
KESION 一直通过手艺立异，，，，提供产品和服务，，，，助力企业向数字化转型，，，，通过科技驱动商业刷新，，，，让商业变得更智慧！


▼点击进入pp电子官网相识更多



                        

                        

                            
热门标签

                            

                                微信小程序 
SaaS 

                            

                        

                        

                            
上/下篇

                            
    
                                
  • 
                                    
    微信小程序判断页面滑动偏向
    
                                    
    
                                        
    微信小程序在开发历程中，，，，我们可能会需要判断小程序页面转动偏向是向上，，，，照旧向下，，，，那么该怎样判断呢，，，，下面小编为各人解答。。。。。...
    
                                        
    
											微信小程序SaaS
                                            2020/9/27 0:00:00
                                        
    
                                    
    
                                
    • 
                                
  • 
                                    
    怎么添加小程序客服,小程序怎么接入客服功效
    
                                    
    
                                        
    小程序客服功效的实现可以增进客户与营业员之间的相同，，，，更好的提高促单率，，，，那么小程序客服功效要怎样接入。。。。。 客服新闻会话入口有两个： 1、小程序内：开发者在小程序内添加客服...
    
                                        
    
											 微信小程序SaaS
                                             2020/9/27 0:00:00
                                        
    
                                    
    
                                
    • 
                            

                        

                    

                

                

                    

                        
换一换相关推荐

                        
                    

                    

                        
精选内容

                        
                    

                    

                        
热门精选

                        
                    

                

            

        

        
        
    
    
    
    
    


    
    

    
    
   



    
    








 
    



         pp电子·模拟器(试玩游戏)官方网站
	 pp电子·模拟器(试玩游戏)官方网站
	 pp电子·模拟器(试玩游戏)官方网站
	 
	 






        
        
        
        
        
    






【网站地图】

  微信抽奖小程序类似翻牌样式怎么做 - KESION pp电子