好多电商都会有红包雨的活动,就是红包从屏幕上方飘落,在京东上抓包找到了一个抓螃蟹的例子,网址为:http://h5.m.jd.com/active/kpd...
查看被压缩的代码,觉得,是通过js动态设置transform属性值。但是从性能方面看,频繁的dom读取并不好,不知道具体是如何实现的。还有红包到屏幕的边缘会隐藏,这个是如何实现的。麻烦大神们能给个解答~
把我的问题重新整理一下:
1、频繁的dom操作,来设置css属性,产生一个位移值,实现红包下落的效果是否可行。
2、如何做到红包下落到边缘,红包隐藏的?
ps:扒代码的不想要,只想了解原理。如果能提供github上开源代码,就再好不过了!
去找一个微信飞机大战的js,把核心代码扣出来就是你想要的。
如果是红包雨的话,感觉是先计算出页面的宽度和高度,确保红包出现或者消失的都在这个页面里面,然后用transition来确定下落时间,用translate确定下落距离。这是我自己的理解。
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。看到原文的最新连接了