经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JS技巧动手实现红包兔子雨效果示例详解
来源:jb51  时间:2023/1/18 8:42:05  对本文有异议

前言

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

心血来潮,捣鼓了一晚上,实现一个兔年的红包雨(兔子雨)效果~ ??

展示效果

技术栈

  • Vue2
  • SCSS:实现红包雨(兔子雨)效果、按钮交互效果等。

思考与实现

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

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

红包下落效果

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

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

  1. <div class="bag"></div>
  2. .bag{
  3. width: 30px;
  4. height: 50px;
  5. background: linear-gradient(to bottom, #ff6a00, #ee0979);
  6. position: absolute;
  7. top: 0;
  8. left: 0;
  9. user-select: none;
  10. cursor: pointer;
  11. }

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

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

  1. .bag{
  2. animation: downBags 3s forwards linear;
  3. }
  4. // 红包的下落动画
  5. @keyframes downBags {
  6. 0% {
  7. top: 0;
  8. }
  9. 100% {
  10. top: 100vh;
  11. }
  12. }

生成红包雨

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

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

  1. init() {
  2. let count = 0
  3. let countT = setInterval(() => {
  4. if (count >= this.bagsNum) {
  5. clearInterval(countT)
  6. this.gameover = true
  7. return
  8. }
  9. this.createBag(count)
  10. count++
  11. }, 500);
  12. },
  13. createBag(i) {
  14. let ran = Math.random()
  15. let money = Math.floor(ran * 1001)
  16. let desc = ''
  17. if (ran > this.prizeRatio) {
  18. money = 0
  19. desc = '谢谢参与!'
  20. }
  21. let deg = 0
  22. if (this.isRabbitBG) {
  23. deg = Math.floor(ran * 30)
  24. if (ran > 0.5) {
  25. deg *= -1
  26. }
  27. }
  28. let param = {
  29. index: i,
  30. money,
  31. desc,
  32. from: '掘金',
  33. top: 0,
  34. left: `${Math.floor(Math.random() * this.maxW)}vw`,
  35. deg,
  36. show: true,
  37. }
  38. this.bags.push(param)
  39. },

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

打开红包效果

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

  1. .rotate{
  2. animation: rotateAni linear .3s infinite;
  3. }
  4. @keyframes rotateAni {
  5. from{
  6. transform:rotateY(180deg);
  7. }
  8. to{
  9. transform:rotateY(360deg);
  10. }
  11. }

兔子雨效果

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

  1. .bagRabbitBG{
  2. width: 70px;
  3. background: url(https://clemmensen.top/static/rabbit1.png) center / cover no-repeat;
  4. }
  5. createBag(i) {
  6. let ran = Math.random()
  7. // ...
  8. let deg = 0
  9. if (this.isRabbitBG) {
  10. deg = Math.floor(ran * 30)
  11. if (ran > 0.5) {
  12. deg *= -1
  13. }
  14. }
  15. // ...
  16. }

实际效果如下:

拓展

设置中奖概率

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

  1. createBag(i) {
  2. let ran = Math.random()
  3. let money = Math.floor(ran * 1001)
  4. let desc = ''
  5. if (ran > this.prizeRatio) {
  6. money = 0
  7. desc = '谢谢参与!'
  8. }
  9. // ...
  10. }

后记

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

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

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号