微信小程序 扭蛋抽奖机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 相关文章推荐
jquery实现的树形目录实例
Jun 26 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
vscode 调试 node.js的方法步骤
Sep 15 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简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
Django models.py应用实现过程详解
2019/07/29 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
先进个人获奖感言
2014/01/24 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
新闻学专业求职信
2014/07/28 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
个人租房协议书
2014/11/28 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
接收函
2019/04/22 职场文书