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


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 相关文章推荐
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 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
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
PHP可变函数的使用详解
2013/06/14 PHP
php计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
ExpressJS入门实例
2015/01/14 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
vue组件name的作用小结
2018/05/23 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
小学教师师德师风自我剖析材料
2014/09/29 职场文书
先进单位申报材料
2014/12/25 职场文书
诚信考试主题班会
2015/08/17 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
英语教学课后反思
2016/02/15 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
德劲DE1105机评
2022/04/05 无线电
win10清理dns缓存
2022/04/19 数码科技