Animaciones con guion gráfico

  • Artículo

Las animaciones con guion gráfico no son solo animaciones en el sentido visual. Una animación con guion gráfico es una manera de cambiar el valor de una propiedad de dependencia como una función de tiempo. Una de las principales razones por las que podría necesitar una animación con guion gráfico que no procede de la biblioteca de animaciones es definir el estado visual de un control, como parte de una plantilla de control o una definición de página.

Diferencias con Silverlight y WPF

Si está familiarizado con Microsoft Silverlight o Windows Presentation Foundation (WPF), lea esta sección; De lo contrario, puede omitirlo.

En general, la creación de animaciones con guion gráfico en una aplicación de Windows Runtime es como Silverlight o WPF. Pero hay varias diferencias importantes:

  • Las animaciones con guion gráfico no son la única manera de animar visualmente una interfaz de usuario, ni son necesariamente la manera más fácil para que los desarrolladores de aplicaciones lo hagan. En lugar de usar animaciones con guion gráfico, a menudo es una práctica de diseño mejor usar animaciones de tema y animaciones de transición. Estos pueden crear rápidamente animaciones de interfaz de usuario recomendadas sin entrar en las complejidades de la propiedad de animación dirigida. Para obtener más información, consulta Información general sobre animaciones.
  • En Windows Runtime, muchos controles XAML incluyen animaciones de tema y animaciones de transición como parte de su comportamiento integrado. Por lo general, los controles WPF y Silverlight no tenían un comportamiento de animación predeterminado.
  • No todas las animaciones personalizadas que crees se pueden ejecutar de forma predeterminada en una aplicación de Windows Runtime, si el sistema de animación determina que la animación podría provocar un rendimiento incorrecto en la interfaz de usuario. Las animaciones en las que el sistema determina que podría haber un impacto en el rendimiento se denominan animaciones dependientes. Depende porque el reloj de la animación funciona directamente con el subproceso de la interfaz de usuario, que también es donde la entrada activa del usuario y otras actualizaciones están intentando aplicar los cambios en tiempo de ejecución a la interfaz de usuario. Una animación dependiente que consume muchos recursos del sistema en el subproceso de la interfaz de usuario puede hacer que la aplicación no responda en determinadas situaciones. Si la animación provoca un cambio de diseño o tiene el potencial de afectar al rendimiento en el subproceso de la interfaz de usuario, a menudo es necesario habilitar explícitamente la animación para ver que se ejecuta. Eso es lo que es la propiedad EnableDependentAnimation en clases de animación específicas. Consulta Animaciones dependientes e independientes para obtener más información.
  • Las funciones de aceleración personalizadas no se admiten actualmente en Windows Runtime.

Definición de animaciones con guion gráfico

Una animación con guion gráfico es una manera de cambiar el valor de una propiedad de dependencia como una función de tiempo. La propiedad que estás animando no siempre es una propiedad que afecta directamente a la interfaz de usuario de la aplicación. Pero dado que XAML trata de definir la interfaz de usuario para una aplicación, normalmente es una propiedad relacionada con la interfaz de usuario que estás animando. Por ejemplo, puede animar el ángulo de un RotateTransform o el valor de color del fondo de un botón.

Una de las principales razones por las que podría definir una animación con guion gráfico es si es un autor de control o vuelve a crear plantillas de un control y está definiendo estados visuales. Para obtener más información, consulta Animaciones con guion gráfico para estados visuales.

Tanto si está definiendo estados visuales como una animación personalizada para una aplicación, los conceptos y las API de las animaciones con guion gráfico que se describen en este tema se aplican principalmente a cualquiera de ellas.

Para poder animarse, la propiedad de destino con una animación con guion gráfico debe ser una propiedad de dependencia. Una propiedad de dependencia es una característica clave de la implementación xaml de Windows Runtime. Las propiedades que se pueden escribir de los elementos de interfaz de usuario más comunes suelen implementarse como propiedades de dependencia, de modo que pueda animarlas, aplicar valores enlazados a datos o aplicar un estilo y establecer como destino la propiedad con un establecedor. Para obtener más información sobre cómo funcionan las propiedades de dependencia, consulte Introducción a las propiedades de dependencia.

La mayoría de las veces, defines una animación con guion gráfico escribiendo XAML. Si usas una herramienta como Microsoft Visual Studio, generará el XAML para ti. También es posible definir una animación con guion gráfico con código, pero eso es menos común.

Veamos un ejemplo sencillo. En este ejemplo XAML, la propiedad Opacity se anima en un objeto Rectangle determinado.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>

  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Identificación del objeto que se va a animar

En el ejemplo anterior, el guión gráfico animaba la propiedad Opacity de un rectángulo. No declaras las animaciones en el propio objeto. En su lugar, lo hace dentro de la definición de animación de un guión gráfico. Los guiones gráficos normalmente se definen en XAML que no están en las proximidades inmediatas de la definición de interfaz de usuario XAML del objeto que se va a animar. En su lugar, normalmente se configuran como un recurso XAML.

Para conectar una animación a un destino, haga referencia al destino mediante su nombre de programación de identificación. Siempre debes aplicar el atributo x:Name en la definición de la interfaz de usuario XAML para asignar un nombre al objeto que quieras animar. A continuación, el objeto se dirige a animar estableciendo Storyboard.TargetName en la definición de animación. Para el valor de Storyboard.TargetName, se usa la cadena de nombre del objeto de destino, que es lo que estableció anteriormente y en otro lugar con el atributo x:Name.

Establecer como destino la propiedad de dependencia para animar

Establece un valor para Storyboard.TargetProperty en la animación. Esto determina qué propiedad específica del objeto de destino se anima.

A veces, debe tener como destino una propiedad que no sea una propiedad inmediata del objeto de destino, pero que está anidada más profundamente en una relación de propiedad de objeto. A menudo debe hacerlo para explorar en profundidad un conjunto de valores de propiedad y objeto de contribución hasta que pueda hacer referencia a un tipo de propiedad que se pueda animar (Double, Point, Color). Este concepto se denomina destino indirecto y la sintaxis para tener como destino una propiedad de esta manera se conoce como ruta de acceso de propiedad.

Este es un ejemplo. Un escenario común para una animación con guion gráfico es cambiar el color de una parte de una interfaz de usuario o control de la aplicación para representar que el control está en un estado determinado. Supongamos que quieres animar el primer plano de un TextBlock, para que pase de rojo a verde. Esperas que un ColorAnimation esté implicado y que sea correcto. Sin embargo, ninguna de las propiedades de los elementos de la interfaz de usuario que afectan al color del objeto es realmente de tipo Color. En su lugar, son de tipo Brush. Por lo tanto, lo que realmente necesita tener como destino para la animación es la propiedad Color de la clase SolidColorBrush, que es un tipo derivado de Brush que normalmente se usa para estas propiedades de interfaz de usuario relacionadas con el color. Y esto es lo que parece en términos de formar una ruta de acceso de propiedad para el destino de la propiedad de la animación:

<Storyboard x:Name="myStoryboard">
  <ColorAnimation
    Storyboard.TargetName="tb1"
    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
    From="Red" To="Green"/>
</Storyboard>

Aquí se muestra cómo pensar en esta sintaxis en términos de sus partes:

  • Cada conjunto de paréntesis () incluye un nombre de propiedad.
  • Dentro del nombre de la propiedad, hay un punto y ese punto separa un nombre de tipo y un nombre de propiedad, de modo que la propiedad que está identificando es inequívoca.
  • El punto en el medio, el que no está entre paréntesis, es un paso. Esto se interpreta mediante la sintaxis para significar, tomar el valor de la primera propiedad (que es un objeto), pasar por paso a paso por su modelo de objetos y establecer como destino una subpropiación específica del valor de la primera propiedad.

Esta es una lista de escenarios de destino de animación en los que probablemente usarás la segmentación de propiedades indirectas y algunas cadenas de ruta de acceso de propiedad que aproximan la sintaxis que usarás:

Observará que algunos de estos ejemplos usan corchetes alrededor de números. Se trata de un indexador. Indica que el nombre de la propiedad anterior tiene una colección como valor y que desea que un elemento (como se identifica mediante un índice de base cero) de dentro de esa colección.

También puedes animar las propiedades adjuntas xaml. Incluya siempre el nombre de propiedad adjunto completo entre paréntesis, por ejemplo (Canvas.Left). Para obtener más información, consulta Animar propiedades adjuntas xaml.

Para obtener más información sobre cómo usar una ruta de acceso de propiedad para el destino indirecto de la propiedad que se va a animar, consulta Sintaxis de ruta de acceso de la propiedad o propiedad adjunta Storyboard.TargetProperty.

Tipos de animación

El sistema de animación de Windows Runtime tiene tres tipos específicos a los que se pueden aplicar animaciones con guion gráfico:

También hay un tipo de animación Object generalizado para los valores de referencia de objeto, que analizaremos más adelante.

Especificación de los valores animados

Hasta ahora hemos mostrado cómo dirigirse al objeto y a la propiedad para animar, pero aún no hemos descrito lo que hace la animación al valor de propiedad cuando se ejecuta.

Los tipos de animación que hemos descrito a veces se conocen como animaciones From/To/By. Esto significa que la animación cambia el valor de una propiedad, con el tiempo, usando una o varias de estas entradas que proceden de la definición de animación:

  • El valor comienza en el valor From . Si no especifica un valor From , el valor inicial es cualquier valor que tenga la propiedad animada en el momento en que se ejecute la animación. Puede ser un valor predeterminado, un valor de un estilo o una plantilla, o un valor aplicado específicamente por una definición de interfaz de usuario XAML o código de aplicación.
  • Al final de la animación, el valor es el valor Para .
  • O bien, para especificar un valor final relativo al valor inicial, establezca la propiedad By . Lo establecería en lugar de la propiedad To .
  • Si no especificas un valor To o un valor By , el valor final es el valor que tenga la propiedad animada en el momento en que se ejecute la animación. En este caso, mejor tendrá un valor From porque, de lo contrario, la animación no cambiará el valor en absoluto; sus valores iniciales y finales son los mismos.
  • Normalmente, una animación tiene al menos uno de From, By o To, pero nunca los tres.

Veamos el ejemplo XAML anterior y veamos de nuevo los valores From y To y Duration. El ejemplo está animando la propiedad Opacity y el tipo de propiedad de Opacidad es Double. Por lo tanto, la animación que se va a usar aquí es DoubleAnimation.

From="1.0" To="0.0" especifica que cuando se ejecuta la animación, la propiedad Opacity comienza en un valor de 1 y anima a 0. En otras palabras, en términos de lo que estos valores Double significan para la propiedad Opacity, esta animación hará que el objeto inicie opaco y, a continuación, se desvanezca a transparente.

...
<Storyboard x:Name="myStoryboard">
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:1"/>
</Storyboard>
...

Duration="0:0:1" especifica cuánto dura la animación, es decir, la rapidez con la que se atenua el rectángulo. Se especifica una propiedad Duration en forma de horas:minutos:segundos. La duración del tiempo en este ejemplo es de un segundo.

Para obtener más información sobre los valores de duración y la sintaxis XAML, consulta Duración.

Nota:

En el ejemplo que mostramos, si estaba seguro de que el estado inicial del objeto que se está animando tiene opacidad siempre igual a 1, ya sea a través del valor predeterminado o explícito, podría omitir el valor From, la animación usaría el valor inicial implícito y el resultado sería el mismo.

From/To/By admite valores NULL

Hemos mencionado anteriormente que puedes omitir From, To o By y, por tanto, usar valores no animados actuales como sustitutos de un valor que falta. Las propiedades From, To o By de una animación no son del tipo que podría adivinar. Por ejemplo, el tipo de la propiedad DoubleAnimation.To no es Double. En su lugar, es un valor que acepta valores NULL para Double. Y su valor predeterminado es NULL, no 0. Ese valor NULL es la forma en que el sistema de animación distingue que no se ha establecido específicamente un valor para una propiedad From, To o By . Las extensiones de componente de Visual C++ (C++/CX) no tienen un tipo que acepta valores NULL, por lo que usa IReference en su lugar.

Otras propiedades de una animación

Las siguientes propiedades descritas en esta sección son todas opcionales en que tienen valores predeterminados que son adecuados para la mayoría de las animaciones.

AutoReverse

Si no especifica AutoReverse o RepeatBehavior en una animación, esa animación se ejecutará una vez y se ejecutará durante el tiempo especificado como Duración.

La propiedad AutoReverse especifica si una escala de tiempo se reproduce inverso después de que alcance el final de su duración. Si lo estableces en true, la animación se invierte después de que alcance el final de su duración declarada, cambiando el valor de su valor final (To) a su valor inicial (From). Esto significa que la animación se ejecuta eficazmente para duplicar la hora de su duración.

RepeatBehavior

