ps:本次開發基於wepy框架css
因爲最近接到一個需求--抽獎活動;html
翻牌打亂活動抽獎活動,大概需求是這樣的,九宮格卡牌,先正面展現全部獎品,而後卡牌翻轉,打亂排序,點擊卡牌,而後抽獎。css3
這個需求自己其實不難,主要是分爲三步;git
咱們先在dom中渲染9個卡牌。github
<view class="card-module">
<view class="card {{showClass ? 'change' : ''}}> <view class="front card-item">{{cardItem.front}}</view> <view class="back card-item">{{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 .5s ease-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屬性可能須要大部補充學習一下api
定義和用法數組
backface-visibility 屬性定義當元素不面向屏幕時是否可見。
若是在旋轉元素不但願看到其背面時,該屬性頗有用。
perspective 屬性定義 3D 元素距視圖的距離,以像素計。該屬性容許您改變 3D 元素查看 3D 元素的視圖。
當爲元素定義 perspective 屬性時,其子元素會得到透視效果,而不是元素自己。
因爲業務上是抽獎使用的,因此選擇的方案是:翻轉後,卡牌收回到中間的卡牌中間,而後再讓卡牌回到原來的位置。
關於小程序的原生框架有支持的動畫接口,若不瞭解的請前往: developers.weixin.qq.com/miniprogram…
在對動畫有基本瞭解以後,咱們能夠開始在翻轉的基礎上加上打亂的動畫了 微信小程序的動畫接口使用方式是在dom對象上面加上animation對象。
dom
<view class="card-module">
<view class="card {{showClass ? 'change' : ''}} animation="{{cardItem.animationData}}" > <view class="front card-item">{{cardItem.front}}</view> <view class="back card-item">{{cardItem.back}}</view> </view> </repeat> </view> 複製代碼
script
allMove () {
// 110 是卡牌寬度加邊距
this.methods.shuffle.call(this, 110)
let timer = setTimeout(() => {
clearTimeout(timer)
this.methods.shuffle.call(this, 0)
this.$apply()
}, 1000)
},
// 洗牌
shuffle (translateUnit) {
let curCardData = this.cardData
curCardData.map((item, index) => {
let animation = wepy.createAnimation({
duration: 500,
timingFunction: 'ease'
})
animation.export()
switch (index) {
case 0:
animation.translate(translateUnit, translateUnit).step()
break
case 1:
animation.translate(0, translateUnit).step()
break
case 2:
animation.translate(-translateUnit, translateUnit).step()
break
case 3:
animation.translate(translateUnit, 0).step()
break
case 4:
animation.translate(0, 0).step()
break
case 5:
animation.translate(-translateUnit, 0).step()
break
case 6:
animation.translate(translateUnit, -translateUnit).step()
break
case 7:
animation.translate(0, -translateUnit).step()
break
case 8:
animation.translate(-translateUnit, -translateUnit).step()
break
}
item.animationData = animation.export()
})
this.cardData = curCardData
this.$apply()
},
複製代碼
算法後面須要優化,咱們先完成功能效果,
效果以下
dom代碼
<view class="card-module">
<view class="card {{showClass ? 'change' : ''}} {{curIndex === index ? 'getprize' : ''}}" @tap="itemChage({{cardItem}}, {{index}})" animation="{{cardItem.animationData}}" >
<view class="front card-item">{{cardItem.front}}</view>
<view class="back card-item">{{cardItem.back}}</view>
</view>
</repeat>
</view>
複製代碼
script代碼
data中定義一個curIndex = -1的對象
data = {
curOpen: -1,
}
methods = {
// 抽獎
itemChage (item, curIndex) {
this.cardData[curIndex].front = 'iphone x'
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 () {
const total = 9 // 總數
const lineTotal = 3 // 單行數
curCardData.map((item, index) => {
let curCardData = this.cardData
let x = index % lineTotal
let y = parseInt(index / lineTotal)
item.twoArry = {x, y}
})
}
複製代碼
在位移動畫中使用二維佈局的差值進行位移
// 洗牌
shuffle (translateUnit) {
let curCardData = this.cardData
curCardData.map((item, index) => {
let animation = wepy.createAnimation({
duration: 500,
timingFunction: 'ease'
})
animation.export()
const translateUnitX = translateUnit * (1 - item.twoArry.x)
const translateUnitY = translateUnit * (1 - item.twoArry.y)
animation.translate(translateUnitX, translateUnitY).step()
item.animationData = animation.export()
})
this.cardData = curCardData
this.$apply()
},
複製代碼
這樣整個動畫就算完成了, demo請前往github github.com/fishmankkk/…