A través del estudio de las tres lecciones anteriores, hemos dominado el método de hacer animación, aunque la animación producida todavía es muy tosca. ¿Aún recuerdas que cuando estabas aprendiendo lo básico, estuviste expuesto a un solo bloque de color durante mucho tiempo? Eso no ha afectado el nivel actual de desempeño de todos. De igual forma, pronto comenzaremos a realizar animaciones más detalladas. Pero antes de que todo esto suceda, todos deben aprender algo de pensamiento de diseño necesario. El llamado pensamiento de diseño se refiere a la planificación y consideraciones antes de realizar animaciones. Esta planificación incluye muchos aspectos.
Primero, hablemos de la organización de las capas. La animación final no contiene información de las capas. Las capas mencionadas aquí sólo se refieren a aquellas en producción. Para las animaciones producidas utilizando cambios de posición de capas, un problema obvio es que las capas deben organizarse de manera razonable , porque la unidad de movimiento más pequeña es la capa, por lo que si necesita crear varios objetos con diferentes trayectorias de movimiento, deben distribuirse en diferentes capas. También debes considerar la distancia de movimiento de antemano. El tamaño y la ubicación de la imagen deben dejar suficiente espacio para el movimiento. Este es uno de ellos.
El segundo es considerar si se cruzará con otras capas y cómo manejar la intersección, quién cubrirá a quién, es decir, la disposición jerárquica de las capas. La siguiente figura enumera tres formas de intersección. son Cuando ambas capas están al 100%, el verde cubre el rojo. Los otros dos muestran los diferentes efectos de cobertura de diferentes capas con un 50% de opacidad. Si el verde cubre el rojo, entonces la intersección será más verde y viceversa. Todo esto está en el modo de fusión normal. Si elige otros modos de fusión como superposición, debe prestar más atención a la capa.
Lo mencionado anteriormente son todos problemas técnicos, ahora hablemos de problemas de trama. En términos generales, si un objeto siempre se mueve en la imagen, no es necesario tenerlo en cuenta. Pero si el objeto no estaba originalmente en la imagen pero entró en ella más tarde, o estaba originalmente en la imagen y luego salió de ella, es necesario explicar la aparición y desaparición del objeto. Esta explicación es una transición, que permite la aparición. espectador tenga un cambio psicológico más natural. Una técnica común es hacer que los objetos aparezcan gradualmente (también llamado desvanecimiento) o desaparezcan gradualmente (también llamado desvanecimiento). Como se muestra en la figura siguiente, demuestra la comparación del efecto de aparición y desaparición gradual en el mismo movimiento de texto.
Puede mover el mouse al área de reproducción para ver el efecto de animación real y mover el mouse fuera del área de reproducción para detener la reproducción. En comparación, creo que todos sentirán que el efecto de agregar procesamiento de aparición y desaparición gradual es mejor.
Además, la configuración del bucle también es un problema de la trama. De hecho, lo hemos mencionado antes, es decir, en algunas situaciones se puede utilizar la animación de bucle infinito, mientras que en otras situaciones no es adecuada. Por ejemplo, si la animación del texto del título de una columna que aparece gradualmente se repite continuamente, hará que toda la página web se vea desordenada y hará que los espectadores se sientan incómodos. El enfoque más adecuado en este momento es reproducirlo una vez, para que el efecto se pueda mostrar sin afectar la página web en general. Generalmente es aceptable un ciclo de 2 a 3 veces, y más no es bueno.
Sin embargo, es mejor colocar las animaciones que solo se reproducen una vez en la parte superior de la página web para que puedan verse tan pronto como ingrese a la página web. Si se coloca en la parte inferior de la página web, es posible que la animación haya terminado de reproducirse cuando el espectador llegue a ese punto. En ese caso, no tendría sentido crear animaciones y sería mejor utilizar imágenes estáticas.
Cabe señalar que la imagen GIF animada se reproducirá nuevamente cada vez que se llame. Si algunas personas ya tienen conocimientos sobre la producción de páginas web, pueden utilizar esta propiedad para establecer las acciones correspondientes en el software de producción de páginas web. Por ejemplo, así es como mueves el mouse aquí para ver la animación del ejemplo. La animación siempre comienza desde el principio después de cada movimiento. De esta manera, incluso si la animación se reproduce solo una vez, se puede reproducir varias veces en la página web. No te preocupes si no tienes conocimientos sobre producción de páginas web, esto no afectará nuestro aprendizaje posterior de la animación. .
Una cuestión importante a considerar con respecto a los efectos de desvanecimiento que se ven geniales es que los navegadores se pueden configurar para deshabilitar las animaciones. En este momento, la animación solo mostrará el primer fotograma de la animación. Entonces, una animación similar a "ir y venir silenciosamente" arriba estará en blanco en la página web, porque el primer cuadro está originalmente en blanco. Esto puede provocar fácilmente malentendidos entre los espectadores.
Tal vez piense que nadie apagará deliberadamente la visualización de la animación, pero como este factor no se puede descartar, debemos considerar la situación del visitante desde el nivel más amplio. En el diseño general de la página web, evite el uso de animaciones difuminadas en texto importante o partes de indicadores. Después de colocar la animación en la página web, es mejor desactivar manualmente la reproducción de la animación para comprobar si hay algún problema. Además de desactivar la reproducción de la animación, si el visitante presiona la tecla ESC cuando se muestra la página, la reproducción de la animación también se interrumpirá y la pantalla permanecerá en el momento de la interrupción.
Si desea cuidar de los visitantes a los que se les prohíbe reproducir animaciones y a aquellos a los que se les permite reproducir animaciones al mismo tiempo, y lograr un equilibrio entre los dos, entonces debe seguir un principio en la producción de animaciones, es decir, la parte principal no debe moverse y las partes modificadas deben estar animadas. Como se muestra en la imagen siguiente, el texto en sí no está animado, sólo los bordes del texto están animados. De esta manera, incluso si la animación fija se reproduce o se interrumpe durante la reproducción, no afectará la comprensión del contenido por parte del espectador.
Sin embargo, siempre que se pueda reflejar fielmente el contenido en todo momento y se evite la desaparición del texto o una deformación excesiva, el texto principal también se puede mover.
El contenido descrito en esta lección no está relacionado con la tecnología de producción de animación. Sin embargo, cuando desee aplicar animación a páginas web, debe considerar los métodos de producción y ejecución de la animación desde una perspectiva amplia. Simplemente aprender estos contenidos es un poco aburrido. Simplemente deja una impresión en todos y aplícalo en futuras producciones.
Esta tarea consiste en crear la animación de "Quietly Come and Go". Además, también se producen las dos animaciones derivadas siguientes.
En la siguiente sección, presentamos cómo expresar la aparición y desaparición gradual en la animación.