会员中心

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

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

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

这个需求本身其实不难，主要是分为三步；

目录
  • 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. 




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







   
   

        上一篇 
            
                怎么添加小程序客服,小程序怎么接入客服功能            
        
        下一篇 
            
                微信支付和小程序主体需要一致吗,微信支付可以与主体不一致吗 ... ...            
        
    
 
    论坛资讯同步说明，本文同步自论坛：bbs.miaozhizuo.com，如您在论坛注册成为会员用户并且发帖，则默认论坛文章同步协议，协议内容请移步论坛查看！



    
    
             
    • 
        
    • 
        
    • 
    

    
                
            
                
          在线客服

                                点击这里给我发消息					                
          VIP咨询

                              点击这里给我发消息                                    

                
          咨询热线

                
   17080039991

                
      (免费拨打)

            

            

            
                
          代理招商

                				                                 
   178-9531-8531

            

            [关闭]        

        
            随手APP微信            
官方微信自助客服

            [关闭]