冬天到了，女朋友想让我的网站也下雪，我立马打开电脑撸代码…
关注 前端瓶子君，回复“交流”
加入我们一起学习，天天进步
转自：街角小林
juejin.cn/post/6910857740327845901
前言
女朋友常逛的设计网站这两天页面上多了下雪的效果，于是问我我的网站能下雪吗，作为一个程序员我一般会说实现不了，但是作为男朋友，不能说不行。
雪
雪我们可以使用span标签和css的径向渐变简单意思一下：
.snow {display: block;width: 100px;height: 100px;background-image: radial-gradient(#fff 0%, rgba(255, 255, 255, 0) 60%);border-radius: 50%;
}
复制代码
效果如下：
很多雪
一片雪是不够的，成千上万才浪漫，世界上没有两片相同的雪花，所以每片雪都有自己的大小位置速度等属性，为此先创建一个雪花类：
class Snow {constructor (opt = {}) {// 元素this.el = null// 直径this.width = 0// 最大直径this.maxWidth = opt.maxWidth || 80// 最小直径this.minWidth = opt.minWidth || 2// 透明度this.opacity = 0// 水平位置this.x = 0// 重置位置this.y = 0// 速度this.speed = 0// 最大速度this.maxSpeed = opt.maxSpeed || 4// 最小速度this.minSpeed = opt.minSpeed || 1// 浏览器窗口尺寸this.windowWidth = window.innerWidththis.windowHeight = window.innerHeightthis.init()}// 初始化各种属性init () {this.width = Math.floor(Math.random() * this.maxWidth + this.minWidth)this.opacity = Math.random()this.x = Math.floor(Math.random() * (this.windowWidth - this.width))this.y = Math.floor(Math.random() * (this.windowHeight - this.width))this.speed = Math.random() * this.maxSpeed + this.minSpeed}// 设置样式setStyle () {this.el.style.cssText = `position: fixed;left: 0;top: 0;display: block;width: ${this.width}px;height: ${this.width}px;opacity: ${this.opacity};background-image: radial-gradient(#fff 0%, rgba(255, 255, 255, 0) 60%);border-radius: 50%;z-index: 9999999999999;pointer-events: none;transform: translate(${this.x}px, ${this.y}px);`}// 渲染render () {this.el = document.createElement('div')this.setStyle()document.body.appendChild(this.el)}
}
复制代码
init方法用来生成随机的初始大小、位置、速度等属性，在浏览器窗口内new100片试试：
let snowList = []
for (let i = 0; i < 100; i++) {let snow = new Snow()snow.render()snowList.push(snow)
}
复制代码
效果如下：
动起来
雪动起来才能叫下雪，动起来很简单，不断改变x和y坐标就可以了，给snow类加个运动的方法：
class snow {move () {this.x += this.speedthis.y += this.speedthis.el.style.left = this.x + 'px'this.el.style.top = this.y + 'px'}
}
复制代码
接下来使用requestAnimationFrame不断刷新：
moveSnow () {window.requestAnimationFrame(() => {snowList.forEach((item) => {item.move()})moveSnow()})
}
复制代码
效果如下，因为速度是正数，所以整体是往右斜的：
可以看到动起来了，但是出屏幕就不见了，所以雪是会消失的对吗？要让雪不停很简单，检测雪的位置，如果超出屏幕了就让它回到顶部，修改一下move方法：
move () {this.x += this.speedthis.y += this.speed// 完全离开窗口就调一下初始化方法，另外还需要修改一下init方法，因为重新出现我们是希望它的y坐标为0或者小于0，这样就不会又凭空出现的感觉，而是从天上下来的if (this.x < -this.width || this.x > this.windowWidth || this.y > this.windowHeight) {this.init(true)this.setStyle()}this.el.style.left = this.x + 'px'this.el.style.top = this.y + 'px'}
复制代码
init (reset) {// ...this.width = Math.floor(Math.random() * this.maxWidth + this.minWidth)this.y = reset ? -this.width : Math.floor(Math.random() * this.windowHeight)// ...}
复制代码
这样就能源源不断的下雪了：
优化
1.水平速度
水平和垂直方向的速度是一样的，但是看起来有点太斜了，所以调整一下，把水平速度和垂直速度区分开来：
class Snow {constructor (opt = {}) {// ...// 水平速度this.sx = 0// 垂直速度this.sy = 0// ...}init (reset) {// ...this.sy = Math.random() * this.maxSpeed + this.minSpeedthis.sx = this.sy * Math.random()}move () {this.x += this.sxthis.y += this.sy// ...}
}
复制代码
2.左下角没有雪
因为整体向右倾斜，所以左下角大概率没有雪，这可以通过让雪随机出现在左侧来解决：
init (reset) {// ...this.x = Math.floor(Math.random() * (this.windowWidth - this.width))this.y = Math.floor(Math.random() * (this.windowHeight - this.width))if (reset && Math.random() > 0.8) {// 让一小部分的雪初始化在左侧this.x = -this.width} else if (reset) {this.y = -this.width}// ...
}
复制代码
3.眼前的雪
随机性的选择一点雪给它较大的体积、透明度和速度，然后再使用css3的3D透视效果，把它的z轴数值调大一点，这样的感觉就好像是在眼前划过的一样：
<body style="perspective: 500;-webkit-perspective: 500"></body>
复制代码
class Snow {constructor (opt = {}) {// ...// z轴数值this.z = 0// 快速划过的最大速度this.quickMaxSpeed = opt.quickMaxSpeed || 10// 快速划过的最小速度this.quickMinSpeed = opt.quickMinSpeed || 8// 快速划过的宽度this.quickWidth = opt.quickWidth || 80// 快速划过的透明度this.quickOpacity = opt.quickOpacity || 0.2// ...}init (reset) {let isQuick = Math.random() > 0.8this.width = isQuick ? this.quickWidth : Math.floor(Math.random() * this.maxWidth + this.minWidth)this.z = isQuick ? Math.random() * 300 + 200 : 0this.opacity = isQuick ? this.quickOpacity : Math.random()// ...this.sy = isQuick ? Math.random() * this.quickMaxSpeed + this.quickMinSpeed : Math.random() * this.maxSpeed + this.minSpeed// ...}move () {// ...this.el.style.transform = `translate3d(${this.x}px, ${this.y}px, ${this.z}px)`}
}
复制代码
4.鹅毛大雪
雪花嘛，轻如鹅毛，鹅毛是怎么飘的？是不是左右摆动的飘？那我们也可以选择一部分的雪花让它跟鹅毛一样飘，左右摇摆很简单，速度一会加一会减就可以了：
class Snow {constructor (opt = {}) {// ...// 是否左右摇摆this.isSwing = false// 左右摇摆的步长this.stepSx = 0.03// ...}// 随机初始化属性init (reset) {// ...this.isSwing = Math.random() > 0.8// ...}move () {if (this.isSwing) {if (this.sx >= 1 || this.sx <= -1) {this.stepSx = -this.stepSx}this.sx += this.stepSx}// ...}
}
复制代码
除了上述这种方法，左右摇摆还有一种方式，就是使用正弦或余弦函数，因为它们的曲线翻转90度就是左右摇摆：
我们使用正弦函数，公式为：y=sin(x)，x的值是弧度表示，只要一直增加就可以了，y的值用来修改雪花的水平方向的速度变化步长：
class Snow {constructor (opt = {}) {// ...// 是否左右摇摆this.isSwing = false// 左右摇摆的正弦函数x变量this.swingRadian = 0// 左右摇摆的正弦x步长this.swingStep = 0.01// ...}init (reset) {// ...this.swingStep = 0.01 * Math.random()}move () {if (this.isSwing) {this.swingRadian += this.swingStepthis.x += this.sx * Math.sin(this.swingRadian * Math.PI) * 0.2} else {this.x += this.sx}// ...}
}
复制代码
因为正弦函数y的值是从1变化到-1，摆动幅度太了，所以乘了个小数0.2缩小一点，想要幅度小一点，还有一个方法是不要使用整个正弦曲线，可以从中截取一个适合的区间大小，比如就让x的值在0.9π到1.1π之前变化：
class Snow {constructor (opt = {}) {// ...// 是否左右摇摆this.isSwing = false// 左右摇摆的正弦函数x变量this.swingRadian = 1// 需要改成一个中间值// 左右摇摆的正弦x步长this.swingStep = 0.01// ...}init (reset) {// ...this.swingStep = 0.01 * Math.random()this.swingRadian = Math.random() * (1.1 - 0.9) + 0.9// 也让它随机一下}move () {if (this.isSwing) {if (this.swingRadian > 1.1 || this.swingRadian < 0.9) {this.swingStep = -this.swingStep}this.swingRadian += this.swingStepthis.x += this.sx * Math.sin(this.swingRadian * Math.PI)} else {this.x += this.sx}// ...}
}
复制代码
5.下的慢一点
既然给水平加了曲线，垂直方向上是不是也可以改成非匀速呢？当然可以，区别是速度得一直是正的，不然就要出现反自然现象了，改变速度曲线同样可以使用正余弦，上面我们使用了0.9π到1.1π之间的正弦曲线，根据上图可以发现对应的余弦曲线都是负的，趋势是先慢后快，所以可以利用这一段来改变垂直方向的速度：
move () {if (this.isSwing) {if (this.swingRadian > 1.1 || this.swingRadian < 0.9) {this.swingStep = -this.swingStep}this.swingRadian += this.swingStepthis.x += this.sx * Math.sin(this.swingRadian * Math.PI)this.y -= this.sy * Math.cos(this.swingRadian * Math.PI)// 因为速度都是负的，所以改成-} else {this.x += this.sxthis.y += this.sy}// ...
}
复制代码
6.在最上面
为了防止为页面上原本层级更高的元素遮挡，给雪花的样式加一个很大的层级：
render () {this.el = document.createElement('div')this.el.style.cssText = `// ...z-index: 9999999999999;`document.body.appendChild(this.el)
}
复制代码
7.看不见我
修改了层级，所以雪花会在页面的最上层，那么可能会挡住其他元素的鼠标事件，需要禁止它响应鼠标事件：
render () {this.el = document.createElement('div')this.el.style.cssText = `// ...pointer-events: none;`document.body.appendChild(this.el)}
复制代码
8.更好一点
使用性能更好的transform属性来做动画：
render () {this.el = document.createElement('div')this.el.style.cssText = `left: 0;top: 0;transform: translate(${this.x}px, ${this.y}px);`document.body.appendChild(this.el)
}
复制代码
move () {// ...// this.el.style.left = this.x + 'px'// this.el.style.top = this.y + 'px'this.el.style.transform = `translate(${this.x}px, ${this.y}px)`
}
复制代码
当然，最好的方式是用canvas来画。
最终效果：
下雨&雨夹雪
下完雪，接下来顺便下个雨，雨和雪差不多，都是从天上掉下来，但是雨的速度更快，通常也不会左右摇摆什么的，方向也基本是一致的，先来修改一下样式：
setStyle () {this.el.style.cssText = `// ...width: 1px;// ...`
}
复制代码
很简单，只要把宽度写死为1就行了：
接下来把摇摆去掉：
move () {this.x += this.sxthis.y += this.sy// ...
}
复制代码
效果如下：
可以发现雨是竖着在水平移动，显然是不行的，需要让它倾斜一定的角度，和运动方向保持一致，这个也很简单，算一下斜率，水平速度除以垂直速度：
move () {// ...this.el.style.transform = `translate(${this.x}px, ${this.y}px) ${this.getRotate(this.sy, this.sx)}`
}
getRotate(sy, sx) {return `rotate(${sx === 0 ? 0 : (90 + Math.atan(sy / sx) * (180 / Math.PI))}deg)`
}
复制代码
因为tan(θ)=sy/sx，θ=Math.atan(sy / sx)，因为雨的线段默认是从上到下垂直的，θ是代表和水平方向上的夹角，所以需要先旋转90度，再旋转夹角的度数，最后弧度转角度的公式为：角度=弧度*(180/π)。
雨和雪都实现了，让它们一起出来，就是雨夹雪了：
根据天气下雪
把上面的代码放到网站上就有下雪的效果了，另外也可以使用天气厂商的api，根据实时天气来下雪或者下雨，再实现一下太阳、乌云等效果，一个沉浸式天气就完成了，有兴趣的可自行实践。
完整代码
https://github.com/wanglin2/snow
最后
欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
欢迎关注「前端瓶子君」，回复「算法」，加入前端算法源码编程群，每日一刷（工作日），每题瓶子君都会很认真的解答哟！
回复「交流」，吹吹水、聊聊技术、吐吐槽！
回复「阅读」，每日刷刷高质量好文！
如果这篇文章对你有帮助，「在看」是最大的支持
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持
冬天到了，女朋友想让我的网站也下雪，我立马打开电脑撸代码…相关推荐
- 疫情过去女朋友想去重庆玩，python批量爬取小猪短租重庆民宿信息
疫情过去女朋友想去重庆玩,python批量爬取小猪短租重庆民宿信息 随着时间的流逝,在中国共产党的领导,全国人民的共同努力下,疫情逐渐受到了控制,逐渐好转,复工,开学有望.最近在和女朋友的闲聊当中得知 ...
- 女朋友想吃好吃的她还不告诉我吃什么应该怎么办
如果你的女朋友想吃好吃的,但是她没有告诉你她想吃什么,那么你可以问她是否有什么特别的口味或喜欢的食物,如果她还是不告诉你,那么你可以提供一些你认为很好吃的选择,让她从中选择.最重要的是要表示出你的关心 ...
- 华为手撕代码c语言题目,想去面试？这10道最高频的手撕代码题都会了吗？
原标题:想去面试?这10道最高频的手撕代码题都会了吗? 来源:Python与算法之美 ID:Python_Ai_Road 作者:梁云1991 想去看机会?下面这10道最高频的手撕代码面试题都会了吗? ...
- 毛豆创想旗下战略部署网站盘点_彭世瑜_新浪博客
毛豆创想旗下战略部署网站盘点 目前,毛豆创想已开通四个网点,一个贴吧,一个淘宝店,和其他一些辅助渠道 1.毛豆社区:源于网络,乐于分享,我们只发布技术贴 网址:http://maodou. ...
- 想搭建自己的网站,应该从哪处入手呢？选择什么样配置的服务器捏？通过哪些手段赚取足够的维护网
第一个问题: 我也就是刚刚才有做自己的网站的想法,也想做得好一点,但是因为开发经验还是很少的嘛!所以不知道从哪里入手?是先选择符合网站的优秀框架(前后台),还是先做好需求分析,进行数据库设计等?我就很 ...
- 优质资源分享！有哪些看一眼就想收藏的小众网站？
今天,波老师苦思冥要分享什么好.最后想决定给大家分享10个每天值得一看的小众精品网站,这些网站虽然不被大众所熟知,但却可以让你全方面得到提升,还会让你大开眼界,打开新世界的大门,跟波老师一起来看看吧! ...
- 女朋友想进高校当老师，其实中学老师更适合他
点击上方蓝字关注「中产之路」 星友提问: 杭哥好,替女朋友咨询一下. 女友本科青岛大学,后保送至上海大学(211),现在读研二,目前有读博的打算,有以下几个考虑: 1.新加坡国立大学读博,读博费用较高 ...
- 女朋友想换情侣头像了，怎么办？【2万张图片满足要求】
爬虫实战:女朋友的命令不得不立马安排 前言 数据来源 数据爬取 完整代码 后序 前言 今天俺女朋友说她想换情侣头像了,但是没有啥可选的图片,我说你先别急,等我一会儿. 我冲冲冲赶紧爬取了2w张图片,随 ...
- 女朋友想要分手了,咱们怎么办?
这个是我在csdn的第一个和技术无关的文章,希望对某些朋友有些帮助. 当女朋友告诉你,自己似乎喜欢上了另一个人,你应该怎么办? 1 在某些时候,人会感觉五雷轰顶,感觉五雷轰顶是正常的,但是一定要克制自 ...
最新文章
- com.mysql.jdbc.PacketTooBigException: Packet for query is too large (1169 1024)
- concat mysql sql注入_sql注入-mysql注入基础及常用注入语句
- 2010年暑假送给大学生30句话
- python 加载与解析xml
- 通俗易懂解释知识图谱
- linux中使用ssh或scp时如何跳过RSA key fingerprint输入yes/no
- CodeForces - 566A Matching Names(字典树上贪心)
- lamp mysql开机自启_centos下设置自启动和配置环境变量的方法
- 如何让页面初始化的时候实现点击事件_辅助程序实现黑盒自动化测试的常见问题...
- 测试人必备实用技能：写出一份好的Bug报告
- PHP5.2\5.3 Xdebug 调试器配置及应用
- 微波遥感SNAP（一）——基于Sentinel-1雷达数据重建数字高程模型
- 架构之旅~一个操作的返回要有一个标准，看我的公用消息类
- 分库分表学习总结（1）——数据库中间件MyCat学习总结之MyCat入门简介
- 【云计算OpenStack-OpenStack Queens版本-遇错】基于OpenStack的云计算环境搭建
- 世纪佳缘 助手 免 邮票 群发 照片下载 信息检索等（完全功能版）
- 可用于保健食品的中药名单，卫生部关于进一步规范保健食品原料管理的通知...
- grabcut 实现过程
- 加权黑猩猩优化算法（WChOA）附Matlab代码
- 第五次作业：《国际贸易学》—WTO及区域经济一体化