Anteriormente, en una página de lotería móvil, la ventana de visualización de los resultados de la lotería necesitaba mostrar un carrusel de bombardeo. Ya había pasado por algunos obstáculos. Ahora resumiré cómo lograr el efecto de bombardeo frontal.
Primero, veamos cómo implementar el bombardeo más simple a través de CSS:
Primero defina la estructura dom de un bombardeo en HTML:
<div class=block>Soy Danmaku</div>
El movimiento de la barrera se puede lograr moviendo este bloque. Tomando como ejemplo la barrera que se mueve de derecha a izquierda, la posición inicial de la barrera está en el lado más izquierdo del contenedor y está oculta a lo largo del borde (el lado más izquierdo del contenedor). el bombardeo es el mismo que el lado derecho del contenedor Fit), que se puede lograr mediante posicionamiento absoluto y transformación:
.bloquear{ posición:absoluta;}Posición inicial:
desde{ izquierda:100%; transformar:translateX(0)}La posición final del movimiento hacia el extremo izquierdo es (el lado más derecho del bombardeo está alineado con el lado más izquierdo del contenedor):
a {izquierda: 0; transformar: traducirX (-100%)}Las ilustraciones específicas de la posición inicial y final son las siguientes:
Se puede definir una animación completa de bombardeo de dos fotogramas en función de la posición inicial y final:
@keyframes bombardeo{ desde{ izquierda:100%; transformar:translateX(0 } a{ izquierda:0; transformar:translateX(-100%);Introduzca esta animación al elemento de bombardeo:
.block{ posición:absoluta; /* otro estilo de decoración */ animación:barrage 5s lineal 0s;}De esta manera, se puede lograr una versión mendigo del efecto bombardeo:
Primero, aclaremos el proceso de renderizado de CSS.
I) Generar un árbol DOM basado en la estructura de HTML (el árbol DOM contiene display:none nodos) II) Basado en el árbol DOM, generar un árbol de renderizado basado en los atributos geométricos de los nodos (margen/relleno/ancho/alto /izquierda, etc.) III) Continuar renderizando atributos como el color y la fuente según el árbol de renderizado
Si las propiedades en I) y II) cambian, se producirá reflujo. Si solo cambian las propiedades en III), solo se producirá repintado. Obviamente, también podemos verlo en el proceso de representación de CSS: el reflujo debe ir acompañado de un nuevo dibujo.
reflujo: cuando parte o la totalidad del árbol de renderizado cambia debido al tamaño, márgenes, etc., es necesario reconstruir el proceso. Repintar: cuando algunos atributos del elemento cambian, como la apariencia y el color de fondo, el diseño no se modificará. afectado El proceso de volver a renderizar debido a cambios se llama volver a dibujar.
El reflujo afectará la velocidad de representación del CSS del navegador, por lo que al optimizar el rendimiento de la página web, es necesario reducir la aparición de reflujo.
En la primera sección, utilizamos el atributo izquierdo para lograr el efecto de bombardeo. La izquierda cambiará el diseño del elemento, por lo que se producirá un reflujo, lo que hará que la animación del bombardeo se congele en la página móvil.
2. Optimización del rendimiento del lanzamiento de CSS3Hemos descubierto que la animación de bombardeo en la primera sección tiene un problema de bloqueo. Veamos cómo solucionarlo.
(1)CSS activa la aceleración de hardwareUtilice CSS para habilitar la aceleración de hardware en el navegador y utilice la GPU (Unidad de procesamiento de gráficos) para mejorar el rendimiento de la página web. En vista de esto, podemos utilizar la potencia de la GPU para que nuestro sitio web o aplicación funcione de manera más fluida.
Las animaciones, transformaciones y transiciones CSS no habilitan automáticamente la aceleración de la GPU, sino que las realiza el lento motor de renderizado del software del navegador. Entonces, ¿cómo podemos cambiar al modo GPU? Muchos navegadores proporcionan ciertas reglas CSS activadas.
La forma más común es que podemos activar la aceleración de hardware mediante cambios 3D (atributo translate3d). En vista de esto, modificamos la animación como:
@keyframes bombardeo{ desde{ izquierda:100%; transformar:translate3d(0,0,0 } a{ izquierda:0; transformar:translate3d(-100%,0,0);De esta manera, puede optimizar el rendimiento de la página web activando la aceleración de hardware. Sin embargo, este método no resuelve fundamentalmente el problema. Al mismo tiempo, el uso de la GPU aumenta el uso de la memoria, lo que reducirá la duración de la batería del dispositivo móvil, etc.
(2) No cambie el atributo izquierdo
El segundo método es encontrar una manera de no cambiar el valor del atributo izquierdo antes y después de la animación del bombardeo, para que no se produzca reflujo.
Queremos determinar la posición inicial del nodo de barrera solo a través de TranslateX, pero TranslateX (-100%) es relativo al nodo de barrera en sí, no al elemento principal, por lo que acoplamos js y css para obtener el ancho de la barrera en js. del elemento padre donde se encuentra el nodo, y luego la posición inicial del nodo de presa se define en función del ancho.
Tomemos, por ejemplo, cuando el elemento padre es el cuerpo:
//css .block{ posición:absoluta; izquierda:0; visibilidad:hidden; /* otro estilo de decoración */ animación:barrage 5s linear 0s;}//jslet style = document.createElement('style');document.head .appendChild(estilo);let width = window.innerWidth;let from = `from {visibilidad: visible -webkit-transform: traducirX(${ancho}px); }`;let to = `to {visibilidad: visible; -webkit-transform: traducirX(-100%);style.sheet.insertRule(`@-webkit-keyframes bombardeo); { ${de} ${a} }`, 0);Además de acoplar js para calcular el ancho del elemento principal para determinar la posición inicial del nodo de barrera, para evitar que la posición inicial se muestre en el nodo de barrera, agregamos el atributo visibilidad: oculto. Evite que los nodos de barrera se muestren en el contenedor principal antes de que se determine la posición inicial. El bombardeo sólo será visible si comienza a desplazarse desde su posición inicial.
Sin embargo, este método de implementación de CSS es más problemático al implementar las funciones extendidas del bombardeo, como cómo controlar la pausa del bombardeo, etc.
3. Canvas implementa bombardeoAdemás del método de realizar el bombardeo a través de CSS, el bombardeo también se puede realizar a través de lienzo.
El principio de realizar bombardeos a través del lienzo es volver a dibujar el texto de vez en cuando. Implementémoslo paso a paso.
Obtener lienzo
dejar lienzo = document.getElementById('lienzo'); dejar ctx = lienzo.getContext('2d');Dibujar texto
ctx.font = '20px Microsoft YaHei'; ctx.fillStyle = '#000000'; ctx.fillText('lienzo dibuja texto', x, y);El fillText anterior es la API principal para lograr el efecto de bombardeo, donde x representa la coordenada horizontal e y representa la coordenada vertical. Siempre que xey se cambien y vuelvan a dibujar de vez en cuando, se puede lograr el efecto de bombardeo dinámico. Copiar código
Borrar contenido del dibujo
ctx.clearRect(0, 0, ancho, alto);Implementación específica
A través del temporizador, x, y se cambia regularmente. Antes de cada cambio, la pantalla se borra primero y luego se vuelve a dibujar según los x, y modificados. Cuando hay múltiples bombardeos, defina:
let colorArr=_this.getColor(color); La matriz de colores correspondiente a la matriz de barrera let numArrL=_this.getLeft(); La matriz de posición de coordenadas x correspondiente a la matriz de barrera let numArrT=_this.getTop(); La matriz de posición de coordenadas y correspondiente let speedArr=_this.getSpeed() La matriz de velocidad de movimiento de la barrera correspondiente a la matriz de barrera.
La función de bombardeo de redibujado programada es:
_this.timer=setInterval(function(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.save(); for(let j=0;j<barrageList.length;j++){ numArrL [j]-=velocidadArr[j]; ctx.fillStyle = colorArr[j] ctx.fillText(barrageList[j],numArrL[j],numArrT[j]);El efecto conseguido es:
El método de implementar el bombardeo a través del lienzo es muy conveniente para funciones extendidas como pausar el desplazamiento del bombardeo. Además, también puede agregar avatares al bombardeo, agregar bordes a cada bombardeo y otras funciones, que se agregarán más adelante.
Finalmente, proporcione un componente de bombardeo de reacción simple https://github.com/forthealllight/react-barrage;
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.