微信小程序如何实现长尾词的九宫格翻牌动画效果？

本文共计791个文字，预计阅读时间需要4分钟。

本文以家庭分享为例，展示了微信小程序实现九宫格翻牌的具体代码。供大家参考，具体内容如下：

+ 9宫格翻牌需求：

1.进入时平铺9个格子显示

2.点击开始抽奖时，洗牌动作

3.洗完牌后，显示9个都是XXX

本文实例为大家分享了微信小程序实现九宫格翻牌的具体代码，供大家参考，具体内容如下

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 });

就可以实现翻转动画啦。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。