欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

小程序红包雨

程序员文章站 2024-01-03 11:11:46
...

小程序红包雨

效果图

主要逻辑代码:

//建立临时红包列表
    var packetList = [];
    //建立临时红包图片数组
    var srcList = ["../images/hogbao.png", "../images/hogbao2.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)

    console.log("数据" + that.data.showInter)
    
  },

CSS代码:

<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" bindtap='tapImages' >
  </image>
</view>

WXML代码:

.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/hogbao.png", "../images/hogbao2.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)

    console.log("数据" + that.data.showInter)
    
  },

  //点击图片
  tapImages: function (event){

    var score = Math.ceil(Math.random() * 100);
    wx.showToast({
      title: "得分"+score,
      icon: 'succes',
      duration: 1000,
      mask: true
    })
  }
})

直接使用

相关标签: 小程序 红包雨

上一篇:

下一篇: