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


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 相关文章推荐
Javascript 强制类型转换函数
May 17 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 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
用Flash图形化数据(二)
2006/10/09 PHP
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
php调整服务器时间的方法
2015/04/03 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
php xhprof使用实例详解
2019/04/15 PHP
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
python搭建简易服务器分析与实现
2012/12/15 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
python实现八大排序算法(2)
2017/09/14 Python
python逆序打印各位数字的方法
2018/06/25 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python turtle库的画笔控制说明
2020/06/28 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
大堂副理的岗位职责范文
2014/02/17 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
美丽的大脚观后感
2015/06/03 职场文书
音乐之声观后感
2015/06/04 职场文书
同意报考证明
2015/06/17 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python