微信小程序实现九宫格翻牌动画
时间：2023-02-26 08:36:06 | 栏目：JavaScript代码 | 点击：次
本文实例为大家分享了微信小程序实现九宫格翻牌的具体代码，供大家参考，具体内容如下
9宫格翻牌需求：
1.进来时平铺9个格子显示
2.点击开始抽奖时洗牌动作
3.洗完牌后呈现9个都是未翻牌的状态
4.点击任意一个牌子，有翻转的动作
5.翻转结束后出现中奖的弹窗
555，当时真的一点一点调动画
敲黑板~
wxml：
<view class="main_border">
<view class="inside_border viewport-flip">
<block wx:for="{{position}}">
<view class="parent_border flip {{flipArr[index]?'out':'in'}}" style="left:{{item.x}};top:{{item.y}};" animation="{{objArr[index].animationData}}"
data-idx="{{index}}" hover-class="opacity">
<form report-submit class="sec_border border_{{index}} gifts_back centerBtn" bindsubmit="{{isMember?'click':'openCard'}}" style="display:block" wx:if="{{isClick && index ==4}}">
<button class="" form-type="submit" style="width:100%;height:100%;opacity:0"></button>
</form>
<view class="sec_border border_{{index}} gifts_back {{isClick?'centerBtn':''}}" bindtap="{{isClick?'':'btnFlip'}}"
data-index="{{index}}" wx:else>
</view>
</view>
</block>
</view>
</view>
less: 动画基本上我是用添加class类样式控制的
.main_border{
.inside_border{
margin: 0 auto;
width: 639rpx;
height: 639rpx;
position: relative;
.parent_border{
position:absolute;
height:203rpx;
width: 203rpx;
}
}
}
.sec_border{
width: 100%;
height: 100%;
.gifts_img{
display:none;
width: 100%;
height: 100%;
}
}
.gift-animat{
display: block;
}
// 翻牌动画
.viewport-flip {
-webkit-perspective: 1000;
perspective: 1000;
position: absolute;
}
.flip {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
backface-visibility: hidden;/*backface-visibility 属性定义当元素不面向屏幕时是否可见*/
transform: translateX(0);
position: fixed;
}
.flip.out {
-webkit-transform: rotateY(-90deg) scale(.9);
-webkit-animation-name: flipouttoleft;
-webkit-animation-duration: 175ms;
transform: rotateY(-90deg) scale(.9);
animation-name: flipouttoleft;
animation-duration: 175ms;
}
.flip.in {
-webkit-animation-name: flipintoright;
-webkit-animation-duration: 225ms;
animation-name: flipintoright;
animation-duration: 225ms;
}
@keyframes flipouttoleft {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
.flip.outA {
// -webkit-transform: rotateY(-90deg) scale(.9);
// -webkit-animation-name: flipouttoleft;
// -webkit-animation-duration: 175ms;
transform: rotateY(0deg) scale(1);
animation-name: flipouttoleftA;
animation-duration: 1000ms;
top:0 !important;
left: 0 !important;
width: 640rpx !important;
height: 700rpx !important;
z-index: 999999;
}
@keyframes flipouttoleftA {
0% {
transform: rotateY(0);
}
50% {
transform: rotateY(-90deg) scale(1);
}
100% {
transform: rotateY(0deg) scale(1);
top:0;
left: 0;
width: 640rpx;
height: 700rpx;
}
}
@keyframes flipintoright {
from { transform: rotateY(90deg) scale(.9); }
to { transform: rotateY(0); }
}
当时9个牌子，我用js创建数组存储x/y和按钮是否点击(动了点小脑袋)
const widthFa = 639;
const heightFa = 639;
const widthChil = 203;
const heightChil = 203;
position: [
{ x: '0rpx', y: '0rpx', btn: true },
{ x: `${widthChil + 15 }rpx`, y: '0rpx', btn: true },
{ x: `${widthFa - widthChil }rpx`, y: '0rpx', btn: true },
{ x: '0rpx', y: `${widthChil + 15 }rpx`, btn: true },
{ x: `${widthChil + 15 }rpx`, y: `${widthChil + 15 }rpx`, btn: true },
{ x: `${widthFa - widthChil }rpx`, y: `${widthChil + 15 }rpx`, btn: true },
{ x: '0rpx', y: `${widthFa - widthChil }rpx`, btn: true },
{ x: `${widthChil + 15 }rpx`, y: `${widthFa - widthChil }rpx`, btn: true },
{ x: `${widthFa - widthChil }rpx`, y: `${widthFa - widthChil }rpx`, btn: true },
],
最后，点击的时候
flipArr[index] = !flipArr[index];
that.setData({
flipArr,
isFlip: false
});
就可以实现翻转动画啦。