La propiedad RepeatBehavior especifica cuántas veces se reproduce una escala de tiempo o una duración mayor en la que se debe repetir la escala de tiempo. De forma predeterminada, una escala de tiempo tiene un recuento de iteración de "1x", lo que significa que se reproduce una vez por su Duración y no se repite.

Puede hacer que la animación ejecute varias iteraciones. Por ejemplo, un valor de "3x" hace que la animación se ejecute tres veces. O bien, puede especificar una duración diferente para RepeatBehavior. Esa duración debe ser mayor que la duración de la propia animación para ser efectiva. Por ejemplo, si especifica un RepeatBehavior de "0:0:10", para una animación que tenga una duración de "0:0:2", esa animación se repite cinco veces. Si estas no se dividen uniformemente, la animación se trunca en el momento en que se alcanza el tiempo de RepeatBehavior , que podría estar en parte. Por último, puedes especificar el valor especial "Forever", que hace que la animación se ejecute infinitamente hasta que se detenga deliberadamente.

Para obtener más información sobre los valores repeatBehavior y la sintaxis XAML, consulta RepeatBehavior.

FillBehavior="Stop"

De forma predeterminada, cuando finaliza una animación, la animación deja el valor de propiedad como valor final To o By-modified incluso después de que se supere su duración. Sin embargo, si establece el valor de la propiedad FillBehavior en FillBehavior.Stop, el valor del valor animado se revierte a lo que fuera antes de que se aplicara la animación, o más precisamente al valor efectivo actual determinado por el sistema de propiedades de dependencia (para obtener más información sobre esta distinción, consulte Información general sobre las propiedades de dependencia).

BeginTime

De forma predeterminada, beginTime de una animación es "0:0:0", por lo que comienza tan pronto como se ejecuta el guión gráfico contenedor. Puedes cambiar esto si el Guión gráfico contiene más de una animación y quieres escalonar las horas de inicio de los demás frente a una animación inicial o crear un retraso corto deliberado.

SpeedRatio

Si tienes más de una animación en un Guión gráfico, puedes cambiar la velocidad de tiempo de una o varias de las animaciones en relación con el Guión gráfico. Es el guión gráfico primario que, en última instancia, controla cómo transcurre el tiempo de duración mientras se ejecutan las animaciones. Esta propiedad no se usa con mucha frecuencia. Para obtener más información, consulta SpeedRatio.

Definir más de una animación en un guión gráfico

El contenido de un guión gráfico puede ser más de una definición de animación. Es posible que tenga más de una animación si aplica animaciones relacionadas a dos propiedades del mismo objeto de destino. Por ejemplo, puede cambiar las propiedades TranslateX y TranslateY de un TranslateTransform usado como RenderTransform de un elemento de interfaz de usuario; esto hará que el elemento se traduzca diagonalmente. Necesitas dos animaciones diferentes para lograr eso, pero es posible que quieras que las animaciones formen parte del mismo Guión gráfico porque siempre quieres que esas dos animaciones se ejecuten juntas.

Las animaciones no tienen que ser del mismo tipo ni tener como destino el mismo objeto. Pueden tener duraciones diferentes y no tienen que compartir ningún valor de propiedad.

Cuando se ejecuta el guión gráfico primario, cada una de las animaciones de se ejecutará también.

La clase Storyboard realmente tiene muchas de las mismas propiedades de animación que los tipos de animación, ya que ambas comparten la clase base Timeline. Por lo tanto, un Guión gráfico puede tener repeatBehavior o beginTime. Normalmente no los estableces en un Guión gráfico, a menos que quieras que todas las animaciones contenidas tengan ese comportamiento. Como regla general, cualquier propiedad Timeline establecida en un Guión gráfico se aplica a todas sus animaciones secundarias. Si se deja de establecer, el Guión gráfico tiene una duración implícita que se calcula a partir del valor Duration más largo de las animaciones contenidas. Una duración establecida explícitamente en un guión gráfico que sea más corta que una de sus animaciones secundarias hará que esa animación se corte, lo que no suele ser deseable.

Un guión gráfico no puede contener dos animaciones que intenten tener como destino y animar la misma propiedad en el mismo objeto. Si prueba esto, obtendrá un error en tiempo de ejecución cuando el guión gráfico intente ejecutarse. Esta restricción se aplica incluso si las animaciones no se superponen en el tiempo debido a valores y duraciones BeginTime deliberadamente diferentes. Si realmente quieres aplicar una escala de tiempo de animación más compleja a la misma propiedad en un solo guión gráfico, la manera de hacerlo es usar una animación de fotograma clave. Consulte Animaciones de función de fotograma clave y aceleración.

