javascript - 红包雨H5实现方法

Question

好多电商都会有红包雨的活动，就是红包从屏幕上方飘落，在京东上抓包找到了一个抓螃蟹的例子，网址为:http://h5.m.jd.com/active/kpd...
查看被压缩的代码，觉得，是通过js动态设置transform属性值。但是从性能方面看，频繁的dom读取并不好，不知道具体是如何实现的。还有红包到屏幕的边缘会隐藏，这个是如何实现的。麻烦大神们能给个解答~
把我的问题重新整理一下：
1、频繁的dom操作，来设置css属性，产生一个位移值，实现红包下落的效果是否可行。
2、如何做到红包下落到边缘，红包隐藏的？
ps:扒代码的不想要，只想了解原理。如果能提供github上开源代码，就再好不过了！

Answer 1

去找一个微信飞机大战的js，把核心代码扣出来就是你想要的。

Answer 2

如果是红包雨的话，感觉是先计算出页面的宽度和高度，确保红包出现或者消失的都在这个页面里面，然后用transition来确定下落时间，用translate确定下落距离。这是我自己的理解。

Answer 3

1.使用DOM来模拟是可行的，不过频繁操作DOM效果可能比使用canvas要差一点，最主要的是要注意红包出了可视区域一定要remove掉，DOM元素以及绑定的事件都需要remove，不然会造成内存泄漏，页面异常卡顿。
2.碰撞检测，每个红包是一个对象，检测该对象是否在可视区域，可以通过该对象的x, y与浏览器的宽、高进行比较，具体逻辑不再赘述。

提供两个repo吧：
1.https://github.com/navyxie/re... 基于canvas实现的，本地跑的时候注意修改下'index.html'中引用js路径，路径写错了。
2.https://github.com/kopipejst/... 基于DOM实现的，可以直接看在线demo。

Answer 4

看到原文的最新连接了