微信小程序九宫格翻牌
学海无涯之不悔 人气:09宫格翻牌需求:
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 });
就可以实现翻转动画啦。
加载全部内容