背景ps：本次开发基于wepy框架
由于最近接到一个需求--抽奖活动；
翻牌打乱活动抽奖活动，大概需求是这样的，九宫格卡牌，先正面展示所有奖品，然后卡牌翻转，打乱排序，点击卡牌，然后抽奖。
这个需求本身其实不难，主要是分为三步；
展示所有卡牌，然后翻转。打乱所有卡牌点击其中一张卡牌，抽奖第一步：卡牌翻转我们先在dom中渲染9个卡牌。
viewclass="card-module"viewclass="card{{showClass?'change':''}}viewhljs-string">"{{cardItem.front}}/viewviewhljs-string">"{{cardItem.back}}/view/view/repeat/view复制代码在数据中生成模拟卡牌数据
cardData:[{animationData:{},front:'正面1',back:'反面1'},......{animationData:{},front:'正面9',back:'反面9'}],showClass:false,复制代码在样式中把卡牌的基本样式渲染出来
.card-module{padding:45rpx;display:flex;flex-direction:row;flex-wrap:wrap;transform:translate3d(0,0,0);.card{width:200rpx;height:200rpx;line-height:200rpx;text-align:center;color:#fff;margin:10rpx;position:relative;overflow:hidden;.card-item{position:absolute;left:0;top:0;width:100%;height:100%;transition:all.5sease-in-out;transform-style:preserve-3d;backface-visibility:hidden;box-sizing:border-box;}.front{background-color:red;transform:rotateY(0deg);z-index:2;}.back{background-color:#009fff;transform:rotateY(180deg);z-index:1;}}.card.change{.front{z-index:1;transform:rotateY(180deg);}.back{z-index:2;transform:rotateY(0deg);}}}复制代码效果如下
这里有些css属性可能需要大部补充学习一下
css3backface-visibility属性定义和用法
backface-visibility属性定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用。
CSS3perspective属性perspective属性定义3D元素距视图的距离，以像素计。该属性允许您改变3D元素查看3D元素的视图。
当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。
第二步：卡牌打乱由于业务上是抽奖使用的，所以选择的方案是：翻转后，卡牌收回到中间的卡牌中间，然后再让卡牌回到原来的位置。
关于小程序的原生框架有支持的动画接口，若不了解的请前往：
在对动画有基本了解之后，我们可以开始在翻转的基础上加上打乱的动画了微信小程序的动画接口使用方式是在dom对象上面加上animation对象。
dom
viewclass="card-module"viewclass="card{{showClass?'change':''}}animation="{{cardItem.animationData}}"viewhljs-string">"{{cardItem.front}}/viewviewhljs-string">"{{cardItem.back}}/view/view/repeat/view复制代码script
allMove(){//110是卡牌宽度加边距this.methods.shuffle.call(this,110)lettimer=setTimeout(()={clearTimeout(timer)this.methods.shuffle.call(this,0)this.$apply()},1000)},//洗牌shuffle(translateUnit){letcurCardData=this.cardDatacurCardData.map((item,index)={letanimation=wepy.createAnimation({duration:500,timingFunction:'ease'})animation.export()switch(index){case0:animation.translate(translateUnit,translateUnit).step()breakcase1:animation.translate(0,translateUnit).step()breakcase2:animation.translate(-translateUnit,translateUnit).step()breakcase3:animation.translate(translateUnit,0).step()breakcase4:animation.translate(0,0).step()breakcase5:animation.translate(-translateUnit,0).step()breakcase6:animation.translate(translateUnit,-translateUnit).step()breakcase7:animation.translate(0,-translateUnit).step()breakcase8:animation.translate(-translateUnit,-translateUnit).step()break}item.animationData=animation.export()})this.cardData=curCardDatathis.$apply()},复制代码算法后面需要优化，我们先完成功能效果，
效果如下
第三步：卡牌翻转dom代码
viewclass="card-module"viewclass="card{{showClass?'change':''}}{{curIndex===index?'getprize':''}}"@tap="itemChage({{cardItem}},{{index}})"animation="{{cardItem.animationData}}"viewclass="frontcard-item"{{cardItem.front}}/viewviewclass="backcard-item"{{cardItem.back}}/view/view/repeat/view复制代码script代码data中定义一个curIndex=-1的对象
data={curOpen:-1,}methods={//抽奖itemChage(item,curIndex){this.cardData[curIndex].front='iphonex'console.log(item,curIndex)this.curOpen=curIndex}}复制代码less
.card.getprize{.front{z-index:2;transform:rotateY(0deg);}.back{z-index:1;transform:rotateY(180deg);}}复制代码效果如下
现在我们就已经完成了基本的需求；但是在位移动画时候代码写的太丑陋了。我们来想想怎么优化算法；
我们现在就九宫格布局，我们可以看成是二维布局
那我们是不是可以在卡牌中也使用二维数组布局属性
resetData(){consttotal=9//总数constlineTotal=3//单行数curCardData.map((item,index)={letcurCardData=this.cardDataletx=index%lineTotallety=parseInt(index/lineTotal)item.twoArry={x,y}})}复制代码在位移动画中使用二维布局的差值进行位移
//洗牌shuffle(translateUnit){letcurCardData=this.cardDatacurCardData.map((item,index)={letanimation=wepy.createAnimation({duration:500,timingFunction:'ease'})animation.export()consttranslateUnitX=translateUnit(1-item.twoArry.x)consttranslateUnitY=translateUnit(1-item.twoArry.y)animation.translate(translateUnitX,translateUnitY).step()item.animationData=animation.export()})this.cardData=curCardDatathis.$apply()},复制代码这样整个动画就算完成了，demo请前往github