微信小程序实现翻牌抽奖动画


Posted in Javascript onSeptember 21, 2020

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

效果图如下所示

微信小程序实现翻牌抽奖动画

这里做的比较简陋,就花了一点时间实现了翻牌抽奖效果,提供思路

.wxml

<view class="button" bindtap="again">重新翻牌</view>
<view class="curin-index">
 <view bindtap="{{whether?'':'tamin'}}" wx:for="{{9}}" wx:key="index" data-index="{{index+1}}" class="currin {{really == index+1?'animt':''}} {{really != index+1 && surplus?'animt':''}} {{really == ''?'cinton'+(index+1):''}}" style="{{really == index+1 && implement > 1?'background-image: linear-gradient(45deg, #f43f3b, #ec008c);':''}}{{really != index+1 && surplus && implement > 2?'background-image: linear-gradient(45deg, #39b54a, #8dc63f);':''}}">
  {{really == index+1?flop:''}}{{really != index+1 && really != ''?biutin:''}}{{really == ''?'点击翻牌':''}}
 </view>
</view>

.wxss

view{
 box-sizing: border-box;
}
.button{
 width: 40%;
 height: 80rpx;
 line-height: 80rpx;
 background-color: #fadbd9;
 color: #e54d42;
 text-align: center;
 border-radius: 10rpx;
 margin: 30rpx 30%;
 float: left;
 position: relative;
}
.curin-index{
 width: 100%;
 float: left;
}
.currin{
 margin-left: 4%;
 margin-top: 50rpx;
 width: 28%;
 float: left;
 background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
 color: #fff;
 text-align: center;
 height: 200rpx;
 line-height: 200rpx;
 border-radius: 10rpx;
 position: relative;
}
.currin::before {
 content: "";
 display: block;
 background: inherit;
 filter: blur(10rpx);
 position: absolute;
 width: 100%;
 height: 100%;
 top: 10rpx;
 left: 10rpx;
 z-index: -1;
 opacity: 0.4;
 transform-origin: 0 0;
 border-radius: inherit;
 transform: scale(1, 1);
}
.cinton1{
 animation: cinton1 alternate linear 2 1s;
}
@keyframes cinton1{
 from {
  top: 0;
  left: 0;
 }
 to {
  top: 230rpx;
  left: 230rpx;
 }
}
.cinton2{
 animation: cinton2 alternate linear 2 1s;
}
@keyframes cinton2{
 from {
  top: 0;
  left: 0;
 }
 to {
  top: 230rpx;
  left: 0rpx;
 }
}
.cinton3{
 animation: cinton3 alternate linear 2 1s;
}
@keyframes cinton3{
 from {
  top: 0;
  left: 0;
 }
 to {
  top: 230rpx;
  left: -230rpx;
 }
}
.cinton4{
 animation: cinton4 alternate linear 2 1s;
}
@keyframes cinton4{
 from {
  top: 0;
  left: 0;
 }
 to {
  top: 0rpx;
  left: 230rpx;
 }
}
.cinton6{
 animation: cinton6 alternate linear 2 1s;
}
@keyframes cinton6{
 from {
  top: 0;
  left: 0;
 }
 to {
  top: 0rpx;
  left: -230rpx;
 }
}
.cinton7{
 animation: cinton7 alternate linear 2 1s;
}
@keyframes cinton7{
 from {
  top: 0;
  left: 0;
 }
 to {
  top: -230rpx;
  left: 230rpx;
 }
}
.cinton8{
 animation: cinton8 alternate linear 2 1s;
}
@keyframes cinton8{
 from {
  top: 0;
  left: 0;
 }
 to {
  top: -230rpx;
  left: 0rpx;
 }
}
.cinton9{
 animation: cinton9 alternate linear 2 1s;
}
@keyframes cinton9{
 from {
  top: 0;
  left: 0;
 }
 to {
  top: -230rpx;
  left: -230rpx;
 }
}
.animt{
 animation: fanzhuan 1.2s;
}
@keyframes fanzhuan{
 0% {
  transform: perspective(150px) rotateY(0deg);
 } 
 50% {
  transform: perspective(150px) rotateY(0deg);
 } 
 100% {
  transform: perspective(150px) rotateY(179.9deg);
 }
}

.js

Page({
 data: {
  whether: false,
  flop:'点击翻牌',
  really:'',
  implement: 0,
  surplus:false,
  biutin:'点击翻牌',
 }, 
 again:function(e){
  if (this.data.implement == 3 || this.data.implement == 0){
   this.setData({
    whether: false,
    flop: '点击翻牌',
    really: '',
    implement: 0,
    surplus: false,
    biutin: '点击翻牌',
   })
  }else{
   wx.showToast({
    title: '正在执行抽奖中...',
    icon: 'none',
    duration: 2000
   })
   return false
  }
 },
 tamin:function(e){
  let that = this
  let index = e.currentTarget.dataset.index
  that.setData({
   whether:true,
   really: index,
   implement:1,
  })
  setTimeout(function () {
   that.setData({
    flop: '',
   })
  }, 500)
  setTimeout(function () {
   that.setData({
    flop:'有奖品',
    surplus:true,
    implement: 2,
   })
  }, 1200)
  setTimeout(function () {
   that.setData({
    biutin: '',
   })
  }, 1700)
  setTimeout(function () {
   that.setData({
    biutin: '没有奖品',
    implement:3,
   })
  }, 2500)
 }
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
js获取checkbox值的方法
Jan 28 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 #Javascript
微信小程序实现转盘抽奖
Sep 21 #Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 #Javascript
微信小程序实现打卡签到页面
Sep 21 #Javascript
微信小程序实现签到弹窗动画
Sep 21 #Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 #Javascript
微信小程序实现日历签到
Sep 21 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
php实现httpRequest的方法
2015/03/13 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
js loading加载效果实现代码
2009/11/24 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
详解node.js 事件循环
2020/07/22 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
Python学习资料
2007/02/08 Python
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
python读取xlsx的方法
2018/12/25 Python
Python常用的json标准库
2019/02/19 Python
Django发送邮件功能实例详解
2019/09/02 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
银行办理业务介绍信
2014/01/18 职场文书
优质服务口号
2014/06/11 职场文书
化工工艺设计求职信
2014/06/25 职场文书