微信小程序抽奖-翻牌

发布时间：2020-12-14 19:36:35 所属栏目：资源来源：网络整理

导读：背景 ps：本次开发基于wepy框架? 由于最近接到一个需求--抽奖活动；? 翻牌打乱活动抽奖活动，大概需求是这样的，九宫格卡牌，先正面展示所有奖品，然后卡牌翻转，打乱排序，点击卡牌，然后抽奖。这个需求本身其实不难，主要是分为三步；展示所有卡牌，然后

背景

ps：本次开发基于wepy框架?
由于最近接到一个需求--抽奖活动；?
翻牌打乱活动抽奖活动，大概需求是这样的，九宫格卡牌，先正面展示所有奖品，然后卡牌翻转，打乱排序，点击卡牌，然后抽奖。

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


展示所有卡牌，然后翻转。
点击其中一张卡牌，抽奖

第一步：卡牌翻转

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

<view class="card-module">
  "card {{showClass ? 'change' : ''}}>
"back card-item"{{cardItem.back}}</view>
</repeat>
在数据中生成模拟卡牌数据

    {
      front '正面1',

...
{
'正面9'

  ],0);">  showClass false在样式中把卡牌的基本样式渲染出来

  padding 45rpx;
  flex-direction row;
  transformtranslate3d(0);
    width200rpx;
    lineheight;
    color #fff;
      positionabsolute;
      height%;
front      backgroundcolor red rotateY0deg);
back#009fff;
1}
);
{
}


效果如下

这里有些css属性可能需要大部补充学习一下
css3 backface-visibility 属性
定义和用法?
backface-visibility 属性定义当元素不面向屏幕时是否可见。?
如果在旋转元素不希望看到其背面时，该属性很有用。
CSS3 perspective 属性
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。?
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

第二步：卡牌打乱
由于业务上是抽奖使用的，所以选择的方案是：翻转后，卡牌收回到中间的卡牌中间，然后再让卡牌回到原来的位置。?
关于小程序的原生框架有支持的动画接口，若不了解的请前往：?
developers.weixin.qq.com/miniprogram…?
在对动画有基本了解之后，我们可以开始在翻转的基础上加上打乱的动画了?
微信小程序的动画接口使用方式是在dom对象上面加上animation对象。?
dom

{{cardItem.animationData}}" >
script

    thismethodsshufflecall(110)
      clearTimeout(timer)
$apply()

// 洗牌
    curCardDatamap(( index animation  wepycreateAnimation({
        timingFunction'ease'
      animation.export()
          animationtranslate translateUnit).step()
:
break
(-break
()
4:
break
()
6:
break
()
8:
break
cardData  curCardData
算法后面需要优化，我们先完成功能效果，?
效果如下


第三步：卡牌翻转
dom代码

 @tap"itemChage({{cardItem}},{{index}})"animation"{{cardItem.animationData}}" >
script代码

data       curOpen}
// 抽奖

curOpen  curIndex
less

);
}

效果如下

现在我们就已经完成了基本的需求；但是在位移动画时候代码写的太丑陋了。?
我们来想想怎么优化算法；?
我们现在就九宫格布局，我们可以看成是二维布局

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

 lineTotal 3// 单行数
 x  index % lineTotal
twoArry {x y}
在位移动画中使用二维布局的差值进行位移

cardData
'ease'
 translateUnitX  translateUnit *1 itemtwoArry)
translateUnitX translateUnitY})

这样整个动画就算完成了，

demo请前往githubgithub.com/fishmankkk/…

作者：fishman?
链接：https://juejin.im/post/5b867460f265da435743a8de?
来源：掘金?
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!