PHP扭蛋机原理,微信小程序 扭蛋抽奖机css3动画实现详解
前言
最近快速上线一个抽奖活动,又不想用canvas做,思考了很久,还是决定使用css3的动画来做,只要小球动得快,就没人发现我这些个小球的运动路径都是一样的了。先上动图
wxml文件:
这个做得我头皮发麻,但是写这篇文章时突然想到,为啥不用个for循环来做呢?!
这样看起来是不是舒服多了,因为是这段代码现场手写,如果有啥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来做做。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
PHP扭蛋机原理,微信小程序 扭蛋抽奖机css3动画实现详解相关推荐
- php微信小程序物流进度推送,微信小程序 消息推送php服务器验证实例详解
微信小程序 消息推送php服务器验证实例详解 设置页面("设置">>"开发设置"): 1.设置服务器域名 注意http和https协议的不同. 2. ...
- wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解 现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
- 微信小程序云开发入门(二)-数据库详解
微信小程序云开发入门(二)-数据库详解 接上一篇:微信小程序云开发入门(一) 摘要: 因为微信小程序云数据库有点类似传统的关系型数据库,但又有所不同.所以刚入手的时候会有点困扰,经过一段时间的学习和摸 ...
- 从微信服务器获取用户信息,微信小程序Ⅴ [获取登陆用户信息,重点openID(详解)]...
♩ 背景 其实这篇文章几个月前就写完了,可是这段时间,微信小程序官方文档有了更新,同事在我本身的实际操做过程当中,发现以前写的过于繁杂,因此如今进行简化梳理,欢迎指摘. 语言框架:ThinkPHP3. ...
- 【愚公系列】2022年08月 微信小程序-(rich-text)富文本和(text)文本的详解
文章目录 前言 一.富文本使用 1.富文本的基本使用 2.富文本中预览图片 2.1 原生使用 2.2 组件封装使用 2.2.1 组件封装 2.2.2 组件使用 二.文本 1.文本属性 前言 富文本格式 ...
- 微信小程序Ⅴ [获取登录用户信息,重点openID(详解)]
♩ 背景 其实这篇文章几个月前就写完了,但是这段时间,微信小程序官方文档有了更新,同事在我自己的实际操作过程中,发现之前写的过于繁杂,所以现在进行简化梳理,欢迎指摘. 语言框架:ThinkPHP3.2 ...
- 微信小程序点击带id参数跳转_微信小程序页面跳转方法和携带参数详解
1.页面跳转方式 (1)标签跳转 open-type的属性值对应api里的用法即wx.的用法 1 跳转到新页面 (2)wx.navigateTo 方法跳转 此方法能够从跳转的页面会回到当前页面 1 w ...
- 微信小程序——云函数三方库request-promise的使用详解
三方库request-promise的使用: 1)首先在浏览器打开github,然后在搜索框输入request搜索,如下图所示: 找到第一个request打开,然后下滑找到我们需要的request-p ...
- api 定位 微信小程序 精度_微信小程序3种位置API的使用方法详解
获取位置 获取当前的地理位置.速度.当用户离开小程序后,此接口无法调用:当用户点击"显示在聊天顶部"时,此接口可继续调用. wx.getLocation(object) 获取位置 ...
最新文章
- RabbitMQ 3.6.x 安装和配置--Linux篇
- spring源码分析之spring注解@Aspect是如何工作的?
- 2021年春季学期-信号与系统-第十二次作业参考答案-第一小题
- 2.34模型--简单字符串查找(占位).c
- angular1x初始与架构演进(四)gulp配置+OcLazyLoad中资源MD5时间轴更新
- spark python 开发环境_Eclipse配置Spark Python开发环境
- Windows 系统电脑开机速度加快
- python list操作说明
- 计算机开机显示已删除,教大家电脑开机出现部分便签的元数据已被损坏怎么办...
- c语言数组方式实现静态循环队列
- easyui combobox默认选中项
- template 标签
- java序列化_今天聊聊 Java 序列化
- Linux 软件安装目录详解
- 【R文本分析】《工作细胞》是一部成功的科普番嘛?
- Neverland Test 2.0
- 默然日记20150207
- one class classification
- matlab画基因表达热图,科学网—使用pheatmap软件绘制基因表达热图 - 陈振玺的博文...
- vue使用高德地图关键字搜索功能的实例代码(踩坑经验)
热门文章
- Camera2 APP Flash 打闪流程及原理分析
- clickhouse建表语句行数太多导致报错 Unmatched parentheses: (
- 360安全卫士大战“病毒之王”——最新磁碟机变种
- RPG游戏服务端压力测试-测试用例
- 九连环课程设计c语言,用C语言编程解九连环
- 大周末的不休息,继续学习pandas吧,pandas你该这么学,No.7
- 2021-05-31
- 常见神经系统疾病的临床诊断及处理原则题库【2】
- java腰间盘终结者_大枣加大葱竟是腰椎间盘突出的终结者,一用一个好,腰不好不要错过...
- 宋宝华:为什么numactl内存绑定对代码段不起作用