今天在校园招聘上被问到的问题,用JS写出雪花的效果。我打算使用多种方法来试试如何实现雪花。
这是目前按照网上某种思路模仿的第一种雪花,不太好看,但是大致意思清楚。
思路1:该思路直接由JS实现。
- 雪花对象的定时创建 + 雪花对象的下落方法(包含消失判定)
- 雪花创建的位置和雪花形状的建立 + 雪花的速度和雪花可能的左右移动和消失
缺点:
- 不好看
- 兼容性
- 雪花方法不好,需要实时检索元素,应该改用数组维持
Document
思路2:该思路由JS和CSS3共同实现。
- 雪花对象的创建 + 雪花的方法
- 用CSS3完善雪花的渐隐和出现动画 + 雪花固定的top值增加
缺点:
- 依旧没有用数组来维持,比较占内存
- 不够好看
- 兼容性
Document
思路3:使用数组维持雪花对象,在一开始的时候便随机创建好每个雪花的动态属性
原型模式创建的雪花对象 + 雪花方法
优点:数组维持
缺点:
- 没有用上 window.requestAnimationFrame方法
mySnow- oH!!!Sexy!
思路4: 使用canvas来实现雪花特效
待更...