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


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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
初识JQuery 实例一(first)
Mar 16 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
浅谈es6中的元编程
Dec 01 Javascript
小程序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
测试您的 PHP 水平的题目
2007/05/30 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
JS动态改变浏览器标题的方法
2016/04/06 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
vue实现扫码功能
2020/01/17 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
什么是python的必选参数
2020/06/21 Python
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
如何写好优秀的创业计划书
2014/01/30 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
大学生团支书竞选稿
2015/11/21 职场文书