Как использовать css3 для реализации анимации очереди, такой как онлайн-трансляция

анимация CSS
Как использовать css3 для реализации анимации очереди, такой как онлайн-трансляция

Друг в группе раньше задавал такой вопрос, а как жеАпплетыреализовать подобноеЖивая платформапользователей выходят в интернетанимация очереди? Как интерфейсный инженер, решение состоит не более чем из следующих двух:

  1. использоватьjavascriptУправляйте стилем элементов в зависимости от условий для достижения анимации очереди
  2. С чистымcss3В сочетании с моделью привода данных.

Всем известно, что в современномWebВ разработке мы можем использоватьCssДля достижения эффекта старайтесь не использоватьJs, поэтому мы должны отдавать приоритет использованиюCss3достичь, но мы должны объединитьпоток данныхЧтобы добиться настоящей анимации очереди, мы можем использоватьФреймворк MVVMУдобная управляемая данными модель для управления направлением анимации.

И поскольку ядром анимации являетсяCss3, так что вАпплетыилиVue/ReactНа самом деле принципы реализации схожи, и вам не нужно беспокоиться о стеке технологий. Ниже представлена ​​диаграмма эффекта после внедрения:Если приведенный выше gif недоступен, вы можете просмотреть статическое изображение ниже:

Фактически, этот эффект используется во многих местах, таких какСтанция БШквал определенной музыкальной платформы, онлайн-анимация поклонников определенной музыкальной платформы, прямая трансляция определенного звука и т. д., находясь вВеб-сторона, как мы можем этого добиться?Далее автор шаг за шагом проведет вас, чтобы добиться такого анимационного эффекта.

текст

Чтобы добиться вышеуказанного эффекта анимации, нам нужно сначала проанализировать анимацию.Структура анимации приведенного выше изображения выглядит следующим образом:Анимация делится на следующие два процесса:

  • Анимация входа пользователя
  • Пользовательская анимация затухания

Еще одна деталь заключается в том, что независимо от того, сколько пользователей входит, все они входят с одной и той же позиции.В это время позиция предыдущего пользователя будет двигаться вверх, как показано на следующем рисунке:Таким образом, лучший способ добиться этого эффекта — использовать позиционирование, такое как абсолютное позиционирование (absolute) или фиксированное позиционирование (fixed) и установите егоbottomзначение, как показано в следующем коде:

.animateWrap {
    position: absolute;
    bottom: 40%;
    left: 12px;
}

Приведенная выше информация о местоположении предназначена только для справки, конкретное значение может быть изменено в соответствии с вашими потребностями.bottomПреимущество заключается в том, что после добавления дочерних элементов контейнера предыдущий элемент будет автоматически перемещен вверх, поэтому нам не нужно вручную устанавливать его значение смещения.

Реализовать анимацию входа

Если мы хотим получить анимацию входа пользователя на рисунке выше, мы можем использоватьCss3анимация переходаtransition, вы также можете использоватьanimationАнимация, в связи с удобством использования сцены, здесь используемanimationАнимация, сначала давайте напишем структуру дома:

 <div className={styles.animateWrap}>
    <div className={styles.animate} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>李老师上线</span></div>
    <div className={styles.animate} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>李老师上线</span></div>
    <div className={styles.animate} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>李老师上线</span></div>
  </div>

Приведенный выше код указывает, что создан контейнер анимации и добавлены пользователи 2. Здесь мы определяем ключевую анимацию следующим образом:

.animate {
      margin-bottom: 10px;
      border-radius: 20px;
      background-color: rgba(0,0,0, .3);
      animation: moveIn 1.2s;
    }
@keyframes moveIn {
  0% {
    transform: translateX(calc(-100% - 12px));
  }
  100% {
    transform: translateX(0);
  }
}

Вышеупомянутое предназначено для реализации анимации движения элемента вправо, но в это время анимация, которую мы видим, появляется в то же время, мы хотим применить ее к реальной сцене, она должна быть сквозной.socketили черезпо-круговойПолучить асинхронные данные, чтобы мы могли использоватьsetIntervalЧтобы смоделировать этот процесс, Еще одна деталь заключается в том, что мы полностью отображаем только 2 части пользовательских данных в анимации, а избыточные данные будут исчезать и скрываться, поэтому нам нужно перехватить данные, код выглядит следующим образом:

  const [user, setUser] = useState<Array<string>>([])
  useEffect(() => {
    let MAX_USER_COUNT = 2;
    let timer = setInterval(() => {
      setUser(prev => {
        prev.push(Date.now() + '')
        if(prev.length > MAX_USER_COUNT + 1){
          prev.shift()
          return [...prev]
        }else {
          return [...prev]
        }
      })
    }, 2000)
  }, [])

ПеременнаяMAX_USER_COUNTОн используется для управления максимальным количеством отображаемых пользователей, которое можно изменить в соответствии с фактическими потребностями.setUserЛогика внутри — логика перехвата, когда количество пользователей превысит указанное максимальное значение, элемент заголовка будет удален.

Вышеприведенное завершает процесс потока данных. Нам также нужно разобраться с пользовательской логикой постепенного исчезновения и анимацией. Давайте сначала посмотрим на постепенное исчезновение.animation:

@keyframes moveOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

На самом деле анимация не сложная.Что нам нужно контролировать, так это то, как динамически добавлять эту анимацию к элементу head.На данный момент наше лучшее решение - передать имя класса, то есть когда выполняется условие затухания , нам нужно дать элементу затухания Динамически установить имя класса затухания, условия следующие:

  • user.length > MAX_USER_COUNT && i === 0

Вышеупомянутые условия относятся к тому, когда количество пользователей превышает максимальное количество отображаемых пользователей и когда элемент является головным, нам нужно только динамически установить имя класса в соответствии с этим условием:

{
  user.map((item, i) => {
     return  <div className={classnames(styles.animate, user.length > 2 && i === 0 ? styles.hidden : '')} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>李老师{item}上线</span></div>
  })
}

Код css выглядит следующим образом:

.hidden {
  opacity: 0;
  animation: moveOut 1.2s;
}

С помощью вышеуказанных шагов мы реализовали полную анимацию очереди онлайн-трансляции в прямом эфире, и анимация завершена.cssКод выглядит следующим образом, заинтересованные друзья могут узнать и обратиться к:

.animateWrap {
    position: absolute;
    bottom: 40%;
    left: 12px;
    .animate {
      margin-bottom: 10px;
      border-radius: 20px;
      background-color: rgba(0,0,0, .3);
      animation: moveIn 1.2s;
      .tx {
        display: inline-block;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        overflow: hidden;
        vertical-align: middle;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      span {
        margin-right: 12px;
        line-height: 36px;
        font-size: 14px;
        color: #fff;
      }
    }
    .hidden {
      opacity: 0;
      animation: moveOut 1.2s;
    }
    @keyframes moveIn {
      0% {
        transform: translateX(calc(-100% - 12px));
      }
      100% {
        transform: translateX(0);
      }
    }
    @keyframes moveOut {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
  }

наконец

Если вы хотите узнать большеИнтерфейсные навыки,настоящий бойа такжемаршрут обучения, Добро пожаловать в нашу техническую группу в разделе «Интересный интерфейс», чтобы вместе учиться и обсуждать, а также вместе исследовать границы интерфейса.

больше рекомендаций

Категории