JS技巧动手实现红包兔子雨效果示例详解

目录
  • 前言
  • 展示效果
    • 技术栈
    • 思考与实现
    • 红包下落效果
    • 生成红包雨
    • 打开红包效果
    • 兔子雨效果
  • 拓展
    • 设置中奖概率
  • 后记

前言

人生天地之间，若白驹过隙，忽然而已。不知不觉中，2022年已然逝去，2023年也过去了半个月了。看到「兔了个兔」这个活动几天了，不过这周比较忙，没时间参与。

心血来潮，捣鼓了一晚上，实现一个兔年的红包雨（兔子雨）效果~

展示效果

技术栈

  • Vue2
  • SCSS：实现红包雨（兔子雨）效果、按钮交互效果等。

思考与实现

首先，思考一下最终的展示效果：在屏幕上会有很多随机下落的兔子（红包），点击兔子弹出一个详情弹窗，会获得一定的现金或实物奖励。当然，获得的红包可能是一定金额，也可能是“谢谢参与”或者其他。类似的有支付宝的集五福活动、蚂蚁森林等场景。

接着，考虑如何实现这个场景。

红包下落效果

我们先设计一个简单的红包效果：

这里对于红包，使用的是绝对定位，并使用background属性设置渐变色。

<div class="bag"></div>
.bag{
  width: 30px;
  height: 50px;
  background: linear-gradient(to bottom, #ff6a00, #ee0979);
  position: absolute;
  top: 0;
  left: 0;
  user-select: none;
  cursor: pointer;
}

为了实现下落效果，我们可以使用定时器不断增加top属性的值，直到超出屏幕为止。然而，当红包数量越来越多时，我们需要操作的DOM元素太多了，而且每个红包都加上一个定时器，并不优雅！！

思考了很久，后来想到可以借助CSS动画去实现！也就是，初始位置的top值是0，动画结束时是100vh，也就是红包移出屏幕的时候。借助CSS3 animation-fill-mode 属性，这里取值是：animation-fill-mode:forwards;。最终红包刚好停留在屏幕下方那里（视野不可见）。

.bag{
  animation: downBags 3s forwards linear;
}
// 红包的下落动画
@keyframes downBags {
  0% {
    top: 0;
  }
  100% {
    top: 100vh;
  }
}

生成红包雨

这里借助Vue2来渲染和操作DOM。红包雨使用bags变量来维护。交互开始时，触发 init 函数，每间隔 500ms 生成一个红包。当超出规定的数量(bagsNum，这里设置为20)后，停止生成红包。

Vue是操作DOM的利器！这里我们不需要手动创建DOM元素：var el = document.createElement('div'); 然后再添加CSS样式。我们通过操作bags数组，每生成一个红包就添加一个元素，并设置该元素对应的属性，比如top, left, money等等即可。是不是简单了许多?

init() {
  let count = 0
  let countT = setInterval(() => {
    if (count >= this.bagsNum) {
      clearInterval(countT)
      this.gameover = true
      return
    }
    this.createBag(count)
    count++
  }, 500);
},
createBag(i) {
  let ran = Math.random()
  let money = Math.floor(ran * 1001)
  let desc = ''
  if (ran > this.prizeRatio) {
    money = 0
    desc = '谢谢参与！'
  }
  let deg = 0
  if (this.isRabbitBG) {
    deg = Math.floor(ran * 30)
    if (ran > 0.5) {
      deg *= -1
    }
  }
  let param = {
    index: i,
    money,
    desc,
    from: '掘金',
    top: 0,
    left: `${Math.floor(Math.random() * this.maxW)}vw`,
    deg,
    show: true,
  }
  this.bags.push(param)
},

到这里，简单的红包雨效果实现了。

打开红包效果

样式和交互比较简单，点击按钮后，我们给按钮添加rotate样式，借助CSS动画去实现交互效果。这里就不赘述了。

.rotate{
  animation: rotateAni linear .3s infinite;
}
@keyframes rotateAni {
  from{
    transform:rotateY(180deg);
  }
  to{
    transform:rotateY(360deg);
  }
}

兔子雨效果

兔年到了，当然要尝试下“兔子雨”了... 这里我们把红包换成兔子，为了使得“兔子雨”效果看上去更优雅一些，我们给兔子图片随机设置了一定的旋转角度（±30°之间）。

.bagRabbitBG{
  width: 70px;
  background: url(https://clemmensen.top/static/rabbit1.png) center / cover no-repeat;
}
createBag(i) {
  let ran = Math.random()
  // ...
  let deg = 0
  if (this.isRabbitBG) {
    deg = Math.floor(ran * 30)
    if (ran > 0.5) {
      deg *= -1
    }
  }
  // ...
}

实际效果如下：

拓展

设置中奖概率

这里我们可以设置中奖概率为75%。当随机数大于0.75时，中奖金额市值为0，文案设置为"谢谢参与！"。

createBag(i) {
  let ran = Math.random()
  let money = Math.floor(ran * 1001)
  let desc = ''
  if (ran > this.prizeRatio) {
    money = 0
    desc = '谢谢参与！'
  }
  // ...
}

后记

这几天一直比较忙，趁着今天有空一些，参与了这个「兔了个兔」活动。

总的来说，从 idea 的产生到动手实现“兔子雨”的过程还是挺有意思的！在这里，预祝各位掘友兔年快乐，前兔似锦！

以上就是JS技巧动手实现红包兔子雨效果示例详解的详细内容，更多关于JS 实现红包兔子雨效果的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 基于React.js实现兔兔牌九宫格翻牌抽奖组件

    目录 基础页面结构 初始化数据 翻转逻辑 count 为 0 100% 中奖 效果图 基础页面结构 import React, { useEffect, useState } from "react" import './index.css' const FlopLuckyDraw9 = () => { return ( <> <div className="title"> 可抽奖 <label >{count}</l

  • 利用JavaScript制作一个搞怪的兔子动画效果

    目录 前言 实现 效果图 前言 Hello,掘友们好!又是一年新春之际,祝福大家兔年快乐!给大家介绍一个有趣的动效(兼容 IE),页面右下角有一只搞怪的兔子,鼠标在页面中悬停时,兔子会跟着做出不同的动作和表情.然后可以在页面中任意位置(离兔子太近不能发射,会伤到兔子)点击鼠标,将从兔子眼睛里发射炮弹,随之击中的是你的霉 运.压 力.贫 穷.疾 病. 实现 定义一个随机文本块. <p id="p1"></p> 定义兔子的构造函数. function HoverRa

  • 利用JavaScript创建一个兔年春节倒数计时器

    目录 如何在 JavaScript 中构建倒数计时器 第1步:创建倒计时输入框 第2步:倒数计时器的基本结构 第 3 步:使用 CSS 设计 JavaScript 定时器 第四步:简单倒数计时器的JavaScript 我们可以通过多种方式构建 JavaScript 倒数计时,我在本教程中展示的这个兔年春节倒数计时器 是由 HTML CSS 和 JavaScript 创建的. 它的工作方式非常简单,需要两种类型的时间.我们要运行倒计时的当前时间和特定时间,必须手动添加计时器倒计时,JavaScri

  • javascript实现移动端红包雨页面

    本文实例为大家分享了js实现移动端红包雨页面的具体代码,供大家参考,具体内容如下 实习的效果如下: 具体代码如下 html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=

  • JavaScript Html实现移动端红包雨功能页面

    JavaScript Html实现移动端红包雨功能页面

    本文实例为大家分享了Html实现移动端红包雨功能页面的具体代码,供大家参考,具体内容如下 实现效果如下: 具体代码如下 html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

  • js+css实现红包雨效果

    本文实例为大家分享了js实现红包雨展示的具体代码,供大家参考,具体内容如下 1.html部分 红包的样子,先写一个模版在页面上 <div class="hide"> <div class="RedPackage__Box js-RedPackageBox" data-txt> <img src="./images/redPackage.png" alt=""> </div> &l

  • JavaScript+Canvas模拟实现支付宝画年兔游戏

    目录 动手前的思路 思考1.如何让鼠标只能在特定区域内画画? 思考2.如何让绘制的图画动起来 思考3.如何撤销上一步操作 思考4.如何判断线条绘制完毕 关键步骤 接近过年了,支付宝的集福的活动又开始了,集美们的五福集齐了没有.每年的集福活动都有一些小游戏,今年也不例外,画年画就是其中之一,本篇用canvas来写一个画年兔的游戏. 动手前的思路 画年画游戏规则是:跟着特定轮廓画出线条来. 思考1.如何让鼠标只能在特定区域内画画? 首先要获取到这个轮廓区域所在画布上的位置,判断鼠标绘画的位置是否在指

  • JS技巧动手实现红包兔子雨效果示例详解

    目录 前言 展示效果 技术栈 思考与实现 红包下落效果 生成红包雨 打开红包效果 兔子雨效果 拓展 设置中奖概率 后记 前言 人生天地之间,若白驹过隙,忽然而已.不知不觉中,2022年已然逝去,2023年也过去了半个月了.看到「兔了个兔」这个活动几天了,不过这周比较忙,没时间参与. 心血来潮,捣鼓了一晚上,实现一个兔年的红包雨(兔子雨)效果~ 展示效果 技术栈 Vue2 SCSS:实现红包雨(兔子雨)效果.按钮交互效果等. 思考与实现 首先,思考一下最终的展示效果:在屏幕上会有很多随机下落的兔子

  • JS技巧多状态页面中的mock方案详解

    目录 引言 技术选型 业务逻辑改造 Eruda 插件 Mock 数据整理 引言 我们有时候会遇到一个业务页面存在很多个状态,甚至子状态,比如订单详情就是其中的典型,涉及从订单创建到订单结束,以及售后等流程.维护起来每个状态对应一份数据,虽然我们 QA 提供了数据构造平台,但构造一份对应状态的数据还是需要花费不少时间,而且串行流程一旦出错的话只能重新来一遍. 后期维护阶段也不容易构造对应状态的数据,导致排查页面问题比较耗时. 另外一个问题就是从头熟悉业务的话成本比较高,如果有一个直观的页面能够看到

  • JS技巧Canvas 性能优化脏矩形渲染实例详解

    目录 正文 画布该如何更新? 脏矩形渲染原理 脏矩形渲染实现 性能测试 结尾 正文 使用 Canvas 做图形编辑器时,我们需要自己维护自己的图形树,来保存图形的信息,并定义元素之间的关系. 我们改变画布中的某个图形,去更新画布,最简单的是清空画布,然后根据图形树将所有图形再绘制一遍,这在图形较少的情况下是没什么问题的.但如果图形数量很多,那绘制起来可能就出现卡顿了. 那么,有没有什么办法来优化一下?有,脏矩形渲染. 画布该如何更新? 这里我们假设这么一个场景,画布上绘制了随机位置大量的绿球,然

  • vue+three.js实现炫酷的3D登陆页面示例详解

    vue+three.js实现炫酷的3D登陆页面示例详解

    目录 前言: Three.js的基础知识 关于场景 关于光源 关于相机(重要) 关于渲染器 完善效果 创建一个左上角的地球 使地球自转 创建星星 使星星运动 创建云以及运动轨迹 使云运动 完成three.js有关效果 结语 前言: 大家好,我是xx传媒严导(xx这两个字请自行脑补) . 该篇文章用到的主要技术:vue3.three.js 我们先看看成品效果: 高清大图预览(会有些慢): 座机小图预览: 废话不多说,直接进入正题 Three.js的基础知识 想象一下,在一个虚拟的3D世界中都需要什

  • JS的时间格式化和时间戳转换函数示例详解

    JS的时间格式化和时间戳转换函数 //格式化时间 function dateFormat(fmt,date){ var o = { "M+" : date.getMonth()+1, //月份 "d+" : date.getDate(), //日 "h+" : date.getHours(), //小时 "m+" : date.getMinutes(), //分 "s+" : date.getSeconds

  • Android Flutter实现3D动画效果示例详解

    Android Flutter实现3D动画效果示例详解

    目录 前言 AnimatedWidget 简介 3D 旋转动画的实现 总结 前言 上一篇我们介绍了 Animation 和 AnimationController 的使用,这是最基本的动画构建类.但是,如果我们想构建一个可复用的动画组件,通过外部参数来控制其动画效果的时候,上一篇的方法就不太合适了.在 Flutter 中提供了 AnimatedWidget 组件用于构建可复用的动画组件.本篇我们用 AnimatedWidget 来实现组件的3D 旋转效果,如下图所示. AnimatedWidge

  • JS前端中的设计模式和使用场景示例详解

    目录 引言 策略模式 1.绩效考核 2.表单验证 策略模式的优缺点: 代理模式 1.图片懒加载: 2.缓存代理 总结 引言 相信大家在日常学习和工作中都多多少少听说/了解/使用过 设计模式,我们都知道,使用恰当的设计模式可以优化我们的代码,那你是否知道对于前端开发哪些 设计模式 是日常工作经常用到或者必须掌握的呢?本文我将带大家一起学习下前端常见的设计模式以及它们的 使用场景!!! 本文主讲: 策略模式 代理模式 适合人群: 前端人员 设计模式小白/想知道如何在项目中使用设计模式 策略模式 策略

  • JS前端二维数组生成树形结构示例详解

    目录 问题描述 实现步骤 完整代码 问题描述 前端在构建国家的省市区结构时,接口返回的不是树形结构,这个时候就需要我们进行转化.以下数据为例 [ [ { "districtId": 1586533852834, "parentCode": "000", "nodeCode": "000001", "name": "浙江省", "districtType&qu

  • JS实现微信播音效果示例详解

    目录 需要实现的效果 图片切换轮播法 CSS实现 需要实现的效果 图片切换轮播法 这个功能其实是我刚毕业的时候实现的,那也是5年前的事情了,受限于当时的水平,仅仅是实现了,其他啥都不是.相当简单. 当初微信的声音条还是竖状的,所以依旧按照但是的样子来实现. 看下面的这个图片就知道了,甚至于代码都不用贴

  • JS前端画布与组件元信息数据流示例详解

    目录 正文 拓展应用状态与静态方法 总结 正文 接下来需要解决两个问题: 可视化搭建的其他业务元素如何与画布交互.比如拓展属性配置面板.图层列表.拖拽添加组件.定位锚点.主题等等. runtimeProps 如何访问到当前组件实例的 props. 这两个问题非常重要,而恰好又可以通过良好的数据流设计一次性解决,接下来让我们分别分析讨论一下. 问题一:可视化搭建的其他业务元素如何与画布交互.比如拓展属性配置面板.图层列表.拖拽添加组件.定位锚点.主题等等 需要设计一个 Hooks API,可以访问

随机推荐