Чистый css эффект симуляции снега

CSS

Эффект соответствует названию, и вы, должно быть, видели снег (кроме южан, ха-ха), но эффект снега — это просто название типа эффекта, который может представлять собой некоторые эффекты движения свободного падения, такие как дождь из красных конвертов. статья использует чистыйcssИмитация эффекта снега.

下雪

1. Введение

Из-за активности продукта компании необходимо смоделировать эффект снега. Браузеры реализуют анимациюcss3а такжеcanvas(а такжеgif), для сравненияcss3а такжеcanvasПреимущества и недостатки:

  1. Степени свободы анимации:canvasпобедить;
  2. сложность:canvasпобедить;
  3. совместимость:canvasпобедить;
  4. представление:css3победить (requestAnimationFrameаппаратное ускорение).

В связи с определенными требованиями к производительности,canvasВ сравненииcss3Будет больше вычислений и производительность может быть не очень хорошей, поэтому выбирайтеcss3Имитация эффекта снега (пс: доступноcssПроблема, которую нужно решить, не обязательноjavascriptрешено, ха-ха).

прикрепить адрес

2. Принцип

В этой статье используетсяcss3изanimation. дляdomдобавление элементаanimationСвойства могут имитировать анимацию, как на примере w3school:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>animation</title>
  <style>
    .animation{
      width:100px;
      height:100px;
      background:red;
      position:relative;
      animation:mymove 5s infinite;
      -webkit-animation:mymove 5s infinite;
    }
    @keyframes mymove{
      from {
        left:0px;
      }
      to {
        left:200px;
      }
    }
  </style>
</head>
<body>
  <div class="animation"></div>
</body>
</html>

Конечно, это может сделать каждый, но есть проблема, что снег - это не местонахождение машины, а скорость и медлительность, амплитуда качания и неопределенность во времени. рационально.

  1. Случайная начальная точка снега в браузере;
  2. Скорость снега случайна;
  3. Время от начала снега до его падения на землю является случайным (случайным является время задержки и случайное время всего процесса снегопада);
  4. Качайтесь случайным образом во время снегопада.

Мы можем найти соответствующие свойства этих случайностей в CSS:

  1. Отправная точка:positionЛевая и правая ориентация (в анимации мы обычно используем позиционирование, потому что это может уменьшить ненужную перестановку и перерисовку);
  2. скорость:animation-timing-function(обеспечивает богатые атрибуты скорости);
  3. время:animation-durationа такжеanimation-delay;
  4. качать:transform: translateX()(смещение в горизонтальном направлении).

Некоторые люди могут спросить, эти атрибуты не случайны, не похожиMath.randomкак случайная функция. Давайте подумаем в другом направлении: случайность, упомянутая в этой статье, — это случайный снег, а не свойства случайного снега. Время падения, скорость падения и диапазон качания каждого снега фиксированы, а время падения, скорость падения и диапазон качания различаются для разных снегов, поэтому эффект достигается.

Понимая это, остается последний вопрос: как придать каждому снегу разное время падения, скорость падения и амплитуду колебания? Здесь мы используем истинную случайную функциюMath.random, используйте настраиваемый атрибут данных для соответствияMath.randomЭффект анимации можно определить, сопоставив правила со свойствами css.

3. Создание формы снега

3.1 Линейный градиент

一条

.linear{
  width: 100px;
  height: 100px;
  background: linear-gradient(0, green 40%, red 40%, red 60%, green 60%);
}

3.2 Несколько линейных градиентов для рисования снежинок

多条

.linear{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: linear-gradient(0, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),
    linear-gradient(45deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%),
    linear-gradient(90deg, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%);
}

4. Создайте снежную анимацию

я используюsassнаписаноcssДля построения анимации, по сути, язык не имеет значения, упор делается на принцип.

4.1 отправная точка

@for $i from 1 through 100 {
  .animation[data-animation-position='#{$i}'] {
    left: #{$i}vw;
  }
}

