Anima un logotipo
Línea de tiempo, interpolaciones, clave automática y aceleración, y un SVG que se anima solo en el navegador
Animas un logotipo: una barra sale deslizándose desde detrás de un círculo y un punto aparece en fundido. Luego eliges cómo corre el movimiento y lo exportas a un SVG que se anima solo en cualquier navegador.
1 · El logotipo en un grupo
Una línea de tiempo pertenece a un contenedor: una página o un grupo. Pon las partes del logotipo en un grupo (⌘ G) — aquí un círculo, una barra escondida detrás del círculo y un punto blanco transparente — y abre el panel Timeline con el botón timeline de la barra en la parte inferior de los inspectores.
2 · La primera interpolación
Selecciona la barra y pulsa + en la cabecera de la Timeline: nace una interpolación vacía, de 2 segundos, en el cabezal. Lleva el cabezal al final de la interpolación, a 2 s, haciendo clic en la regla, y arrastra la barra a la derecha. Con el cabezal en un tiempo distinto de cero, mover un objeto escribe la llegada de la interpolación en lugar de cambiar el objeto: es la clave automática. La barra de la interpolación dice qué cambia: transform.
3 · El punto que aparece
Selecciona el punto y pulsa +: la interpolación nace en el cabezal, de 2 a 4 s. Lleva el cabezal a 4 s y, en el panel Fill & stroke, pon Opacity en 100: el punto aparecerá en fundido. Su barra dice opacity.
4 · La aceleración
Haz clic en la barra de la primera interpolación: queda en edición, y aparece el panel Tween. En la fila Easing elige backEaseOut: la barra llega, se pasa un poco y vuelve. Una interpolación nueva es lineal; puedes elegir entre 38 ecuaciones.
5 · Mira a mitad de camino
Haz clic en la regla a 0,35 s: el lienzo muestra el logotipo en ese momento, con la barra a mitad de camino y el punto todavía transparente. play en la cabecera reproduce la animación, y ⇧ + arrastrar en la regla dibuja un bucle.
6 · Exporta a SVG animado
Desde el botón open and save, Export SVG…: activa Animation y pulsa Export. Las líneas de tiempo y las interpolaciones van en el archivo con un pequeño script: abierto en un navegador, el SVG se anima solo, se repite en bucle, y un clic lo detiene y lo reanuda. En otro editor se ve el dibujo en reposo.
