微信小程序 扭蛋抽奖机css3动画实现详解


Posted in Javascript onJuly 19, 2019

前言

最近快速上线一个抽奖活动,又不想用canvas做,思考了很久,还是决定使用css3的动画来做,只要小球动得快,就没人发现我这些个小球的运动路径都是一样的了。先上动图

微信小程序 扭蛋抽奖机css3动画实现详解

wxml文件:

<view class="ball-box">
  <image class="ball ball_1 {{start?'weiyi_1':''}}" src="https://acceleratepic.miniso.com/miniso/ball1.png"></image>
  <image class="ball ball_2 {{start?'weiyi_2':''}}" src="https://acceleratepic.miniso.com/miniso/ball1.png"></image>
  <image class="ball ball_3 {{start?'weiyi_3':''}}" src="https://acceleratepic.miniso.com/miniso/ball2.png"></image>
  <image class="ball ball_4 {{start?'weiyi_4':''}}" src="https://acceleratepic.miniso.com/miniso/ball2.png"></image>
  <image class="ball ball_5 {{start?'weiyi_5':''}}" src="https://acceleratepic.miniso.com/miniso/ball1.png"></image>
  <image class="ball ball_6 {{start?'weiyi_6':''}}" src="https://acceleratepic.miniso.com/miniso/ball2.png"></image>
  <image class="ball ball_7 {{start?'weiyi_7':''}}" src="https://acceleratepic.miniso.com/miniso/ball3.png"></image>
  <image class="ball ball_8 {{start?'weiyi_8':''}}" src="https://acceleratepic.miniso.com/miniso/ball3.png"></image>
  <image class="ball ball_9 {{start?'weiyi_9':''}}" src="https://acceleratepic.miniso.com/miniso/ball3.png"></image>
  <image class="ball ball_10 {{start?'weiyi_10':''}}" src="https://acceleratepic.miniso.com/miniso/ball4.png"></image>
  <image class="ball ball_11 {{start?'weiyi_11':''}}" src="https://acceleratepic.miniso.com/miniso/ball4.png"></image>
</view>

这个做得我头皮发麻,但是写这篇文章时突然想到,为啥不用个for循环来做呢?!

<view class="ball-box">
 <image wx:for="ballList" wx:for-index="i" class="ball ball_{{i}} {{start?'weiyi_{{i}}':''}}" src="https://acceleratepic.miniso.com/miniso/ball{{i}}.png"></image>
</view>

这样看起来是不是舒服多了,因为是这段代码现场手写,如果有啥bug也不好说。

wxss文件:

.weiyi_1 {
 animation: around1 1.5s linear infinite;
 -webkit-animation: around1 1.5s linear infinite;
}

简单的动画

/* 位移 */

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

@keyframes around1 {
 0% {
 transform: translate(0rpx, 0rpx)
 }
 20% {
 transform: translate(100rpx, -250rpx)
 }
 40% {
 transform: translate(200rpx, -100rpx)
 }
 60% {
 transform: translate(50rpx, -230rpx)
 }
 80% {
 transform: translate(300rpx, -50rpx)
 }
 100% {
 transform: translate(0, 0)
 }
}

简单的位移

其他就不一一列出来了,反正都差不多,改变一下运动轨迹就行了。

js文件:

相比丧病的样式,js文件就简单多了。

_this.setData({
 start: true
})

控制抽奖开始

setTimeout(() => {
  _this.setData({
   start: false,
   end: true
  })
  //其他代码部分
  //time是接口请求开始到结束的时间
}, Math.ceil(time / 1500) * 1500 - time)

这里用了一个setTimeout,用于设置动画结束时间,优化一下动画,不让结束看起来太突兀。

1500是wxss里这是的动画时间。

总结:

简单的扭蛋机,有时间用canvas来做做。

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

Javascript 相关文章推荐
JavaScript入门之基本函数详解
Oct 21 Javascript
jquery.post用法示例代码
Jan 03 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
Vue渲染过程浅析
Mar 14 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 #Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 #Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 #Javascript
bootstrap Table实现合并相同行
Jul 19 #Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 #Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 #Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 #Javascript
You might like
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
ext 同步和异步示例代码
2009/09/18 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
package.json文件配置详解
2017/06/15 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
Python获取网页上图片下载地址的方法
2015/03/11 Python
Python编程中的异常处理教程
2015/08/21 Python
numpy自动生成数组详解
2017/12/15 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
数据库面试要点基本概念
2013/10/31 面试题
咨询公司各岗位职责
2013/12/02 职场文书
物资采购方案
2014/06/12 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
综合实践活动报告
2015/02/05 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书