微信小程序 9宫格翻牌动画

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

就可以实现翻转动画啦

微信小程序 9宫格翻牌动画相关推荐

微信小程序多宫格抽奖
最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢首先看效果思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然 ...
微信小程序六宫格抽奖
用微信小程序做一个抽奖活动一轮是6个红包,需要在第三轮听下转动,初始一个随机数在13-18之间随机来进行抽奖 //页面的渲染 <view class="container" ...
[微信小程序专题] 宫格导航设计
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题在很多APP软件,都会设置宫格导航,那么是如何设计的呢? ...
vue 图片宫格_微信小程序多宫格/九宫格抽奖基于vue来写
/*整体布局采用定位实现 gameBox:父盒子,最外层背景图 bg1:灰色灯 bg2:点击开始按钮后,白色灯出现,同时要每个500s同bg1做切换隐藏显示 start:按钮样式 item1-8:通过 ...
【微信小程序】自定义加载动画3
目录效果图配置版本1 版本2 结语效果图配置配置方法参考上一篇文章:[微信小程序]自定义加载动画版本1 Component({behaviors
【微信小程序】自定义加载动画4
目录效果图配置文件结语效果图配置文件配置方法参考上一篇文章:[微信小程序]自定义加载动画组件源代码: Component({behaviors: [],properties: {
【微信小程序—动画工坊】动画入门keyframe
[微信小程序-动画工坊]动画入门前情需要了解的前置知识: 子代选择器基本布局分析可以将任务进行一下拆分. 如何让小球跑动起来? 通过@keyframe创造动画函数,然后再通过animatio ...
微信小程序实现集卡合成动画
微信小程序实现集卡合成动画效果图微信小程序动画搭建结构样式 js 效果图微信小程序动画创建一个动画实例 animation 调用实例的方法来描述动画最后通过动画实例的 export ...
微信小程序实现拼团成功动画
微信小程序实现如上效果. 分为两个组件: PinTuan: 整体组件 PinTuanHead: 每个头像组件代码如下: PinTuan.js Component({attached:function ...

微信小程序 9宫格翻牌动画

微信小程序 9宫格翻牌动画相关推荐

最新文章

热门文章