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


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 相关文章推荐
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
JavaScript 函数式编程的原理
Oct 16 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
js如何验证密码强度
Mar 18 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 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入门学习的几个不错的实例代码
2008/07/13 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
js电信网通双线自动选择技巧
2008/11/18 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
django Serializer序列化使用方法详解
2018/10/16 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
Django对models里的objects的使用详解
2019/08/17 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
Django之路由层的实现
2019/09/09 Python
python实现计算器功能
2019/10/31 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
护士节策划方案
2014/05/19 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
群众路线表态发言材料
2014/10/17 职场文书
开会通知短信大全
2015/04/20 职场文书
Java8中Stream的一些神操作
2021/11/02 Java/Android