El sistema de animación puede aplicar más de una animación al valor de una propiedad, si esas entradas proceden de varios guiones gráficos. El uso de este comportamiento deliberadamente para ejecutar guiones gráficos simultáneamente no es habitual. Sin embargo, es posible que una animación definida por la aplicación que se aplique a una propiedad de control modifique el valor HoldEnd de una animación que se ejecutó anteriormente como parte del modelo de estado visual del control.

Definición de un guión gráfico como un recurso

Un Guión gráfico es el contenedor en el que se colocan objetos de animación. Normalmente, se define el Guión gráfico como un recurso que está disponible para el objeto que desea animar, ya sea en Recursos de nivel de página o Application.Resources.

En este ejemplo siguiente se muestra cómo el guión gráfico de ejemplo anterior se encuentra en una definición de recursos de nivel de página, donde Storyboard es un recurso con clave de la página raíz. Anote el atributo x:Name. Este atributo es cómo se define un nombre de variable para storyboard, de modo que otros elementos de XAML y código puedan hacer referencia al Guión gráfico más adelante.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>
  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Definir recursos en la raíz XAML de un archivo XAML, como page.xaml o app.xaml, es una práctica común para organizar los recursos con clave en el XAML. También puede factorizar recursos en archivos independientes y combinarlos en aplicaciones o páginas. Para obtener más información, consulta Referencias de recursos XAML y ResourceDictionary.

Nota:

XAML de Windows Runtime admite la identificación de recursos mediante el atributo x:Key o el atributo x:Name. El uso del atributo x:Name es más común para un Guión gráfico, ya que querrá hacer referencia a él por nombre de variable finalmente, para que pueda llamar a su método Begin y ejecutar las animaciones. Si usa el atributo x:Key, deberá usar métodos ResourceDictionary como el indexador Item para recuperarlo como un recurso con clave y, a continuación, convertir el objeto recuperado en Storyboard para usar los métodos storyboard.

Guiones gráficos para estados visuales

También colocas tus animaciones dentro de una unidad storyboard cuando declaras las animaciones de estado visual para la apariencia visual de un control. En ese caso, los elementos storyboard que defina se insertan en un contenedor de VisualState que está anidado más profundamente en un estilo (es el estilo que es el recurso con clave). En este caso, no necesita una clave o un nombre para storyboard porque es el objeto VisualState que tiene un nombre de destino al que puede invocar VisualStateManager. Los estilos de los controles se suelen tener en cuenta en archivos ResourceDictionary XAML independientes en lugar de colocarlos en una colección Resources de página o aplicación. Para obtener más información, consulta Animaciones con guion gráfico para estados visuales.

Animaciones dependientes e independientes

En este punto es necesario introducir algunos puntos importantes sobre cómo funciona el sistema de animación. En concreto, la animación interactúa fundamentalmente con la forma en que una aplicación de Windows Runtime se representa en la pantalla y cómo esa representación usa subprocesos de procesamiento. Una aplicación de Windows Runtime siempre tiene un subproceso de interfaz de usuario principal y este subproceso es responsable de actualizar la pantalla con la información actual. Además, una aplicación de Windows Runtime tiene un subproceso de composición, que se usa para precalcular diseños inmediatamente antes de que se muestren. Al animar la interfaz de usuario, es posible que haya mucho trabajo para el subproceso de la interfaz de usuario. El sistema debe volver a dibujar áreas grandes de la pantalla con intervalos de tiempo bastante cortos entre cada actualización. Esto es necesario para capturar el valor de propiedad más reciente de la propiedad animada. Si no tiene cuidado, existe el riesgo de que una animación pueda hacer que la interfaz de usuario tenga menos capacidad de respuesta o afectará al rendimiento de otras características de la aplicación que también están en el mismo subproceso de interfaz de usuario.

La variedad de animaciones que se determina que tienen algún riesgo de ralentizar el subproceso de la interfaz de usuario se denomina animación dependiente. Una animación no sujeta a este riesgo es una animación independiente. La distinción entre animaciones dependientes e independientes no solo viene determinada por tipos de animación (DoubleAnimation , etc.), como se ha descrito anteriormente. En su lugar, se determina mediante qué propiedades específicas se animan y otros factores, como la herencia y la composición de los controles. Hay circunstancias en las que, incluso si una animación cambia la interfaz de usuario, la animación puede tener un impacto mínimo en el subproceso de la interfaz de usuario y, en su lugar, puede controlarse mediante el subproceso de composición como animación independiente.

