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

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

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

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

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

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

 1卡牌翻转

我们先在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>

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

 

  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属性可能需要大部补充学习一下

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. <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卡牌翻转

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

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

 

  1. resetData () {
  2. const total = 9 // 总数
  3. const lineTotal = 3 // 单行数
  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. },

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


【本站声明】
  1、本站文章中所选用的图片及文字来源于网络以及用户投稿,由于未联系到知识产权人或未发现有关知识产权的登记,如有知识产权人并不愿意我们使用,如果有侵权请立即联系。
  2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。


KESION 科汛软件

KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商,长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。

KESION 不断通过技术创新,提供产品和服务,助力企业向数字化转型,通过科技驱动商业革新,让商业变得更智慧!



▼点击进入科汛官网了解更多



热门标签
微信小程序 SaaS
上/下篇
  • 微信小程序判断页面滑动方向

  • 怎么添加小程序客服,小程序怎么接入客服功能

换一换相关推荐
精选内容
热点精选