乐趣区

关于javascript:冬天到了给你的网站下个雪吧

前言

女朋友常逛的设计网站这两天页面上多了下雪的成果,于是问我我的网站能下雪吗,作为一个程序员我个别会说实现不了,然而作为男朋友,不能说不行。

雪咱们能够应用 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)
}

成果如下:

动起来

雪动起来能力叫下雪,动起来很简略,一直扭转 xy坐标就能够了,给 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. 眼前的雪

随机性的抉择一点雪给它较大的体积、透明度和速度,而后再应用 css33D透视成果,把它的 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。

退出移动版