微信小程序 扭蛋抽奖机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 相关文章推荐
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 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
PHP 程序员的调试技术小结
2009/11/15 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
python搭建微信公众平台
2016/02/09 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
python输入错误后删除的方法
2019/10/12 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
自荐信格式范文
2013/10/07 职场文书
大学生求职简历的自我评价范文
2013/10/12 职场文书
初婚未育证明
2014/01/15 职场文书
股东协议书范本
2014/04/14 职场文书
家长建议怎么写
2014/05/15 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
工程服务质量承诺书
2015/04/29 职场文书
生产车间管理制度
2015/08/04 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS