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


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 对象、函数和继承
Jul 07 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
纯JS实现表单验证实例
Dec 24 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
vue实现分页栏效果
Jun 28 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
js获取图片的base64编码并压缩
Dec 05 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对数组排序代码分享
2014/02/24 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
Vue响应式原理详解
2017/04/18 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
自己使用总结Python程序代码片段
2015/06/02 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
销售总监工作职责
2013/11/21 职场文书
家长学校实施方案
2014/03/15 职场文书
推广普通话演讲稿
2014/05/23 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
大学军训心得体会800字
2016/01/11 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
MySQL 覆盖索引的优点
2021/05/19 MySQL
Nginx反向代理学习实例教程
2021/10/24 Servers