微信小程序 扭蛋抽奖机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 iframe内的函数调用实现方法
Jul 19 Javascript
JQUERY 浏览器判断实现函数
Aug 20 Javascript
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
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文件被直接访问的解决方案
2013/04/25 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
js实现动态增加文件域表单功能
2018/10/22 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
python文件与目录操作实例详解
2016/02/22 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
Python中拆分字符串的操作方法
2019/07/23 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
高考考python编程是真的吗
2020/07/20 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
计算机应用专业推荐信
2013/11/13 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
五年级上册复习计划
2015/01/19 职场文书
副总经理岗位职责
2015/02/02 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
详解Python魔法方法之描述符类
2021/05/26 Python
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis