微信小程序实现红包雨功能


Posted in Javascript onJuly 11, 2018

本文为大家分享了微信小程序实现红包雨的具体代码,供大家参考,具体内容如下

今天有个小师妹来问我怎样用微信小程序实现红包雨效果,如果用web很好实现,但是小程序不是那么容易,整合自己也有一年没摸过小程序了,决定试一试。

首先明确“红包雨”的需求:

  • 随机位置掉落
  • 随机红包样式
  • 同一时间掉落个数随机
  • 每个红包的掉落速度随机,但不能太快也不能太慢

首先看看我做的效果吧

微信小程序实现红包雨功能

    首先明确小程序实现红包雨和web网页实现红包雨难点上有什么不同:

  • 小程序不能直接操作dom,web网页可以操作
  • 小程序循环渲染wx:for内无法执行animation,web网页中animation执行无条件约束
  • 小程序修改样式属性需要通过数据绑定无法直接修改,web网页可以直接取dom元素进行修改

    好了那么问题来了怎样实现生成红包雨呢?小程序无法直接操作dom也就意味着不能向dom内添加元素,这里我的解决办法是先生成预设个数的红包在视窗外部(用户看不到),然后修改每个红包的样式来实现动画(当然用css keyframes帧动画也可以,我这里使用的是js修改属性)

话不多说直接上代码吧,代码内有注释

wxml:

<view wx:for="{{packetList}}" wx:for-index="index" wx:for-item="items">
 <image class="red-packet" src="{{items.src}}" style="position:fixed;top:{{items.top}}px;left:{{items.left}}px;-webkit-transition:{{items.speed}}ms linear 0ms;transition:{{items.speed}}ms linear 0ms">
 </image>
</view>

wxss:

.red-packet{
 width: 20px;
 height: 25px;
 z-index: 100;
 transition-property:transform,top;
 transform-origin:50% 50% 0;
 -webkit-transition-property:transform,top;
 -webkit-transform-origin:50% 50% 0;
}

js:

Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 windowWidth:"",//窗口宽度
 windowHeigh:"",//窗口高度
 packetList:[{}],//红包队列
 packetNum:200,//总共红包的数量
 showInter:''// 循环动画定时器
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var that = this;
 
 // 获取手机屏幕宽高
 wx.getSystemInfo({
  success: function (res) {
  that.setData({
   windowWidth: res.windowWidth,
   windowHeigh: res.windowHeight,
   top: res.windowHeight-100 //设置红包初始位置
  })
  }
 })
 
 //建立临时红包列表
 var packetList=[];
 //建立临时红包图片数组
 var srcList = ["../images/packet-one.png", "../images/packet-two.png"];
 //生成初始化红包
 for(var i=0;i<that.data.packetNum;i++){
  // 生成随机位置(水平位置)
  var left = Math.random() * that.data.windowWidth-20;
  // 优化位置,防止红包越界现象,保证每个红包都在屏幕之内
  if(left<0){
  left+=20;
  } else if (left > that.data.windowWidth){
  left-=20;
  }
  // 建立临时单个红包
  var packet = {
  src: srcList[Math.ceil(Math.random() * 2) - 1],
  top: -30,
  left:left,
  speed:Math.random() * 2500+3000  //生成随机掉落时间,保证每个掉落时间保持在3秒到5.5秒之间
  }
  // 将单个红包装入临时红包列表
  packetList.push(packet);
  // 将生成的临时红包列表更新至页面数据,页面内进行渲染
  that.setData({
  packetList: packetList
  })
 }
 
 // 初始化动画执行当前索引
 var tempIndex=0;
 // 开始定时器,每隔1秒掉落一次红包
 that.data.showInter=setInterval(function(){
  // 生成当前掉落红包的个数,1-3个
  var showNum = Math.ceil(Math.random() * 3);
  // 防止数组越界
  if (tempIndex * showNum>=that.data.packetNum){
  // 如果所有预生成的红包已经掉落完,清除定时器
  clearInterval(that.data.showInter);
  }else{
  switch (showNum){
   case 1:
   //设置临时红包列表当前索引下的top值,此处top值为动画运动的最终top值 
   packetList[tempIndex].top = that.data.windowHeigh;
   // 当前次掉落几个红包,索引值就加几
   tempIndex+=1;
   break;
   case 2:
   packetList[tempIndex].top = that.data.windowHeigh;
   packetList[tempIndex + 1].top = that.data.windowHeigh;
   tempIndex+=2;
   break;
   case 3:
   packetList[tempIndex].top = that.data.windowHeigh;
   packetList[tempIndex + 1].top = that.data.windowHeigh;
   packetList[tempIndex + 2].top = that.data.windowHeigh;
   tempIndex += 3;
   break;
   default:
   console.log();
  }
  // 更新红包列表数据
  that.setData({
   packetList: packetList
  })
  }
 },1000)
 }
})

好了红包雨就这样实现了,其实还是蛮有意思的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
小程序ios音频播放没声音问题的解决
Jul 11 #Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 #Javascript
微信小程序实现发红包功能
Jul 11 #Javascript
vue框架搭建之axios使用教程
Jul 11 #Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 #Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 #Javascript
node.js到底要不要加分号浅析
Jul 11 #Javascript
You might like
30个php操作redis常用方法代码例子
2014/07/05 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
javascript常用函数(2)
2015/11/05 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
python打开文件并获取文件相关属性的方法
2015/04/23 Python
python实现BackPropagation算法
2017/12/14 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
化学学院毕业生自荐信范文
2013/12/17 职场文书
办加油卡单位介绍信
2014/01/09 职场文书
单位提档介绍信
2014/01/17 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
科技馆观后感
2015/06/08 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS