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


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 相关文章推荐
Jquery 设置标题的自动翻转
Oct 03 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 Javascript
不依任何赖第三方,单纯用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实现验证码校验功能
2017/11/16 PHP
精通Javascript系列之数值计算
2011/06/07 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
javascript中clone对象详解
2014/12/03 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
Python中字典和JSON互转操作实例
2015/01/19 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
python斐波那契数列的计算方法
2018/09/27 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
单位领导证婚词
2014/01/14 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
python3操作redis实现List列表实例
2021/08/04 Python
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers