Entre bastidores, la gente siempre le pregunta a Lao Li por qué la pantalla grande que hizo es más fea que otras, y luego le dan una foto. Lao Li lo miró y dijo: "Hola chicos, toda la pantalla grande es solo una imagen estática sin ninguna animación. ¿Quién puede ver esto y no decir que es feo? No hablemos de combinación de colores. La animación por sí sola es inferior a los demás." Mucho.
Lao Li no hablará sobre el tema de la combinación de colores esta vez. Ya compartió cómo elegir colores para pantallas grandes en artículos anteriores. Esta vez Lao Li se centrará en hablar sobre el tema de los efectos dinámicos de las pantallas grandes. Los buenos efectos dinámicos pueden directamente mejorar el rendimiento de las pantallas grandes. Es muy elegante con una pantalla grande, así que sin más preámbulos, simplemente siga adelante y tome la fotografía:
Este es el fondo del vórtice de partículas. En un escenario de pantalla grande, agregar un fondo dinámico de vórtice de partículas a una decisión -Hacer un reportaje tendrá tal efecto. ¿No es genial y sorprende al espectador? Es como visitar una exposición astronómica y estar en el universo.
Esta producción de efectos de movimiento no es difícil, ¡Lao Li te lo explicará a continuación!
Primero, tomando FineReport como ejemplo, establezca el fondo del cuerpo en "Personalizado > Sin fondo".
Luego, agregue un evento posterior a la inicialización al cuerpo.
El código JavaScript es el siguiente:
$(“cuerpo”).prepend('');
var lienzo = document.getElementById(“lienzo”);
var ctx = lienzo.getContext(“2d”);
lienzo.ancho = ventana.anchointerior;
lienzo.altura = ventana.alturainterior;
var w = lienzo.ancho;
var h = lienzo.altura;
var part_count = 600;
var P = [];
era X, Y;
ángulo var = 0,01;
var centroX = w * 0,5,
centroY = h * 0,5;
var parte = función(x,y,ix,iy,vx,vy,a,dist) { this.x = x; esto.y = y; esto.ix = ix; esto.iy = iy; esto.vx = vx; this.vy = vy; esto.a = a; this.dist = dist; }
función inicio(){ var x,y,ix,iy,vx,vy,a,dist; for(var i=0; i<part_count;i++){ ix = x; iy = y; vx = aleatorio(-1,1); vy = aleatorio(-1,1); rand = aleatorio(-80,100); dist = recuento_partes/10+i; a = 1;
P.push(new part(x,y,ix,iy,vx,vy,a,dist));
}
}
inicio();
función bg(){ ctx.fillStyle = '#000000'; ctx.globalAlpha=0,9; ctx.fillRect(0,0,canvas.width,canvas.height,1); }
función distancia(dx,dy){ return Math.sqrt(dx * dx + dy * dy); }
función dibujar(){ for(var i=0; i<P.length;i++){ var p = P[i];
p.a += 0.008;
p.x = centerX + Math.cos(i+p.a) * (p.dist*i*0.1);
p.y = centerY + Math.sin(i+p.a) * (p.dist);
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(p.x, p.y,2, 2);
}
}
bucle de función(){ bg(); dibujar(); ventana.requestAnimationFrame(bucle); } bucle();
función cambiar tamaño(){ lienzo.ancho = ventana.anchointerior; lienzo.altura = ventana.alturainterior; centroX = ventana.anchointerior * 0,5; centroY = ventana.alturainterior * 0,5; }
función aleatoria(min, max) { return Math.random() * (max - min) + min; }
window.onresize = cambiar tamaño;
Finalmente, guarde el informe de decisión y haga clic en "Vista previa de PC" para crear un fondo de vórtice de partículas.
Pero, de hecho, en la operación real, puede aplicar estos efectos dinámicos a su pantalla grande aplicando directamente la plantilla sin escribir ningún código. Lao Li ya ha hecho todo el trabajo de escribir el código con anticipación, para que todos puedan aplicarlo directamente. ¡plantilla!
Fondo animado abstracto
Fondo de lanzadera de partículas
Fondo de cielo estrellado giratorio
Fondo de onda dinámica
Todas las plantillas compartidas por Lao Li cuentan con estos geniales efectos especiales y los colores también se seleccionan cuidadosamente. Te garantizamos que te convertirás en el más guapo entre tus colegas tan pronto como lo uses, y tu jefe quedará atónito. ¡No te lo pierdas cuando pases!
Análisis de datos de depósitos y préstamos bancarios.
¡El análisis de negocios minoristas,
el análisis de descontaminación de bienes raíces,
el letrero de monitoreo de producción del taller
, la señalización integral del puerto de carreteras y la plantilla
de respuesta de backend están disponibles de forma gratuita!