Зима здесь, давайте снег ваш сайт

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)
}

Эффект следующий:

пошевеливайся

Снег можно назвать снегом только тогда, когда он движется, его очень просто перемещать, и он постоянно меняется.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 градусов для поворота влево и вправо:

img

Мы используем функцию синуса, формула: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 производителя погоды, чтобы сделать снег или дождь в соответствии с погодой в реальном времени, а затем реализовать эффекты солнца, темноты облака и т. д., и иммерсивная погода будет завершена.Да, вы можете попрактиковаться сами, если вам интересно.

Полный код находится наGitHub.com/Ван Линь2/Сунин….

Категории