共计 6921 个字符，预计需要花费 18 分钟才能阅读完成。
前言
女朋友常逛的设计网站这两天页面上多了下雪的成果，于是问我我的网站能下雪吗，作为一个程序员我个别会说实现不了，然而作为男朋友，不能说不行。
雪
雪咱们能够应用 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.innerWidth
this.windowHeight = window.innerHeight
this.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.speed
this.y += this.speed
this.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.speed
this.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.minSpeed
this.sx = this.sy * Math.random()}
move () {
this.x += this.sx
this.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.8
this.width = isQuick ? this.quickWidth : Math.floor(Math.random() * this.maxWidth + this.minWidth)
this.z = isQuick ? Math.random() * 300 + 200 : 0
this.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.swingStep
this.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.swingStep
this.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.swingStep
this.x += this.sx * Math.sin(this.swingRadian * Math.PI)
this.y -= this.sy * Math.cos(this.swingRadian * Math.PI)// 因为速度都是负的，所以改成 -
} else {
this.x += this.sx
this.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.sx
this.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。