Cómo crear animaciones UI simples con AE

En dribbble y behance, es posible que hayas visto muchos trabajos de interfaz de usuario que utilizan gifs para expresar conceptos de diseño. Mucha gente quiere saber cómo producir y cómo expresar mejor y más eficientemente sus ideas. Obviamente, la presentación dinámica es más vívida que la presentación estática. En este artículo, le enseñaré cómo "dinamizar" su diseño.

Las ventajas del gif dinámico para mostrar trabajos de UI son:

1. Mostrar el flujo de trabajo real

2. Usar transiciones para mostrar los efectos de diferentes estados de la aplicación

3. Conveniente para compartir en red.

aftereffectscs6orcc

photoshopcs6orcc

aftereffects

1. Crear efectos de transición en una composición

2. efecto de visualización en otra composición

photoshop

4. Optimizar imágenes gif

Una imagen de fondo de Londres

Plantilla de efecto de perspectiva de teléfono móvil Una imagen

1. Construcción básica

Crear composición de efecto de transición

Abrir ae, composición>Nueva composición (cmd+n), el tamaño es 640*1136, marco número 29, duró 6 segundos

Importe la imagen de fondo de Londres, suelte la imagen en la composición 1, cambie el tamaño de la imagen de fondo para que se ajuste al lienzo

Cree 3 cuadros azules (usando la capa Forma ), estos cuadros azules caerán desde la parte superior de la pantalla hasta la parte inferior de la pantalla, con anchos de 213, 214, 213px. El ancho del cuadro encima de los tres cuadros es 640 px y se ingresa el texto correspondiente.

Usa un bolígrafo para delinear las nubes y 6 círculos huecos de copos de nieve (el contorno está un poco acuoso, perdóname)

Crea composición 2

Dimensión 1280x720, número de fotograma 29, tiempo 6s

Paso 2. Importa el fondo del iPhone y ajusta el tamaño.

Arrastre la Composición 1 a la Composición 2, luego la Composición 2 debería verse así: (p.d. agregué una capa de fondo)

Seleccione Composición 1, Efecto>Distorsionar> Coloque las esquinas de manera que las cuatro esquinas de la composición 1 están opuestas a las cuatro esquinas de la pantalla en la plantilla.

2. Producción de efectos de movimiento

Ahora, analicemos la animación:

1.3 cuadros azules crecen y caen en diferentes momentos

2. El marco transparente se mueve hacia arriba desde la parte inferior y el ancho permanece sin cambios de principio a fin.

Después de que 3.4 cuadros llegan a su destino, el texto comienza a aparecer. El texto en el cuadro azul se expande proporcionalmente + cambia de opaco a transparente, y el texto en el cuadro transparente cambia de opaco a transparente.

4. Icono de nube, acompañado de copos de nieve.

Aparece 5.texto nevado.

En la capa de forma, los atributos que se pueden controlar incluyen proporción, posición, opacidad, trazo, etc. En la animación de este artículo, aprovechamos al máximo los cambios de estos atributos a lo largo del tiempo para crear efectos de animación.

En primer lugar, recomendamos dos complementos de script, easyandwizz y repostionanchorpoint

Uno es conveniente para crear curvas de movimiento y el otro es conveniente para establecer la posición del punto de anclaje.

Tres cuadros azules

Abra la composición 1, seleccione tres cuadros azules y configúrelos de la siguiente manera

1. Los cuadros azules más a la izquierda y más a la derecha El punto de anclaje es. en la parte superior (configurado usando el complemento de punto de anclaje)

2. La proporción es de 0 a 100%

3. Utilice facilidad y wizz para seleccionar el fotograma clave, que puede ajustar fácilmente el. curva de movimiento.

El movimiento del marco transparente inicialmente movió la mayor parte del desplazamiento a una velocidad muy rápida, y luego disminuyó y se movió lentamente a la posición original. La configuración es la siguiente

