-
Hola.
-
Me llamo Natalie
y soy una de los ingenieros
-
que ayudan a diseñar
Google Web Designer.
-
En este vídeo, vamos a explicar
cómo crear animaciones
-
con la línea de tiempo
en modo avanzado.
-
El panel de la línea de tiempo
está en la parte inferior.
-
Esta es una de las dos herramientas
de línea de tiempo.
-
La otra es la línea de tiempo modo rápido.
-
Muchos archivos se abren en el modo rápido
-
y puedes alternar entre los dos modos
con este botón de la derecha.
-
Este es el modo rápido
y este el avanzado.
-
Hay otro tutorial
que cubre el modo rápido.
-
En este nos centraremos
en el modo avanzado:
-
mucho más complejo,
pero también más potente que el otro modo.
-
Para este tutorial,
tengo este pequeño anuncio animado
-
con una imagen que se desliza
-
dos textos que aparecen y desaparecen
-
y un logotipo al final.
-
Vamos a ver cómo crear este anuncio
paso a paso en Google Web Designer.
-
Vamos a encargarnos primero de la imagen.
-
La arrastramos hasta la escena...
-
y la colocamos tal como queramos
que aparezca al principio de la animación.
-
Justo aquí.
-
Más tarde, la pondremos por aquí.
-
Vemos que ha aparecido
una pista en la línea de tiempo.
-
Es una capa de la línea.
-
Es la IU donde distribuiremos
la animación de este objeto.
-
La creación de animaciones
consiste en definir fotogramas clave:
-
puntos de ruta que marcan en qué momento
un elemento tiene valores concretos
-
y en definir cómo son y cuánto duran
las transiciones entre esos valores.
-
Para que la imagen se deslice
crearemos varios fotogramas clave.
-
Queremos que no se mueva
durante un segundo.
-
Pongo el fotograma en el segundo uno:
-
clic derecho,
selecciono Insertar fotograma clave.
-
Luego otro, medio segundo después.
-
Y en este fotograma
-
deslizo la imagen hacia donde
quiero que esté en este segundo.
-
Y quiero que esta
no se mueva durante otro segundo.
-
Por último, medio segundo después
-
quiero que salga completamente.
-
Si movemos esta marca,
nos movemos en la línea de tiempo
-
y tenemos
una vista previa de la animación.
-
También puedes hacer clic
en el botón Play de la izquierda
-
para conseguir lo mismo.
-
No pinta mal.
-
Lo siguiente...
-
Hemos visto en el modelo acabado
que la imagen aparece al comienzo
-
además de deslizarse más tarde.
-
Vamos a hacer eso.
-
Selecciono todos los fotogramas
y hago sitio a la transición del final.
-
Inserto un nuevo fotograma
en el segundo cero.
-
Y definimos
la opacidad de este elemento en cero.
-
Para el resto de los fotogramas será cien.
-
Ahora, vamos con el texto.
-
Como hemos visto,
hay dos cuadros de texto.
-
Aparecen uno detrás del otro,
mientras las imágenes se deslizan.
-
Vamos a crear el primer cuadro de texto.
-
El primer cuadro debería aparecer
-
mantenerse durante este tiempo
-
y desaparecer cuando la imagen se desliza.
-
Primero hay que poner a cero
-
la opacidad del cuadro,
porque aquí es cuando empieza.
-
Después, creamos
un fotograma clave al medio segundo.
-
Ponemos la opacidad al 100%.
-
Al segundo y medio,
queremos que siga siendo 100%.
-
Y a los dos segundos
que vuelva a ser 0%.
-
Puedes insertar un fotograma clave
-
como lo hemos hecho antes.
-
O puedes aprovechar
la duplicación de fotogramas clave.
-
Si mantienes pulsado Alt,
puedes clonar un fotograma
-
y arrastrarlo a otro punto.
-
Así puedes ahorrar tiempo
con algunas animaciones.
-
Y añadimos el último
donde el texto desaparece por completo.
-
Puedes previsualizarla.
-
Perfecta. Vale.
-
Y el segundo cuadro de texto
es igual que el primero.
-
Solo cambia el texto.
-
Aparece cuando desaparece el primero.
-
Voy a ahorrar tiempo
-
y voy a duplicar
esta capa de la animación:
-
clic derecho
y selecciono Duplicar capa.
-
Una vez más, con la marca de reproducción
selecciono todos los fotogramas clave
-
y los muevo
a donde debería estar la animación.
-
Ajusto estos fotogramas clave
-
donde el primero desaparece
y el segundo aparece
-
para que no se crucen.
-
Cuando tengas
tantos fotogramas clave juntos
-
usa el zoom para tener
una vista de más clara de la animación.
-
Ahora vamos a actualizar el texto.
-
Ahora tengo los dos cuadros de texto
-
uno encima del otro.
-
Si hago clic derecho ahora
podría editar el de arriba sin querer.
-
Voy a bloquearlo para que eso no ocurra
-
y podré editar el de abajo.
-
Nuestra animación ya está casi acabada.
-
Vamos a mirar
lo que ocurre entre fotogramas clave.
-
Vemos que,
entre cada par de fotogramas, pone Lineal.
-
Esto se refiere la función easing CSS.
-
Usada para calcular valores intermedios
entre cada par de fotogramas clave.
-
Lineal significa que los valores
cambian a un ritmo constante.
-
Tenemos otras opciones.
-
Si haces clic derecho, verás disponibles
-
todas las funciones estándar de easing
en las especificaciones CSS.
-
Para esta transición
-
en la que la imagen
se desliza de una mitad a la otra
-
puedes escoger otra función de easing
-
como "ease-in-out"
que acelera un poco el movimiento.
-
Después, desacelera antes de detenerse,
simulando un movimiento un poco más real.
-
Voy a limitar la vista previa
-
arrastrando estos indicadores amarillos
a esta transición.
-
Reproduzco en Bucle
-
y previsualizo este segmento.
-
Así depuro la transición.
-
Así está bien.
-
Otra cosa que podemos hacer
-
en vez de usar una función predefinida
-
es crear una propia.
-
Clic derecho y seleccionamos Opciones...
-
Podemos personalizar esta curva de Bézier
-
para que sea lo que quieras
y Guardar como nuevo preajuste.
-
Hacemos clic para aplicar.
-
Así termina este tutorial.
-
Si te interesa, hay otros tutoriales
-
que profundizan más
en otras funciones para crear animaciones.
-
Eso es todo.
Gracias por tu atención.
