微信小程序制作扭蛋机代码实例


Posted in Javascript onSeptember 24, 2019

公司要制作活动小程序,其中有一个扭蛋机的效果实现抽奖的功能。在网上找了好久竟没有找到(不知道是不是我找代码的方式有问题)。最后还是自己做一个吧- _ - ,效果如下:

微信小程序制作扭蛋机代码实例

1.wxml

当然我这里没有用wx:for遍历

<!-- 扭蛋机 -->
 <view class="egg">
  <image class="egg_ji" src="{{imgUrl}}small_program/game/game_luck_draw_nd.png" mode="widthFix"></image>
  <image class="play {{start?'go':''}}" bindtap="eggPlay" src="{{imgUrl}}small_program/game/game_luck_draw_eggplay.png" mode="widthFix"></image>
  <image class="ball ball_1 {{start?'weiyi_1':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg1.png" mode="widthFix"></image>
  <image class="ball ball_2 {{start?'weiyi_2':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg2.png" mode="widthFix"></image>
  <image class="ball ball_3 {{start?'weiyi_3':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg3.png" mode="widthFix"></image>
  <image class="ball ball_4 {{start?'weiyi_4':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg4.png" mode="widthFix"></image>
  <image class="ball ball_5 {{start?'weiyi_5':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg5.png" mode="widthFix"></image>
  <image class="ball ball_6 {{start?'weiyi_6':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg6.png" mode="widthFix"></image>
  <image class="ball ball_7 {{start?'weiyi_7':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg7.png" mode="widthFix"></image>
  <image hidden="{{qiu}}" animation="{{ani}}" class="ball ball_end" src="{{imgUrl}}small_program/game/game_luck_draw_egg7.png" mode="widthFix" ></image>
 </view>

2.wxss

这一步比较麻烦,需要调试扭蛋的位置和动画路径

/* 扭蛋机 */
.egg{
 width: 100%;
 position: absolute;
 z-index: 3;
 top: 260rpx;
}
.egg .egg_ji{
 width: 70%;
 margin-left: 15%;
 z-index: 3;
}
.egg .play{
 width: 80rpx;
 position: absolute;
 z-index: 4;
 top: 405rpx;
 left: 275rpx;
}
.egg .ball{
 width: 75rpx;
 position: absolute;
 z-index: 2;
}
.egg .ball_1{
 top: 290rpx;
 left: 300rpx;
}
.egg .ball_2{
 top: 295rpx;
 left: 360rpx;
}
.egg .ball_3{
 top: 260rpx;
 left: 240rpx;
}
.egg .ball_4{
 top: 260rpx;
 left: 420rpx;
}
.egg .ball_5{
 top: 230rpx;
 left: 280rpx;
}
.egg .ball_6{
 top: 230rpx;
 left: 340rpx;
}
.egg .ball_7{
 top: 220rpx;
 left: 390rpx;
}
.egg .ball_end{
 top: 410rpx;
 left: 390rpx;
}

.weiyi_1 {
 animation: around1 1.5s linear infinite;
}
.weiyi_2 {
 animation: around2 1.5s linear infinite;
}
.weiyi_3 {
 animation: around3 1.5s linear infinite;
} 
.weiyi_4 {
 animation: around4 1.5s linear infinite;
}
.weiyi_5 {
 animation: around5 1.5s linear infinite;
}
.weiyi_6 {
 animation: around6 1.5s linear infinite;
}
.weiyi_7 {
 animation: around7 1.5s linear infinite;
}
.go{
 animation: around 0.3s linear 1;
}


/* 位移 */
@keyframes around{
 100% {
 -webkit-transform: rotate(-180deg)
 }
}

@keyframes around1 {
 0% {
 -webkit-transform: translate(0rpx, 0rpx)
 }
 20% {
 -webkit-transform: translate(-100rpx, -200rpx)
 }
 40% {
 -webkit-transform: translate(40rpx, -280rpx)
 }
 60% {
 -webkit-transform: translate(150rpx, -200rpx)
 }
 80% {
 -webkit-transform: translate(150rpx, -50rpx)
 }
 100% {
 -webkit-transform: translate(0, 0)
 }
}

@keyframes around2 {
 0% {
 -webkit-transform: translate(0rpx, 0rpx)
 }
 20% {
 -webkit-transform: translate(100rpx, -200rpx)
 }
 40% {
 -webkit-transform: translate(-20rpx, -280rpx)
 }
 60% {
 -webkit-transform: translate(-150rpx, -200rpx)
 }
 80% {
 -webkit-transform: translate(-150rpx, -50rpx)
 }
 100% {
 -webkit-transform: translate(0, 0)
 }
}