Nota. : Configurado con facilidad y wizz El efecto de movimiento quad+out es relativamente suave.

1. Tres cuadros azules Cuando el cuadro azul llega al final, el texto aparece rápidamente, la opacidad es de 0->100% y la escala es de 0->100%

2. El texto en el cuadro transparente se mueve junto con el cuadro transparente (para conocer la configuración de posición, consulte el cuadro transparente. Sin embargo, el texto de la izquierda llega primero y los -4 grados de la derecha). Más tarde, preste atención a la configuración en la línea de tiempo.

Cuando el texto en el cuadro transparente comienza a aparecer, aparece la nube, primero con la transparencia entre 0-100%.

La proporción comienza en 60% Cuando la transparencia llega al 100%, pasa de 60%->100%

Puntos de copo de nieve

Cuando las nubes se mueven. Una vez completado el efecto, pequeños puntos de copos de nieve comienzan a aparecer uno por uno.

1. Presta atención a los pequeños puntos que se moverán hacia la derecha y luego rebotarán. Presta atención al ajuste de la secuencia de movimiento.

2. quad+out esta vez

3. Tenga en cuenta que los puntos pequeños aparecen uno por uno, por lo que los cambios de transparencia deben establecerse secuencialmente en la línea de tiempo.

Efecto de texto nevado

El movimiento de la máscara se utiliza aquí para crear el efecto de texto nevado que aparece gradualmente. Tenga en cuenta que la opacidad nevada también debería cambiar (el cambio de opacidad de la máscara es redundante). No imitar)

Método 1: ae+ps

1. Después de guardar, sintetizar en ae>Agregar a la cola de renderizado

Después de completar la configuración. haga clic en renderizar

2. Abra el .mov renderizado con ps (Archivo>Importar>Fotograma de video a capa)

3.cmd+shift+s o Archivo>Guardar como disponible en la web. formato

1. Para la opción de bucle, seleccione Siempre

2 El tamaño de la imagen se puede configurar

3. Preste atención a la elección del formato gif. p>

Método 2: licecap

Si no desea usar ps, primero puede ajustar el tamaño del lienzo en ae y luego usar licecap, un pequeño software que puede grabar la pantalla en gif. Es muy conveniente y puede considerarse el mejor software de grabación de gif. (Versiones de múltiples plataformas)

Efecto de grabación:

cocoachina es la comunidad china más grande del mundo para el desarrollo de Apple. El WeChat oficial publica periódicamente varios interesantes recursos y herramientas de tutoriales de I+D todos los días, presentando la aplicación. experiencia en promoción y marketing, la última información corporativa sobre contratación y subcontratación, así como los últimos desarrollos e información de capacitación sobre el motor cocos2d y el kit de herramientas de desarrollo cocosstudio. Siga WeChat para conocer los últimos desarrollos de productos y servicios lo antes posible. ¡Con WeChat en la mano, tengo el mundo! Se pueden utilizar Ps, Flash y AE. Flash se puede utilizar para efectos interactivos. AE es un software de efectos visuales puro. Aunque está dirigido a la postproducción de cine y televisión, también se utiliza como diseñador de interfaz de usuario. , usar AE solo puede significar que eres muy moderno y poderoso. AE también tiene sus propias expresiones basadas en el lenguaje JavaScript para lograr un control de animación avanzado. En la actualidad, los campos donde más se usa AE son las industrias CG y multimedia.

Flash da a la mayoría de la gente la impresión de que es un software de animación vectorial, pero una cosa que es fácil pasar por alto es que la animación no es toda Flash. No crea puramente efectos visuales como AE. también hacer juegos y el desarrollo de sitios web pueden hacer muchas cosas. Una característica obvia es la "interactividad", por ejemplo, jugar es un tipo de interacción.

Como diseñador de UI, el flash se puede utilizar para la animación. Después de todo, las cosas creadas por AE son más adecuadas para ver.