Animar atributos

Cambiar los colores, grosores de trazo, estilos y otros atributos de los elementos durante una animación.

Una animación de atributos seleccionada, con la ilustración de plantas, la línea de tiempo y los valores de los atributos visibles.

Animación de atributos cambia atributos de los elementos a lo largo del tiempo, como un trazo que engrosa o un relleno que pasa de rojo a azul. Úsala para los atributos que no cubre ningún otro bloque: mover, girar, escalar y redimensionar tienen sus propios bloques de transformación, y para mostrar u ocultar elementos están los bloques de mostrar y ocultar.

Con ella puedes:

  • Elegir los atributos que cambian: entre los atributos del propio elemento, los mismos con los que le das estilo.
  • Dar a cada elemento sus propios valores: cada elemento conserva su propio inicio y final.
  • Fijar los tiempos del cambio: sus tiempos, su easing y, si quieres, un escalonado entre elementos.

Los valores iniciales y finales de cada atributo se fijan en las filas del bloque, o en los campos del propio elemento al inicio o al final del bloque. Consulta Valores iniciales y finales.

Crearlo

El panel de acciones enumera los atributos elegidos, el panel de atributos muestra sus rombos seleccionados y la línea de tiempo aparece debajo.

Añade un bloque que cambia los atributos que elijas.

  • Operación:
    1. Selecciona uno o varios elementos en el tablero.
    2. En el Modo animación, elige Animación de atributos en el panel de acciones.
    3. Selecciona los rombos de los atributos que quieras animar. Consulta Elegir atributos. El panel de acciones muestra cada atributo elegido con sus valores de Inicio y Final.
    4. Usa Inicio y Final para dejar cada atributo como debe estar al inicio y al final del bloque. Consulta Fijar el inicio y el final.
    5. Elige Aceptar en el panel de acciones, o Cancelar para salir sin crear nada.
  • Resultado: un bloque de un segundo empieza en el cabezal, seleccionado, con su sección en el panel de atributos. Salvo que los cambiaras al elegir, cada elemento empieza y acaba en su valor actual, así que el tablero se queda igual hasta que fijas un valor inicial o final.

Elegir atributos

Un rombo relleno marca el color de relleno seleccionado; los demás controles de relleno tienen rombos atenuados.

Mientras eliges, aparece un rombo junto a cada campo que se puede animar:

  • Rombo atenuado: el atributo aún no está en el bloque. Selecciónalo para añadirlo.
  • Rombo relleno: el atributo está en el bloque. Vuelve a seleccionarlo para quitarlo.
  • Sin rombo: el campo no se puede animar, como el lenguaje de un editor de código.

El panel de acciones muestra una vista previa de los atributos elegidos en una lista, con sus valores de Inicio y Final:

  • Editar un valor: cámbialo en su columna Inicio o Final.
  • Quitar un atributo: selecciona a su lado, igual que si vuelves a seleccionar su rombo.

La selección no cambia mientras eliges. Si un rombo no se puede elegir, su descripción emergente dice por qué, por ejemplo cuando el atributo tiene su propio bloque, como la posición o la rotación.

Fijar el inicio y el final

Botones de vista previa Inicio y Final sobre los atributos elegidos y sus valores.

Mientras eliges, Inicio y Final, encima de la lista de atributos elegidos, llevan el tablero al inicio o al final del bloque. Los elementos se muestran tal como están ahí, así que fijas cada atributo directamente en ese estado:

  • Inicio: fija los atributos como empieza la animación.
  • Final: fíjalos como termina.

Así puedes animar atributos que solo existen en uno de los dos extremos. Un relleno que empieza como Sin relleno no tiene color que elegir al inicio: elige Final, pon el relleno en Relleno sólido de color rojo y elige ahí su color.

Con varios elementos

  • Un bloque para todos: anima todos los elementos, y cada elemento conserva sus propios valores iniciales y finales.
  • Los elementos sin un atributo quedan fuera de él: la fila del atributo en la sección del bloque dice a cuántos elementos se aplica, por ejemplo 2 de 3 elementos.
  • Cambiarlos uno detrás de otro: activa Escalonar elementos y pon Ref en Fin. Consulta Escalonado y easing.

Cómo cambian los valores

Se puede animar cualquier atributo que muestre un rombo al elegir. Cómo pasa su valor del inicio al final depende del tipo de valor:

  • Valores que se pueden mezclar, como los colores y los números: cambian de forma gradual, según el easing del bloque.
  • Valores que no se pueden mezclar, como los estilos y los interruptores: cambian al valor final a mitad del cambio, según el easing. Con una curva que se pasa de su final y vuelve, como Retroceso o Elástica, pueden cambiar varias veces.

El bloque de animación de atributos en el panel de línea de tiempo

Bloques de atributos para un elemento, varios elementos y elementos escalonados, con franjas de cambio dentro de los dos últimos.

