微信小程序 扭蛋抽奖机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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
原生javascript中this几种常见用法总结
Feb 24 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将会员数据导入到ucenter的代码
2010/07/18 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
python中enumerate的用法实例解析
2014/08/18 Python
python遍历小写英文字母的方法
2019/01/02 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
python批量下载抖音视频
2019/06/17 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
Python内置加密模块用法解析
2019/11/25 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
python中count函数知识点浅析
2020/12/17 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
小学生期末自我鉴定
2014/01/19 职场文书
部门年终奖分配方案
2014/05/07 职场文书
广播体操比赛口号
2014/06/10 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server