Una animación es independiente si tiene alguna de estas características:

Advertencia

Para que la animación se trate como independiente, debe establecer Duration="0"explícitamente . Por ejemplo, si quitas Duration="0" de este XAML, la animación se trata como dependiente, aunque keyTime del fotograma sea "0:0:0".

<Storyboard>
  <DoubleAnimationUsingKeyFrames
    Duration="0"
    Storyboard.TargetName="Button2"
    Storyboard.TargetProperty="Width">
    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="200"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

Si la animación no cumple estos criterios, es probable que sea una animación dependiente. De forma predeterminada, el sistema de animación no ejecutará una animación dependiente. Por lo tanto, durante el proceso de desarrollo y pruebas, es posible que ni siquiera vea la animación en ejecución. Puedes seguir usando esta animación, pero debes habilitar específicamente cada una de estas animaciones dependientes. Para habilitar la animación, establezca la propiedad EnableDependentAnimation del objeto de animación en true. (Cada uno La subclase Timeline que representa una animación tiene una implementación diferente de la propiedad, pero todas se denominan EnableDependentAnimation.

El requisito de habilitar animaciones dependientes que caen en el desarrollador de la aplicación es un aspecto de diseño consciente del sistema de animación y la experiencia de desarrollo. Queremos que los desarrolladores sepan que las animaciones tienen un costo de rendimiento para la capacidad de respuesta de la interfaz de usuario. Las animaciones con un rendimiento deficiente son difíciles de aislar y depurar en una aplicación a escala completa. Por lo tanto, es mejor activar solo las animaciones dependientes que realmente necesitas para la experiencia de interfaz de usuario de la aplicación. No queríamos poner en peligro el rendimiento de la aplicación debido a animaciones decorativas que usan muchos ciclos. Para obtener más información sobre las sugerencias de rendimiento para la animación, consulta Optimizar animaciones y medios.

Como desarrollador de aplicaciones, también puedes optar por aplicar una configuración de toda la aplicación que siempre deshabilite las animaciones dependientes, incluso aquellas en las que EnableDependentAnimation sea true. Consulte Timeline.AllowDependentAnimations.

Sugerencia

Si usa el panel de animación en Blend para Visual Studio 2019, siempre que intente aplicar una animación dependiente a una propiedad de estado visual, se mostrarán advertencias en el diseñador. Las advertencias no se mostrarán en la salida de la compilación ni en la lista de errores. Si estás editando XAML manualmente, el diseñador no mostrará una advertencia. En tiempo de ejecución al depurar, la salida de depuración del panel Salida mostrará una advertencia de que la animación no es independiente y se omitirá.

Inicio y control de una animación

¡Todo lo que hemos mostrado hasta ahora no hace que una animación se ejecute o se aplique! Hasta que se inicia la animación y se ejecuta, el valor cambia que una animación declara en XAML es latente y aún no se producirá. Debes iniciar explícitamente una animación de alguna manera relacionada con la duración de la aplicación o la experiencia del usuario. En el nivel más sencillo, se inicia una animación llamando al método Begin en el Guión gráfico que es el elemento primario de esa animación. No puedes llamar a métodos desde XAML directamente, así que lo que hagas para habilitar las animaciones, lo harás desde el código. Será el código subyacente para las páginas o componentes de la aplicación, o quizás la lógica del control si va a definir una clase de control personalizada.

Normalmente, llamaremos a Begin y simplemente dejaremos que la animación se ejecute hasta su finalización de duración. Sin embargo, también puede usar métodos Pause, Resume y Stop para controlar storyboard en tiempo de ejecución, así como otras API que se usan para escenarios de control de animación más avanzados.

Cuando llamas a Begin en un guión gráfico que contiene una animación que se repite infinitamente (RepeatBehavior="Forever"), esa animación se ejecuta hasta que se descarga la página que lo contiene, o llamas específicamente a Pause o Stop.

Inicio de una animación desde el código de la aplicación

Puede iniciar animaciones automáticamente o en respuesta a las acciones del usuario. En el caso automático, normalmente se usa un evento de duración del objeto como Loaded para actuar como desencadenador de animación. El evento Loaded es un buen evento que se usará para esto porque en ese momento la interfaz de usuario está lista para la interacción y la animación no se cortará al principio porque otra parte de la interfaz de usuario todavía se estaba cargando.

En este ejemplo, el evento PointerPressed se adjunta al rectángulo para que cuando el usuario haga clic en el rectángulo, comienza la animación.

<Rectangle PointerPressed="Rectangle_Tapped"
  x:Name="MyAnimatedRectangle"
  Width="300" Height="200" Fill="Blue"/>

El controlador de eventos inicia el Guión gráfico (la animación) mediante el método Begin del Guión gráfico.

myStoryboard.Begin();

myStoryboard().Begin();

myStoryboard->Begin();

myStoryBoard.Begin()

Puede controlar el evento Completed si desea que se ejecute otra lógica después de que la animación haya terminado de aplicar valores. Además, para solucionar problemas de interacciones de animación o sistema de propiedades, el método GetAnimationBaseValue puede ser útil.

Sugerencia

Siempre que estés codificando para un escenario de aplicación en el que estás iniciando una animación desde el código de la aplicación, es posible que quieras revisar de nuevo si ya existe una animación o una transición en la biblioteca de animaciones para tu escenario de interfaz de usuario. Las animaciones de biblioteca permiten una experiencia de interfaz de usuario más coherente en todas las aplicaciones de Windows Runtime y son más fáciles de usar.

 

Animaciones para estados visuales

El comportamiento de ejecución de un guión gráfico que se usa para definir el estado visual de un control es diferente de la forma en que una aplicación puede ejecutar un guión gráfico directamente. Como se aplica a una definición de estado visual en XAML, storyboard es un elemento de un objeto que contiene VisualState y el estado en su conjunto se controla mediante la API de VisualStateManager. Todas las animaciones de se ejecutarán según sus valores de animación y propiedades timeline cuando un control use visualState contenedor. Para obtener más información, consulta Guiones gráficos para estados visuales. En el caso de los estados visuales, fillBehavior aparente es diferente. Si se cambia un estado visual a otro estado, se cancelan todos los cambios de propiedad aplicados por el estado visual anterior y sus animaciones, aunque el nuevo estado visual no aplique específicamente una nueva animación a una propiedad.

Guión gráfico y EventTrigger

Hay una manera de iniciar una animación que se puede declarar completamente en XAML. Sin embargo, esta técnica ya no se usa ampliamente. Es una sintaxis heredada de WPF y versiones anteriores de Silverlight antes de la compatibilidad con VisualStateManager. Esta sintaxis EventTrigger sigue funcionando en XAML de Windows Runtime por motivos de importación o compatibilidad, pero solo funciona para un comportamiento de desencadenador basado en el evento FrameworkElement.Loaded; si intenta desencadenar otros eventos, se producirán excepciones o no se compilarán. Para obtener más información, consulta EventTrigger o BeginStoryboard.

Animar propiedades adjuntas xaml

No es un escenario común, pero puedes aplicar un valor animado a una propiedad adjunta XAML. Para obtener más información sobre qué son las propiedades adjuntas y cómo funcionan, consulte Introducción a las propiedades adjuntas. El destino de una propiedad adjunta requiere una sintaxis de ruta de acceso de propiedad que incluya el nombre de la propiedad entre paréntesis. Puede animar las propiedades adjuntas integradas, como Canvas.ZIndex, mediante un objectAnimationUsingKeyFrames que aplica valores enteros discretos. Sin embargo, una limitación existente de la implementación xaml de Windows Runtime es que no puedes animar una propiedad adjunta personalizada.

Más tipos de animación y pasos siguientes para aprender a animar la interfaz de usuario

Hasta ahora, hemos mostrado las animaciones personalizadas que se animan entre dos valores y, a continuación, interpolan linealmente los valores según sea necesario mientras se ejecuta la animación. Se denominan animaciones From/To/By. Pero hay otro tipo de animación que le permite declarar valores intermedios que se encuentran entre el inicio y el final. Se denominan animaciones de fotograma clave. También hay una manera de modificar la lógica de interpolación en una animación De/a/por o en una animación de fotograma clave. Esto implica aplicar una función de aceleración. Para obtener más información sobre estos conceptos, consulta Animaciones de función de fotograma clave y aceleración.