✍️
Nota
Ten en cuenta que Phase recibe pequeñas actualizaciones y mejoras constantemente. Nuestros tutoriales podrían ser un poco diferentes de la versión actual de la aplicación.
Animación
¡Dale vida a tus diseños con las herramientas de animación sencillas pero poderosas de Phase! Solo necesitas ingresar al Modo de Animación, avanzar a un punto en la línea de tiempo y editar. Phase se encargará del resto.
Modo de Animación
Cambiando al Modo de Animación
Presiona el botón Animar
en la parte inferior de la pantalla para comenzar. Alternativamente, activa o desactiva el Modo de Animación presionando la tecla .
en la parte inferior de la pantalla para comenzar. Alternativamente, activa o desactiva el Modo de Animación presionando la tecla A
En el Modo de Animación, algunos íconos adicionales aparecen junto al control de animación:
- Reproducir / Pausar
: El control básico para la reproducción de video. O utiliza para iniciar y detener.Barra espaciadora - Bucle
: La animación se reiniciará cuando llegue al final. - Velocidad de reproducción
: Haz clic en esto para alternar entre x0.25, x0.5, x1.0, x1.25, x1.5 y x2.0.
Si bien los íconos son importantes, el mayor cambio en el Modo de Animación es que el panel de la Línea de Tiempo aparece en la parte inferior de la pantalla. El flujo de trabajo típico de animación en Phase utiliza la Línea de Tiempo extensamente, por lo que aquí tienes una visión general básica.
Interfaz de la Línea de Tiempo
Al crear una animación desde cero, la línea de tiempo estará vacía, excepto por una línea vertical blanca. Ese es el indicador de reproducción, el marcador de tiempo para la animación. Puede arrastrarse o moverse a un tiempo fijo escribiendo en el campo sobre la parte izquierda de la línea de tiempo.
Por otro lado, cuando se importa un Lottie, aparecerán varios íconos en forma de diamante en la línea de tiempo. Estos son fotogramas clave, los puntos en los que las capas cambian en la animación. Si una capa tiene fotogramas clave establecidos, aparece en un nuevo panel de capas en el lado izquierdo de la línea de tiempo.
Cada fotograma clave representa un punto en el que se ha ajustado al menos una propiedad. Anidadas dentro de cada capa están todas las propiedades que han sido cambiadas. Las capas pueden expandirse para revelar una lista de todas las propiedades que tienen fotogramas clave.
✍️
Nota
Si no hay fotogramas clave en los 0 segundos, entonces las propiedades en ese momento son las mismas que cuando el Modo de Animación está desactivado.
La mayor parte del trabajo en la creación de una animación consiste en establecer fotogramas clave, ¡así que vamos a profundizar en eso ahora!
Creación de Fotogramas Clave
Agregar fotogramas clave en Phase es tan intuitivo como construir el diseño estático. La única diferencia es que, antes de hacer cualquier cambio, el indicador de reproducción debe moverse al momento en el que el cambio debe ocurrir.
Hay dos métodos para cambiar fotogramas clave, descritos a continuación.
Método A: Crear Fotogramas Clave Cambiando Propiedades
Creando automáticamente fotogramas clave al ajustar la posición de los elementos
- Mueve el indicador de reproducción a un punto en la línea de tiempo.
- Selecciona un elemento, y muévelo o cambia cualquiera de sus propiedades.
- Phase crea automáticamente un fotograma clave con la nueva configuración.
El Método A es similar a rediseñar a lo largo del tiempo. No requiere muchos clics, por lo que puede ser más fácil de usar. Sin embargo, hay ocasiones en las que será necesario crear fotogramas clave manualmente.
Método B: Agregar Fotogramas Clave Manualmente
Agregando fotogramas clave mediante entrada manual
- Mueve el indicador de reproducción a un punto en la línea de tiempo.
- Pasa el cursor sobre cualquier propiedad. Aparece un indicador de fotograma clave en forma de diamante.
- Haz clic en el ícono.
- Phase crea un fotograma clave en ese momento, incluso si no se han cambiado propiedades.
El Método B es más útil cuando se retrasa una animación. Por ejemplo, si una animación debe permanecer igual desde 0 segundos hasta un punto posterior, crea un fotograma clave que mantenga esa propiedad a lo largo del tiempo. Esto puede actuar como un nuevo primer fotograma clave, incluso si no está al comienzo de la animación.
Ajustes de Fotogramas Clave
Ajustar a Fotograma Clave
Siempre que hagamos clic en un fotograma clave, el indicador de reproducción se ajustará automáticamente a él. Hay otras formas de seleccionar y modificar nuestros fotogramas clave:
- Arrastra el fotograma clave para moverlo a lo largo de la línea de tiempo, cambiando el tiempo de la animación.
- Cambia cualquier parámetro en el momento del fotograma clave para actualizar la animación en ese momento.
- Presiona para eliminar fotogramas clave.⌫ RetrocesooSuprimir
- Selecciona un fotograma clave, cambia a un momento posterior y presiona oCommand ⌘Cpara copiarlo.CtrlC
Al hacer clic derecho en un fotograma clave, Phase presentará las siguientes opciones:
- Duplicar a Tiempo Actual: Crea una copia del fotograma clave en el tiempo actual. Duplicar solo tiene un efecto si el indicador de reproducción está en un tiempo diferente al del fotograma clave. Por ejemplo: para crear un nuevo fotograma clave basado en uno en 1 segundo, ajusta el tiempo a un poco después (como 1.2 segundos) antes de duplicar. Presionando oCommand ⌘Dtambién duplicará los fotogramas clave.CtrlD
- Restablecer a Valor Inicial: Cambia la propiedad del fotograma clave seleccionado para que sea la misma que el valor cuando el Modo de Animación está desactivado. Esto es útil para crear animaciones en bucle.
- Eliminar Fotograma Clave: Elimina el fotograma clave. La animación se recalcula como si no estuviera allí, incluyendo conectar fotogramas clave a ambos lados del eliminado.
En el lado derecho de la línea de tiempo, al hacer clic en un fotograma clave, se pueden ver los ajustes de suavizado. Estos permiten ajustar la aceleración y suavidad de la animación.
Interpolación
Interpolación de Formas en 2 Segundos
Al animar, se pueden establecer fotogramas en varios intervalos para decidir cómo se verá la animación en esos puntos en el tiempo. Entre cada fotograma, Phase calcula automáticamente la animación mediante un proceso llamado interpolación.
Aquí tenemos una animación simple. A los 0 segundos, no hay fotograma, por lo que se utiliza el diseño predeterminado de un círculo amarillo. Luego, en el punto de 1 segundo, la animación se ajusta para que sea un diamante rojo. Además, la animación también está configurada para rotar 180 grados en ese momento.
 0 segundos |  0.5 segundos |  1 segundo |
Entre los 0 y 1 segundos, no hay fotograma. Sin embargo, Phase estima la posición del borde y los colores de relleno entre cada punto. Así que, al observar la forma entre 0 segundos y 1 segundo, aparecerá como una especie de cuadrado redondeado con un relleno naranja.
📖
Leer Más
Phase es capaz de crear interpolaciones más detalladas que pueden acelerar o desacelerar gradualmente. Este proceso se llama suavizado, sobre el cual tenemos un artículo aparte.
Comienza a Animar
Comienza a crear con nuestra plataforma web gratuita
Aprende
Términos legales
© Phase Software GmbH 2024