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

  • 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制作一个搞怪的兔子动画效果

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

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

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

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

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

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

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

  • 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动画效果示例详解

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

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

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

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

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

  • three.js着色器材质的内置变量示例详解

    什么是着色器? 固定渲染管线: --标准的几何&光照(T&L)管线,功能是固定的,它控制着世界.视.投影变换及固定光照控制和纹理混合.T&L管线可以被渲染状态控制,矩阵,光照和采制参数.如果有了固定渲染管线,编写程序就比较容易了,因为所有的变换都是由固定渲染管线来完成的,但是缺点就是自由度低.固定渲染管线只能完成一些最基本的操作,如果想要做一些特殊的处理,就比较麻烦了. 可编辑渲染管线:--WebGL中不存在固定渲染管线,坐标变换必须全部由自己来做,这个记述了坐标变换的机制就叫做着

  • vue.js中methods watch和computed的区别示例详解

    目录 前言 介绍 一.作用机制上 二.从性质上 三.watch和computed的对比 四.methods不处理数据逻辑关系,只提供可调用的函数 五.从功能的互补上看待methods,watch和computed的关系 六.利用computed处理watch在特定情况下代码冗余的现象,简化代码 总结 computed watch 前言 这篇文章主要简述vue中的watch和computer区别,还有methods 首先,先说一下这几个不同在哪里,那当然是长得不一样啦~~~, 哈哈哈哈哈不开玩笑了

  • js在浏览器中的event loop事件队列示例详解

    目录 前言 认识一个栈两个队列 执行过程 简单例子 难一点的例子 总结 前言 以下内容是js在浏览器中的事件队列执行,与在nodejs中有所区别,请注意. 都说js是单线程的,不过它本身其实不是单线程,但是在浏览器中执行时只分配一个线程进行执行. 所以说js执行是单线程的,一次只能进行一项任务,就是一件任务一件任务做,做完一件做下一件. 认识一个栈两个队列 一个调用栈Stack. 一个宏队列,macrotask,也叫tasks. 一个微队列,microtask,也叫jobs. 执行过程 js就是

  • JS前端使用canvas动态绘制函数曲线示例详解

    目录 前言 第一步:绘制坐标系 1.如何确定 x 轴和 y 轴的边界值 2.不是传入多少网格数就是多少网格 3.如何让坐标原点位于画布中心 4.刻度总是会有浮点数 第二步:画函数曲线 第三步:绘制辅助线和交点坐标 第四步:平移 第五步:缩放 第六步:动态绘制曲线 第七步:模糊到高清 前言 不说废话,我们直入主题.先来看看读了这篇文章你将得到什么,就是下面这个东西啦(是不是很清晰很顺滑): 那具体要做什么呢,我们来简单拆解一下步骤: 绘制坐标系 绘制多条函数曲线 绘制辅助线和坐标点 支持平移.缩放

  • BootStrap的JS插件之轮播效果案例详解

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 案例 下面展示的就是此插件和相关组件制作的轮播案例. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class

随机推荐

其他