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


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函数
Dec 22 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
jQuery.each使用详解
Jul 07 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
js实现轮播图特效
May 28 Javascript
js实现详情页放大镜效果
Oct 28 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 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
Ajax PHP分页演示
2007/01/02 PHP
php md5下16位和32位的实现代码
2008/04/09 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
JavaScript运算符小结
2015/06/03 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python 多线程Threading初学教程
2017/08/22 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
详解python的异常捕获
2022/03/03 Python
MySQL Server层四个日志的实现
2022/03/31 MySQL