Раньше на странице мобильной лотереи в окне отображения результатов лотереи нужно было отображать заграждающую карусель. Я уже прошел через некоторые ловушки. Теперь я подведу итог, как добиться внешнего эффекта заграждения.
Для начала давайте посмотрим, как реализовать простейший барраж с помощью CSS:
Сначала определите dom-структуру заграждения в HTML:
<div class=block>Я Данмаку</div>
Перемещение заграждения может быть достигнуто путем перемещения этого блока. Если взять в качестве примера заграждение, движущееся справа налево, исходное положение заграждения находится на самой левой стороне контейнера, а край скрыт (крайняя левая сторона контейнера). заграждение такое же, как и в самой правой части контейнера) может быть достигнуто путем абсолютного позиционирования и преобразования:
.block{ позиция:абсолютная;}Исходное положение:
от {слева: 100%; преобразование: translateX (0)}Конечная позиция движения в крайнее левое положение (крайняя правая сторона заграждения совпадает с крайней левой стороной контейнера):
в {слева: 0; преобразование: translateX (-100%)}Конкретные иллюстрации начального и конечного положения следующие:
Полную двухкадровую анимацию заграждения можно определить на основе начальной и конечной позиции:
@keyframes barrage{ from{ left:100%; Transform:translateX(0) to { left:0; Transform:translateX(-100%);Добавьте эту анимацию к элементу заграждения:
.block{position:absolute; /* другой стиль оформления */ анимация: шквал 5 с линейными 0 с;}Таким способом можно добиться нищего варианта заградительного эффекта:
Во-первых, давайте проясним процесс рендеринга CSS.
I) Создайте дерево DOM на основе структуры HTML (дерево DOM содержит узлы display:none). II) На основе дерева DOM создайте дерево рендеринга на основе геометрических атрибутов узлов (поля/заполнение/ширина/высота). /left и т. д.) III) Продолжайте отображать атрибуты, такие как цвет и шрифт, на основе дерева рендеринга.
Если свойства в I) и II) изменяются, произойдет перекомпоновка. Если изменяются только свойства в III), произойдет только перерисовка. Очевидно, из процесса рендеринга CSS мы также можем видеть: перекомпоновка должна сопровождаться перерисовкой.
reflow (перекомпоновка): когда часть или все дерево рендеринга изменяется из-за размера, полей и т. д., процесс необходимо перестроить. Перерисовка (перерисовка): когда изменяются некоторые атрибуты элемента, такие как внешний вид и цвет фона. , это не приведет к верстке. Процесс повторной отрисовки из-за изменений называется перерисовкой.
Перекомпоновка повлияет на скорость рендеринга CSS браузера, поэтому при оптимизации производительности веб-страницы необходимо уменьшить вероятность перекомпоновки.
В первом разделе мы использовали атрибут left для достижения эффекта заграждения. Left изменит макет элемента, поэтому произойдет перекомпоновка, что приведет к зависанию анимации заграждения на мобильной странице.
2. Оптимизация производительности CSS3Мы обнаружили, что анимация заграждения в первом разделе зависает. Давайте посмотрим, как решить зависшую анимацию.
(1)CSS включает аппаратное ускорение.Используйте CSS, чтобы включить аппаратное ускорение в браузере, и используйте графический процессор (GPU) для повышения производительности веб-страницы. Ввиду этого мы можем использовать мощность графического процессора, чтобы сделать наш веб-сайт или приложение более плавным.
CSS-анимация, преобразования и переходы не включают ускорение графического процессора автоматически, а выполняются медленным программным механизмом рендеринга браузера. Так как же нам переключиться в режим графического процессора? Многие браузеры предоставляют определенные триггерные правила CSS.
Более распространенный способ состоит в том, что мы можем включить аппаратное ускорение посредством 3D-изменений (атрибут translate3d). Ввиду этого мы модифицируем анимацию следующим образом:
@keyframes barrage { from { left:100%; Transform:translate3d(0,0,0 } to { left:0; Transform:translate3d(-100%,0,0 }});Таким образом, вы можете оптимизировать производительность веб-страницы, включив аппаратное ускорение. Однако кардинально проблему этот способ не решает. В то же время использование графического процессора увеличивает использование памяти, что сокращает время автономной работы мобильного устройства и так далее.
(2) Не меняйте левый атрибут
Второй способ — найти способ не менять значение левого атрибута до и после анимации заграждения, чтобы не происходило перекомпоновки.
Мы хотим определить начальную позицию узла заграждения только через TranslateX, но трансляцияX(-100%) относится к самому узлу заграждения, а не к родительскому элементу, поэтому мы соединяем js и css, чтобы получить заграждение в js. Ширина родительского элемента, в котором расположен узел, а затем исходное положение узла заграждения определяется на основе ширины.
Возьмем, к примеру, случай, когда родительским элементом является тело:
//css .block{ Position:absolute; left:0; Visibility:hidden; /* другой стиль оформления */ анимация: Barrage 5s, линейные 0s;}//jslet style = document.createElement('style');document.head .appendChild(style);let width = window.innerWidth;let from = `from {visibility: видимый; -webkit-transform: translateX(${width}px);let to = `to {visibility:visible; -webkit-transform:translateX(-100%);style.sheet.insertRule(`@-webkit-keyframes barrage { ${from} ${to} }`, 0);В дополнение к связыванию js для расчета ширины родительского элемента для определения начальной позиции узла заграждения, чтобы предотвратить отображение начальной позиции в узле заграждения, мы добавили атрибутvisibility:hidden. Запретить отображение узлов заграждения в родительском контейнере до определения начальной позиции. Заграждение станет видимым только в том случае, если оно начнет прокручиваться с исходного положения.
Однако этот метод реализации CSS более сложен при реализации расширенных функций заграждения, таких как управление паузой заграждения и так далее.
3. Холст осуществляет заградительный огоньПомимо метода реализации заграждения через css, заграждение также можно реализовать через холст.
Принцип реализации заграждения через холст заключается в том, чтобы время от времени перерисовывать текст. Давайте реализуем его шаг за шагом.
Получить холст
пусть холст = document.getElementById('canvas'); пусть ctx = Canvas.getContext('2d');Нарисовать текст
ctx.font = '20px Microsoft YaHei'; ctx.fillStyle = '#000000'; ctx.fillText('холст рисует текст', x, y);Вышеупомянутый fillText является основным API для достижения эффекта заграждения, где x представляет горизонтальную координату, а y представляет вертикальную координату. Пока x и y время от времени меняются и перерисовываются, можно достичь динамического эффекта заграждения. Скопировать код
Очистить содержимое чертежа
ctx.clearRect(0, 0, ширина, высота);Конкретная реализация
Через таймер x,y изменяются регулярно. Перед каждым изменением экран сначала очищается, а затем перерисовывается на основе измененных x,y. При наличии нескольких заграждений определите:
let colorArr=_this.getColor(color); Массив цветов, соответствующий массиву заграждения let numArrL=_this.getLeft(); Массив координат X, соответствующий массиву заграждения let numArrT=_this.getTop(); Соответствующий массив координат Y let SpeedArr=_this.getSpeed() Массив скорости движения заграждения, соответствующий массиву заграждения;
Запланированная функция перерисовки:
_this.timer=setInterval(function(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.save(); for(let j=0;j<barrageList.length;j++){ numArrL [j]-=speedArr[j]; ctx.fillStyle = colorArr[j]; ctx.fillText(barrageList[j],numArrL[j],numArrT[j]); ctx.restore();Достигнутый эффект:
Реализация заграждения через холст очень удобна для расширенных функций, таких как приостановка прокрутки заграждения. Кроме того, вы также можете добавлять в заграждение аватары, добавлять границы к каждому заграждению и другие функции, которые будут добавлены позже.
Наконец, дайте простой компонент реагирования https://github.com/forthealllight/react-barrage;
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.