использовать здесьsassФункция цикла для создания совпадений от 1 до 100classназванныйanimationи селектор атрибутов[data-animation-position=1~100vw]значение, например, мы хотим, чтобы элементleftдля50vw, просто добавьclassимяdata-animation-position=50vw. Здесь следует отметить два момента:

  1. Диапазон 1~100vw: Обратите внимание, что устройствоvw, мы хотим, чтобы начальная точка снежинки появилась в любом месте в горизонтальном направлении, иvwразделить экран на равные части100доля,100vwполноэкранный режим;
  2. Зачем нам зацикливать от 1 до 100: Только так мы сможем сопоставить нужные нам значения в диапазоне.

4.2 Скорость

$timing: (
  linear: linear,
  ease: ease,
  ease-in: ease-in,
  ease-out: ease-out,
  ease-in-out: ease-in-out
);

@each $key, $value in $timing {
  .animation[data-animation-timing='#{$key}'] {
    transition-timing-function: $value;
  }
}

4.3 Время

Время включает время движения анимации и время задержки.

@for $i from 1 through 4 {
  .animation[data-animation-delay='#{$i}'] {
    animation-delay: #{$i}s;
  }
}
@for $i from 4 through 8 {
  .animation[data-animation-duration='#{$i}'] {
    animation-duration: #{$i}s;
  }
}

4.4 Качели

Снег состоит из двух анимаций, одна падаетfallи качелиswing, анимация падения исправлена, только качание должно быть случайным, поэтому я настроил правила сопоставления атрибутов, и оно может качаться случайным образом.

@for $i from 1 through 4 {
  .animation[data-animation-name='#{$i}'] {
    animation-name: fall, swing#{$i};
  }
}
@for $i from 1 through 4 {
  @keyframes swing#{$i}{
    25% {
      transform: translateX(-#{$i * 10}px);
    }
    50% {
      transform: translateX(#{$i * 10}px);
    }
    75%{
      transform: translateX(-#{$i * 10}px);
    }
    100%{
      transform: translateX(#{$i * 10}px);
    }
  }
}

5. Случайность

использовать здесьreactЧтобы продемонстрировать код или это предложение, если вы понимаете принцип, язык на самом деле не важен.

5.1 Элемент снежинки

<div className='page'>
  {
    Array(10).fill().map((v, i) => (
      <span
        key={i}
        className='animation span'
        data-animation-position={this.position()}
        data-animation-timing={this.timing()}
        data-animation-delay={this.delay()}
        data-animation-duration={this.duration()}
        data-animation-name={this.name()}
      />
    ))
  }
</div>

Наш элемент снежинки содержит несколько значений свойств:

  1. data-animation-position: Запуск бита;
  2. data-animation-timing: скорость снегопада;
  3. data-animation-delay: задерживать;
  4. data-animation-duration: общее время снегопада;
  5. data-animation-name: Анимация падения и анимация качания.

5.1 Функция случайного диапазона

random(min, max){
  return Math.floor(Math.random() * (max - min + 1) + min)
}

5.2 Случайное назначение атрибутов

position(){
  return this.random(1, 100)
}
delay(){
  return this.random(1, 4)
}
duration(){
  return this.random(4, 8)
}
name(){
  return this.random(1, 4)
}
timing(){
  return ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'][this.random(0, 4)]
}

6. Резюме

Xinsan Чжан Синьсюй не имеет правил: ни ширины, ни изображения, ни плавающего положения.

Я лично думаю, что если вам нужно добавить четвертое нет, это может бытьбезjsХа-ха, шучу). вместе сcssразвития, его область можно охарактеризовать как очень широкую, глубокую и незаменимую Во многих случаях, еслиcssПри правильном использовании сэкономит много времени иjsКод, сложность реализации всей функции будет уменьшаться, и поощрять друг друга.

Категории