En el panel de línea de tiempo, los bloques de atributos se muestran en amarillo ().

  • Los manejadores muestran qué anima el bloque: circulares para un elemento, cuadrados para varios y con forma de cámara en una cámara.
  • Marcas de escalonado: los bloques escalonados muestran una marca donde empieza cada elemento posterior.
  • Franja de cambio: cuando el bloque anima valores que no se pueden mezclar, como estilos o interruptores, una franja dentro de él muestra qué valor se usa: fina mientras se ve el valor inicial y gruesa cuando manda el valor final, sean cuales sean esos valores. Sigue el easing, y los elementos escalonados tienen una franja cada uno.
  • Bloques solapados: varios bloques de atributos pueden solaparse en un mismo elemento. Consulta Antes y después del bloque.

En el tablero

Un bloque de atributos no muestra ningún indicador en el tablero. Para ver lo que hace, consulta el panel de atributos o el panel de línea de tiempo.

Atributos

Los ajustes de un bloque de atributos están en la sección Animación de atributos del panel de atributos.

Tiempos

Inicio, fin y duración de una animación de atributos.
  • Tiempo (Inicio y Fin): instantes de inicio y fin del bloque, en segundos.
  • Duración: tiempo total del bloque. Cambiarla conserva los valores iniciales y finales, así que el cambio va más rápido o más despacio.
  • Bloque sin duración: un bloque con el mismo inicio y fin pasa de sus valores iniciales a los finales en ese instante.

Atributos animados

Valores de inicio y final del color de relleno, el estilo y el grosor del trazo, con un botón para quitar cada fila.
  • La lista: una fila por cada atributo que anima el bloque, con sus valores de Inicio y Final.
    • Quitar una fila: con un solo bloque seleccionado, cada fila tiene un botón para quitarla. Quitar una fila devuelve ese atributo a como estaba antes del bloque, en todos los elementos. Quitar la última fila elimina el bloque.
    • Filas de algunos elementos: una fila que se aplica solo a algunos elementos termina diciendo a cuántos, por ejemplo 2 de 3 elementos.
    • Varios bloques seleccionados: la lista muestra las filas de todos ellos, y una fila que solo tienen algunos bloques termina diciendo cuántos, por ejemplo 1 de 2 bloques.
  • Añadir atributos, en el panel de acciones, vuelve a elegir para el bloque, con sus atributos ya elegidos.
    • Selecciona un rombo para añadir una fila o para quitarla, y después elige Aceptar.
    • Las filas que siguen conservan sus valores, las que se quitan vuelven a sus valores de antes del bloque, y las nuevas empiezan en el valor actual de cada elemento.

Valores iniciales y finales

El campo del color de relleno aparece resaltado y es de solo lectura entre el inicio y el final del bloque.
  • Escríbelos en las filas: usa las columnas Inicio y Final de cada fila. Un valor se aplica a todos los elementos a los que se aplica la fila.
  • O en los campos del elemento: al inicio o al final del bloque, los campos del propio elemento en el panel de atributos también editan ese valor. Entre el inicio y el final, y mientras se reproduce la animación, esos campos aparecen resaltados y de solo lectura.
  • El primer inicio puede cambiar el valor de base: editar el primer valor inicial de un atributo también puede cambiar el valor al que vuelve el elemento cuando ninguna animación lo controla, por ejemplo al eliminar el bloque.

Escalonado y easing

Escalonado activado con un retraso de 0,3 segundos, seguido de los controles de easing.
  • Escalonar elementos: cuando un bloque anima varios elementos, los empieza uno detrás de otro. Consulta Escalonar elementos.
  • Panel de reordenación: con Escalonar elementos activado, fija el orden en que empiezan los elementos. Consulta Escalonar elementos.
  • Easing: cómo se acelera y se frena el cambio. Consulta Easing.

Antes y después del bloque

  • Antes del primer bloque: un elemento muestra el valor inicial de ese bloque.
  • Cuando un bloque termina: el elemento conserva su valor final.
  • Bloques solapados: varios bloques de atributos pueden solaparse en un mismo elemento, y cada atributo sigue a un solo bloque a la vez:
    • Mientras varios están en curso, manda el que empezó más tarde.
    • Cuando ninguno está en curso, el que terminó más tarde mantiene su valor final.
    • Antes de que empiece ninguno, el primero muestra su valor inicial.
  • Con una Animación de opacidad o de trazo: en el mismo elemento, el bloque de atributos fija los valores que la otra animación también controla solo mientras está en curso. Antes, entre y después de sus bloques, la otra animación muestra su propio valor.
  • Al eliminar un bloque: vuelven los valores de base de sus elementos. Donde otra animación cambia el mismo atributo, toma el relevo.

Acciones

Eliminar, Cortar, Copiar, Pegar, Añadir atributos, Reasignar y Crear pausa de bloque en el panel de acciones.

Con un bloque de atributos seleccionado, el panel de acciones ofrece estas acciones de bloque:

  • Eliminar: borra el bloque. Consulta Acciones de bloque.
  • Cortar, Copiar y Pegar: mueven o copian el bloque a otro momento o secuencia. Consulta Cortar, copiar y pegar bloques.
  • Reasignar: cambia los elementos que anima el bloque. Los elementos que siguen conservan sus valores, los nuevos empiezan en sus valores actuales, y los que se quitan vuelven a sus valores de antes del bloque. Consulta Acciones de bloque.
  • Crear pausa de bloque: mantiene los valores un momento. Consulta Pausas de bloque.
  • Añadir atributos: cambia los atributos que anima el bloque. Consulta Atributos animados.