微信小程序 扭蛋抽奖机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 dialog键盘事件代码
Aug 01 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
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木马webshell扫描器代码
2012/01/25 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
jquery动态添加option示例
2013/12/30 Javascript
js的回调函数详解
2015/01/05 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
Python命名空间详解
2014/08/18 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
如何利用python查找电脑文件
2018/04/27 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
师说教学反思
2014/02/07 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
付款承诺函范文
2015/01/21 职场文书
赔偿协议书
2015/01/27 职场文书
计划生育工作总结2015
2015/04/03 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
详解python网络进程
2021/06/15 Python