Un día, nuestro diseñador de UI vino a verme y me dijo que debería reemplazar las animaciones que escribí en el programa con las animaciones json que me dieron. La razón es que algunas animaciones son muy complicadas y no pueden lograr los efectos esperados si las escribo yo mismo (. Cuando escribí esto, de repente pensé en una pregunta: ¿por qué no usas gif para una animación tan complicada? El desarrollador de Android sentado frente a mí respondió que la calidad del gif puede no ser alta cuando se reproduce, está bien, lo creo).
I:? ? ? ? El cliente puede agregar animación json. Nunca he oído hablar de páginas H5 que puedan leer animaciones json.
El diseñador pareció seguro y dijo que sí, que existe una versión web.
Mientras escribo esto, realmente quiero elogiar a nuestras chicas diseñadoras. Casi muchas buenas soluciones se encontraron bajo su presión (oh, también pueden escribir páginas H5... quieren que yo haga la serie ¿Para qué sirve?).
Entonces aquí viene la pregunta: ¿cómo usar la animación json en una página H5?
Cómo utilizar la animación json dentro de la página H5En este momento, el diseñador me envió un enlace, mire aquí lottie-web; hice clic en él para obtener más información al respecto. Es una biblioteca de animación de código abierto de Airbnb que puede completar muchas animaciones interesantes y es muy fácil de usar. El diseñador solo necesita exportar el archivo JSON mediante una animación realizada por AE. software, y luego el front-end usa Lottie para cargar directamente el archivo JSON para generar animación. No requiere que el diseñador corte muchos gifs, ni el front-end necesita realizar dibujos complejos. y Lottie está disponible en todas las plataformas, incluidas iOS, Android, web y React. Se puede usar Native, ocupa menos memoria y se carga sin problemas. (¿Por qué recién ahora descubro algo tan mágico?
Dicho todo esto, ¿cómo usarlo en páginas H5?
Es muy simple: se le envía la carpeta generada por el diseñador (el diseñador solo necesita agregar un complemento de Lottie en AE y exportarlo). Después de abrirlo, debería verse así. Abra demo.html. Sé cómo funciona. Lo usé (así que todavía estoy escribiendo artículos técnicos aquí).
Bromas aparte, en realidad encontré muchos problemas durante su uso. Aquí hay algunas cosas a las que prestar atención al usarlos.
1. Hay muchas cosas en línea en demo.html que son desagradables cuando se usan.Mire más de cerca. De hecho, demo.html incluye js y json. En este momento, podemos separar js y json por separado. Para js, podemos usar la dirección proporcionada en el cdn.
<tipo de script=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script>
Los datos json necesarios para la animación se colocan en el archivo data.json, pero el formato de datos en el archivo json proporcionado es el siguiente (es demasiado largo y no se puede cortar)
Si desea utilizar una secuencia de comandos para introducir un archivo json en un HTML separado, se informará un error, por lo que deberá modificar el archivo json, agregar variables al frente y asignar valores. Como se muestra a continuación:
De esta manera, puedes importar el json de la misma manera que el archivo js.
<tipo de script=text/javascript src=./data.json></script>
De esta manera, el demo.html disponible se reduce a lo siguiente
<html xmlns=http://www.w3.org/1999/xhtml><meta charset=UTF-8><head> <style> body{ background-color:black; margen: 0px altura: 100%; : oculto; } #lottie{ color de fondo:#fff; ancho:100%; alto:100%; desbordamiento: oculto; traducir3d(0,0,0); alineación de texto: centro; opacidad: 1; </style></head><body><div id=lottie></div><script type=text/javascript src= https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script><script type=text/javascript src=./data.json></script><script> var params = { contenedor: document.getElementById('lottie'), renderizador: 'svg', bucle: verdadero, reproducción automática: verdadero, AnimationData: AnimationData var}; anim; anim = lotetie.loadAnimation(params);</script></body></html>Por supuesto, si está utilizando la programación modular js, puede importarla directamente sin cambiar data.json, de la siguiente manera:
importar datos de animación desde './data.json'2. Adapta animaciones a dispositivos móviles
La razón por la que creo que esto es un error es porque la animación que me dio el diseñador era de pantalla completa y no transparente. Luego me pidió que colocara la animación con un ancho del 100% y una intercepción centrada verticalmente. En el navegador, debajo de la pantalla de 360 * 640, el ancho es 100%, la expresión es la siguiente (parece que la altura es 100%, el ancho se adapta al centro y el color de fondo negro se filtra en ambos lados). , vea la parte enmarcada en azul en la imagen de abajo)
Cambiar a la pantalla del iPhone
Este diseño es muy familiar. Se comporta de la misma manera que cuando el atributo de ajuste de objeto de img está configurado para contener (el ajuste de objeto también es un tesoro. Los estudiantes interesados pueden estudiarlo, es muy fácil de usar).
Para resolver las necesidades del diseñador aquí, agrego principalmente el siguiente código:
parte js: setTimeout(function() { document.getElementsByTagName('svg')[0].style.height = 'auto';}, 50); parte css: (agregar diseño flexible a lottie) #lottie { ancho:100 %; altura: 100%; transformar: traducir3d (0,0,0); alineación de texto: centro; 1; izquierda: 0; índice z: 3; mostrar: flex; dirección flexible: fila; justificar contenido: centrar;Efecto final:
ResumirLas capturas de pantalla de las imágenes de arriba son todas estáticas, pero en realidad tienen un efecto dinámico. No sé cómo agregar animaciones, así que no lo hice. Si estás interesado, puedes intentarlo.
Ámbito de aplicación: creo que, en general, las animaciones de pantalla completa o parcialmente complejas pueden usar este método. Es más fluido que GIF y tiene buena compatibilidad. Algunos productos de Android usan este método para abrir la pantalla de una manera interesante, como las páginas H5. Si es así, generalmente su propio programa puede implementar animaciones simples y podrá evitar problemas.
Enlaces de referencia:
sitio web oficial de Lottie
dirección de github de lottie-web
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.