Cómo hacer💥la barra de carga⏳en MENOS de ⚡️¡5 MINUTOS!⚡️ 1/2 - RAPIDÍN Ae

El día de hoy veremos cómo hacer la barra de carga para motion graphics, una técnica que se usa en pantallas de carga para películas, videojuegos, páginas web, o simples animaciones propias. RECUERDEN que ésta es la primer parte, que es la barra de carga, la segunda parte será del círculo de carga, la veremos en la siguiente tercia de RAPIDÍN.

¡Descarga el proyecto final y compáralo con el tuyo aquí!

Éstos son los pasos para hacer nuestra animación de la barra de carga:

1: Haremos una línea recta (de cualquier tamaño y color que quieran).

2: Usaremos la función Trim Paths; Panel de objetos/Objeto/Contenidos/Add/Trim Paths.

3: Podemos modificar el final y el inicio del trazo con los valores "END" "START" y "OFFSET".

3.5: "END" sirve para modificar dónde será el punto final del trazo, "START" establece el punto inicial del trazo, y "OFFSET" modifica el inicio y el final del trazo desde el punto medio del trazo.

4: Para la pura barra modificamos el valor "END" de "0%" a "100%" o a cualquier porcentaje que queramos, que será lo que defina el punto final del trazo.

ANOTACIÓN: Esto también funciona para trazos en curvas, o formas geométricas, como rectángulos, triángulos o círculos.

5: Pueden ponerle un pequeño marco para que de la sensación de que es una barra de carga y luego una máscara de capa en el trazo, pero no es necesario, ya que muchas barras de carga en videojuegos no tienen el marco.

6: Haremos ahora un contador de números, que pueden descubrir cómo se hace aquí.

7: Para la animación en donde la barra se parte y se agita haremos 2 cosas; Una máscara de capa inicial en la barra más o menos donde queremos que sea el corte, y vamos a triplicar ese objeto.

7.5: Con la barra triplicada, vamos a hacer algo con las máscaras; la máscara de la barra de hasta arriba la vamos a dejar en la modalidad "ADD", la máscara de la barra de en medio la vamos a poner en modalidad "SUBTRACT", y la máscara de la barra de hasta abajo la vamos a quitar definitivamente.

8: Vamos a animar el quiebre de las barra, primero animando la barra de hasta arriba, luego la de en medio, en mi caso, yo usé los keyframes de posición (P) y rotación (R).

9: Y para que se vea que el quiebre es real, vamos a animar la transparencia (T) de "100%" a "0%" desde donde termina el contador y empieza el quiebre de la barra, esto es para que se vea únicamente el quiebre, que es lo que nos interesa.

10: Disfrutar de nuestro trabajo.