Hablemos primero de la tarea de la última clase. Las tres animaciones que les pedimos a todos que hicieran tienen efectos de aparición y desaparición gradual, pero si miras de cerca, encontrarás diferencias.
La primera animación aparece gradualmente a medida que el texto se mueve. El texto es más obvio cuando está a la mitad del movimiento y luego desaparece gradualmente a medida que se mueve. Si utiliza la transición de cuadros para hacerlo, primero debe determinar 3 cuadros clave. El texto en el primer cuadro debe estar en el extremo derecho con una opacidad del 0% (u ocultar el texto en el segundo cuadro); estar en el centro con una transparencia del 100%; el texto en el cuadro 3 está en el extremo izquierdo y la opacidad vuelve al 0% (u oculta la capa). Aproximadamente como se muestra a continuación.
Luego haga la transición entre el cuadro 12 y el cuadro 23 respectivamente, agregando aproximadamente 5 cuadros cada uno. El tiempo de retardo del cuadro lo puede configurar usted mismo. En esta animación, el texto aparece y desaparece simultáneamente con el movimiento. La transparencia cambia a lo largo de la mudanza.
En la segunda animación, el texto está quieto cuando aparece en el extremo derecho y comienza a moverse después de que es completamente visible. Después de moverse hacia el extremo izquierdo, se desvanece mientras está quieto. Entonces sus fotogramas clave deberían ser 4 fotogramas, aproximadamente como se muestra en la imagen de la izquierda a continuación. Simplemente configure la transición entre estos 4 cuadros respectivamente.
Aunque el número específico de fotogramas de transición se puede establecer arbitrariamente, desde una perspectiva de diseño, la transición entre el fotograma 12 y el fotograma 34 debería ser menor, aproximadamente de 3 a 4 fotogramas. Debería haber relativamente más transiciones entre los cuadros 23, alrededor de 6 a 7 cuadros. Esto se debe a que cuando se mueve la misma distancia, cuanto menor sea el número de cuadros, más rápido será el movimiento por cuadro, y cuanto mayor sea el número de cuadros, más lento será el movimiento. Como se muestra en la imagen de la derecha a continuación, es la distancia de movimiento de cada cuadro de 3 cuadros, 4 cuadros y 7 cuadros. En teoría, cuanto mayor sea el número de fotogramas, más rica y detallada será la animación.
Nuestra animación muestra principalmente contenido de texto, para que los espectadores puedan verlo claramente. Si configura el número de fotogramas de aparición y desaparición gradual en muy grande y el número de fotogramas en movimiento en muy pequeño, se creará una situación en la que el texto aparece muy delicadamente, luego se mueve rápidamente y luego se desvanece. muy delicadamente. Quizás el espectador aún pueda comprender el contenido del texto, pero este método de presentación es inapropiado. Aunque en ocasiones esto también puede convertirse en una técnica de expresión poco convencional.
Ahora hemos creado dos animaciones sobre el mismo tema, ambas con efectos de desvanecimiento y movimiento, pero ambas tienen deficiencias expresivas. La desventaja de la primera animación es que la transición de opacidad es demasiado larga. El texto sólo es completamente visible en un cuadro durante toda la animación. Era semitransparente antes y después. Esto no enfatiza la importancia del texto y puede dificultar la lectura del espectador.
Quizás pienses que este problema no existe, porque el texto de la primera animación parece muy claro. Pero utilizamos 100% de opacidad como estado de visualización final. De esta forma, según la transición de 5 cuadros, cada cuadro tiene un incremento del 20%, es decir, aunque el primer cuadro es 0%, el segundo cuadro alcanza el 20%, por lo que básicamente no hay problema en la lectura. Si en otra situación, la opacidad final no es del 100%, sino solo del 30% o menos, el incremento de opacidad en cada cuadro se vuelve muy pequeño, por lo que aunque la opacidad final del 30% es suficiente. Es necesario para leer, pero el desvanecimiento- En proceso será difícil ver claramente y afectar la lectura. Puedes establecer la opacidad final en 30%, 10%, etc. e intentarlo nuevamente.
Por el contrario, la segunda animación evita este inconveniente. Realiza el desvanecimiento y la aparición por separado. Solo comienza a moverse después de que se completa el desvanecimiento (el texto alcanza su estado de apariencia final). mantiene su forma original durante el movimiento. El estado final manifestado, ya sea 100% o 30% o lo que sea. Sin embargo, también tiene otra desventaja, es decir, el texto es estacionario en el punto inicial y final, lo que destruye la continuidad del movimiento.
Ahora queremos combinar los dos para crear una animación que tenga un efecto de aparición y desaparición gradual y que también pueda mostrar mejor el texto. La idea es mantener el texto de la primera animación en movimiento durante todo el proceso, pero comprimir el desvanecimiento de aparición y desaparición en unos pocos fotogramas al principio y al final, para garantizar que el texto mantenga su apariencia final durante la mayor parte del tiempo. del movimiento. Como se muestra en la imagen de la izquierda a continuación, las flechas de dos direcciones representan los procesos de aparición y desaparición gradual. La mitad superior muestra la primera animación. Se puede ver que la suma de la aparición y desaparición gradual es igual a la totalidad. proceso de animación. A continuación se muestra nuestra idea actual, con el desvanecimiento y la aparición gradual ocupando la mitad o menos de toda la secuencia. Esto permite que el texto complete la mayor parte de su movimiento en su apariencia final.
La configuración del fotograma clave es como se muestra en la imagen de la derecha a continuación. Simplemente configure la transición en el momento de dos fotogramas adyacentes. Aunque el texto no se puede ver en el cuadro 1, puede saber que está ubicado en el extremo derecho de la pantalla. En el cuadro 2, se ha mostrado todo el texto y la posición se ha movido ligeramente hacia la izquierda. De esta manera, la transición del cuadro 12 completa todo el cambio de opacidad y completa al mismo tiempo una pequeña parte del movimiento. Después de eso, el texto se mueve una cierta distancia (transición del cuadro 23) y luego comienza a desvanecerse mientras se mueve cerca del extremo izquierdo (transición del cuadro 34), que es lo opuesto a la aparición gradual.
Me pregunto si ha pensado en otro problema que se encontrará en la producción de esta animación, es decir, cómo garantizar que la distancia de movimiento del cuadro 12 corresponda a la distancia del cuadro 23. La correspondencia aquí no significa igual, pero significa que la distancia recorrida por cada cuadro es la misma. Supongamos que la transición del cuadro 12 es de 3 cuadros (ABC) y la transición del cuadro 23 es de 6 cuadros (DEFGHI), es decir. , 1ABC2DEFGHI3, un total de 12 fotogramas. Entonces la distancia de movimiento del texto en cada uno de estos 12 cuadros debe ser igual para lograr un mejor efecto de movimiento. Pero la gente a menudo produce el efecto de ir rápido delante y lento detrás, o ir lento delante y rápido detrás, porque no juzgan lo suficiente la distancia del movimiento. Este problema es difícil de resolver, a menos que use una regla para calcular con precisión la distancia, solo puede intentarlo varias veces para encontrar el número más apropiado de cuadros de transición.
Lo que necesita dominar en esta lección es cómo manejar los desvanecimientos de aparición y desaparición cuando se combinan con movimiento. La mejor manera es utilizar un número más corto de fotogramas para completar el fundido de entrada y salida mientras continúa moviéndose, manteniendo similar la distancia de movimiento de cada fotograma. Esta operación es un poco engorrosa, pero no te preocupes, pronto habrá una solución.
anisample01.rar
Proporcionamos los archivos fuente para hacer la tercera animación aquí ( anisample01.rar ), no es que crea que no todos puedan hacerlo, pero para asegurar la unidad de la enseñanza, necesitamos usar esta animación para seguir aprendiendo. También puedes utilizar tu propio trabajo. No hay tarea para esta clase, pero hay una pregunta para pensar, que es cómo crear la animación como se muestra a continuación manteniendo sin cambios la configuración original de 20 fotogramas de anisample01.psd.
En la siguiente sección presentamos las limitaciones de la animación de cuadros de transición .