@keyframes around3 {
 0% {
 -webkit-transform: translate(0rpx, 0rpx)
 }
 20% {
 -webkit-transform: translate(180rpx, 10rpx)
 }
 40% {
 -webkit-transform: translate(240rpx, -110rpx)
 }
 60% {
 -webkit-transform: translate(100rpx, -240rpx)
 }
 80% {
 -webkit-transform: translate(-50rpx, -130rpx)
 }
 100% {
 -webkit-transform: translate(0, 0)
 }
}

@keyframes around4 {
 0% {
 -webkit-transform: translate(0rpx, 0rpx)
 }
 20% {
 -webkit-transform: translate(-180rpx, 10rpx)
 }
 40% {
 -webkit-transform: translate(-240rpx, -110rpx)
 }
 60% {
 -webkit-transform: translate(-100rpx, -240rpx)
 }
 80% {
 -webkit-transform: translate(50rpx, -130rpx)
 }
 100% {
 -webkit-transform: translate(0, 0)
 }
}

@keyframes around5 {
 0% {
 -webkit-transform: translate(0rpx, 0rpx)
 }
 20% {
 -webkit-transform: translate(40rpx, 70rpx)
 }
 40% {
 -webkit-transform: translate(50rpx, -210rpx)
 }
 60% {
 -webkit-transform: translate(-80rpx, -100rpx)
 }
 80% {
 -webkit-transform: translate(190rpx, -50rpx)
 }
 100% {
 -webkit-transform: translate(0, 0)
 }
}

@keyframes around6 {
 0% {
 -webkit-transform: translate(0rpx, 0rpx)
 }
 20% {
 -webkit-transform: translate(-150rpx, -50rpx)
 }
 40% {
 -webkit-transform: translate(130rpx, -140rpx)
 }
 60% {
 -webkit-transform: translate(-110rpx, -180rpx)
 }
 80% {
 -webkit-transform: translate(-130rpx, -20rpx)
 }
 100% {
 -webkit-transform: translate(0, 0)
 }
}

@keyframes around7 {
 0% {
 -webkit-transform: translate(0rpx, 0rpx)
 }
 20% {
 -webkit-transform: translate(80rpx, -50rpx)
 }
 40% {
 -webkit-transform: translate(-180rpx, -100rpx)
 }
 60% {
 -webkit-transform: translate(50rpx, -150rpx)
 }
 80% {
 -webkit-transform: translate(-180rpx, -20rpx)
 }
 100% {
 -webkit-transform: translate(0, 0)
 }
}

3.js

这一步要比css要是要简单的多,点击使动画动起来,调用api接口获取奖品就可以了

Page({

 /**
  * 页面的初始数据
  */
 data: {
  imgUrl: app.data.imgUrl,
  start : false,
  qiu: true,
 },

/**
 * 点击扭蛋机
 */
 eggPlay(){
  let _this = this;

  _this.setData({
   start: true,
  })
  setTimeout(() => {
   _this.setData({
    start: false,
    qiu: false,
   })
   //球落下动画
   var animation = wx.createAnimation({
    duration: 1500,
    timingFunction: 'ease',
   });
   animation.opacity(1).step()
   this.setData({
    ani: animation.export()
   })
  }, 3000);

  _this.setData({
   qiu: true
  })
  //将动画返回到开始位置
  var animation = wx.createAnimation({
   duration: 1500,
   timingFunction: 'ease',
  });
  animation.opacity(0).step()
  this.setData({
   ani: animation.export()
  })
 },

这个动画有个小的bug,就是连续点击按钮动画时间会变快,如果有更好的方法可以留言交流。

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

Javascript 相关文章推荐
jQuery实现的立体文字渐变效果
May 17 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
layer.prompt输入层的例子
Sep 24 #Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 #Javascript
解决layer.prompt无效的问题
Sep 24 #Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 #Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 #Javascript
通过实例了解JS 连续赋值
Sep 24 #Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 #Javascript
You might like
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
python跨文件使用全局变量的实现
2020/11/17 Python
十八大报告观后感
2014/01/28 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
美术指导求职信
2014/03/17 职场文书
学生安全责任书范本
2014/07/24 职场文书
投标授权委托书范文
2014/08/02 职场文书
验房委托书
2014/08/30 职场文书
报到证办理个人委托书
2014/10/06 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
Go Plugins插件的实现方式
2021/08/07 Golang
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技