Animaciones con guion gráficoStoryboarded animations

Las animaciones de guión gráfico no son solo animaciones en un sentido visual.Storyboarded animations are not just animations in the visual sense. Una animación de guión gráfico es una forma de cambiar el valor de una propiedad de dependencia como una función de tiempo.A storyboarded animation is a way to change the value of a dependency property as a function of time. Una de las razones principales por las que quizás necesites una animación con guión gráfico que no provenga de la Biblioteca de animaciones es para definir el estado visual de un control, como parte de una plantilla de control o una definición de página.One of the main reasons you might need a storyboarded animation that's not from the animation library is to define the visual state for a control, as part of a control template or page definition.

Diferencias con Silverlight y WPFDifferences with Silverlight and WPF

Si estás familiarizado con Microsoft Silverlight o Windows Presentation Foundation (WPF), lee esta sección; si no, puedes saltártela.If you are familiar with Microsoft Silverlight or Windows Presentation Foundation (WPF), read this section; otherwise, you can skip it.

En general, la creación de animaciones de guión gráfico en una aplicación de Windows Runtime es como Silverlight o WPF.In general, creating storyboarded animations in a Windows Runtime app is like Silverlight or WPF. Aunque existe una serie de diferencias importantes:But there are a number of important differences:

  • Las animaciones de guión gráfico no son la única forma de animar visualmente una interfaz de usuario para una aplicación. Tampoco representan la forma de animación más sencilla para los desarrolladores de aplicaciones.Storyboarded animations are not the only way to visually animate a UI, nor are they necessarily the easiest way for app developers to do so. En lugar de usar animaciones de guión gráfico, muchas veces un procedimiento de diseño más recomendado es usar animaciones de tema y animaciones de transición.Rather than using storyboarded animations it's often a better design practice to use theme animations and transition animations. Estas animaciones pueden crear rápidamente animaciones recomendadas para la interfaz de usuario, sin necesidad de meterse en la complejidad que implica la selección de propiedades de animación como destino.These can quickly create recommended UI animations without getting into the intricacies of animation property targeting. Para obtener más información, vea información general sobre animaciones.For more info see Animations overview.
  • En Windows Runtime, muchos controles XAML incluyen animaciones de tema y animaciones de transición como parte de su comportamiento integrado.In the Windows Runtime, many XAML controls include theme animations and transition animations as part of their built-in behavior. Para la mayoría, los controles de WPF y Silverlight no tenían un comportamiento de animación predeterminado.For the most part, WPF and Silverlight controls didn't have a default animation behavior.
  • No todas las animaciones personalizadas que creas pueden ejecutarse de forma predeterminada en una aplicación de Windows Runtime, si el sistema de animación determina que la animación puede provocar un mal rendimiento en la interfaz de usuario.Not all custom animations you create can run by default in a Windows Runtime app, if the animation system determines that the animation might cause bad performance in your UI. Las animaciones que según el sistema pueden afectar al rendimiento se llaman animaciones dependientes.Animations where the system determines there could be a performance impact are called dependent animations. Son dependientes porque la temporización de tu animación funciona directamente en contra del subproceso de la interfaz de usuario, que además es donde la entrada del usuario activo y otras actualizaciones intentan aplicar los cambios en tiempo de ejecución a la interfaz de usuario.It's dependent because the clocking of your animation is directly working against the UI thread, which is also where active user input and other updates are trying to apply the runtime changes to UI. Una animación dependiente que consuma muchos recursos del sistema en el subproceso de la interfaz de usuario puede hacer que la aplicación parezca que no responde en ciertas situaciones.A dependent animation that's consuming extensive system resources on the UI thread can make the app appear unresponsive in certain situations. Si tu animación produce un cambio en el diseño o tiene el potencial para afectar al rendimiento del subproceso de la interfaz de usuario, tendrás que habilitar de forma explícita la animación para poder verla en ejecución.If your animation causes a layout change or otherwise has the potential to impact performance on the UI thread, you often need to explicitly enable the animation to see it run. Ese es precisamente el cometido de la propiedad EnableDependentAnimation en clases de animación específicas.That's what the EnableDependentAnimation property on specific animation classes is for. Consulta Animaciones dependientes e independientes para obtener más información.See Dependent and independent animations for more info.
  • Actualmente no se admiten funciones de aceleración personalizadas en Windows Runtime.Custom easing functions are not currently supported in the Windows Runtime.

Definir de animaciones de guion gráficoDefining storyboarded animations

Una animación de guión gráfico es una forma de cambiar el valor de una propiedad de dependencia como una función de tiempo.A storyboarded animation is a way to change the value of a dependency property as a function of time. La propiedad que estás animando no siempre es una propiedad que afecta directamente la interfaz de usuario de tu aplicación.The property you are animating is not always a property that directly affects the UI of your app. Pero dado que XAML está relacionado con la definición de la interfaz de usuario para una aplicación, por lo general, se trata de una propiedad que está relacionada con la interfaz de usuario que estás animando.But since XAML is about defining UI for an app, usually it is a UI-related property you are animating. Por ejemplo, puedes animar el ángulo de RotateTransform o el valor de color de fondo de un botón.For example, you can animate the angle of a RotateTransform, or the color value of a button's background.

Una de las razones principales por la que quizás quieras definir una animación de guión gráfico es porque eres un autor de control o deseas realizar nuevamente la plantilla de un control, y estás definiendo estados visuales.One of the main reasons you might be defining a storyboarded animation is if you are a control author or are re-templating a control, and you are defining visual states. Para obtener más información, vea animaciones con guion gráfico para Estados visuales.For more info, see Storyboarded animations for visual states.

Ya sea que quieras definir estados visuales o una animación personalizada para una aplicación, los conceptos y las API para las animaciones de guión gráfico que se describen en este tema se aplican a ambos casos.Whether you are defining visual states or a custom animation for an app, the concepts and APIs for storyboarded animations that are described in this topic mostly apply to either.

Para que pueda ser animada, la propiedad que estás seleccionando como destino con una animación de guion gráfico debe ser una propiedad de dependencia.In order to be animated, the property you are targeting with a storyboarded animation must be a dependency property. Una propiedad de dependencia es una función clave de la implementación XAML de Windows Runtime.A dependency property is a key feature of the Windows Runtime XAML implementation. Las propiedades que se pueden escribir de los elementos más comunes de la interfaz de usuario se implementan generalmente como propiedades de dependencia, de modo que puedas animarlas, aplicar valores de enlazado a datos, o aplicar un Estilo y seleccionar como destino la propiedad con un Establecedor.The writeable properties of most common UI elements are typically implemented as dependency properties, so that you can animate them, apply data-bound values, or apply a Style and target the property with a Setter. Para obtener más información sobre cómo funcionan las propiedades de dependencia, consulte información general sobre las propiedades de dependencia.For more info about how dependency properties work, see Dependency properties overview.

La mayoría de las veces, defines una animación de guión gráfico al escribir XAML.Most of the time, you define a storyboarded animation by writing XAML. Si usas una herramienta como Microsoft Visual Studio, generará el XAML para ti.If you use a tool such as Microsoft Visual Studio, it will produce the XAML for you. También es posible definir una animación de guión gráfico mediante código, pero no es tan común.It's possible to define a storyboarded animation using code too, but that's less common.

Veamos un ejemplo sencillo.Let's look at a simple example. En este ejemplo de XAML, la propiedad Opacidad se anima en un objeto Rectángulo determinado.In this XAML example, the Opacity property is animated on a particular Rectangle object.

<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>

Identificar el objeto que se va a animarIdentifying the object to animate

En el ejemplo anterior, el guión gráfico animaba la propiedad Opacidad de un Rectángulo.In the previous example, the storyboard was animating the Opacity property of a Rectangle. No debes declarar las animaciones en el objeto en sí.You don't declare the animations on the object itself. En su lugar, lo hace en la definición de animación de un guion gráfico.Instead, you do this within the animation definition of a storyboard. Los guiones gráficos se definen normalmente en XAML que no están en las proximidades inmediatas de la definición de la interfaz de usuario XAML del objeto que se va a animar.Storyboards are usually defined in XAML that's not in the immediate vicinity of the XAML UI definition of the object to animate. En cambio, normalmente se establecen como un recurso XAML.Instead, they're usually set up as a XAML resource.

Para conectar una animación a un destino, debes hacer referencia al destino mediante su nombre de programación de identificación.To connect an animation to a target, you reference the target by its identifying programming name. Siempre debes aplicar el atributo x:Name en la definición de interfaz de usuario de XAML para nombrar el objeto que quieres animar.You should always apply the x:Name attribute in the XAML UI definition to name the object that you want to animate. Luego, debes seleccionar como destino el objeto que quieres animar mediante la configuración de Storyboard.TargetName dentro de la definición de animación.You then target the object to animate by setting Storyboard.TargetName within the animation definition. Para el valor de Storyboard.TargetName, usa la cadena de nombre del objeto de destino, que es el que estableciste antes en otra parte con el atributo x:Name.For the value of Storyboard.TargetName, you use the name string of the target object, which is what you set earlier and elsewhere with x:Name attribute.

Seleccionar como destino la propiedad de dependencia que se va a animarTargeting the dependency property to animate

Establece un valor para Storyboard.TargetProperty en la animación.You set a value for Storyboard.TargetProperty in the animation. De esta forma, se determina qué propiedad específica del objeto de destino se anima.This determines which specific property of the targeted object is animated.

A veces debes seleccionar como destino una propiedad que no es una propiedad inmediata del objeto de destino, pero que se anida más profundamente en una relación de objeto-propiedad.Sometimes you need to target a property that's not an immediate property of the target object, but that is nested more deeply in an object-property relationship. Muchas veces debes hacer esto para explorar en profundidad un conjunto de objetos de contribución y valores de propiedades hasta que puedas hacer referencia a un tipo de propiedad que se pueda animar (Doble, Punto, Color).You often need to do this in order to drill down into a set of contributing object and property values until you can reference a property type that can be animated (Double, Point, Color). Este concepto se denomina selección indirecta de destinoy la sintaxis para seleccionar una propiedad como destino de esta manera se conoce como ruta de propiedad.This concept is called indirect targeting, and the syntax for targeting a property in this way is known as a property path.

Aquí tiene un ejemplo.Here's an example. Un escenario común para una animación con guión gráfico es cambiar el color de una parte de la interfaz de usuario o el control de una aplicación, para representar que el control tiene un estado en particular.One common scenario for a storyboarded animation is to change the color of a part of an app UI or control in order to represent that the control is in a particular state. Supongamos que quieres animar el Primer plano de un TextBlock, de modo que cambie de rojo a verde.Say you want to animate the Foreground of a TextBlock, so that it turns from red to green. Seguro que esperas que aparezca ColorAnimation. Estás en lo cierto.You'd expect that a ColorAnimation is involved, and that's correct. Sin embargo, ninguna de las propiedades de los elementos de la interfaz de usuario que afectan al color del objeto son realmente del tipo Color.However, none of the properties on UI elements that affect the object's color are actually of type Color. Por el contrario, son del tipo Pincel.Instead, they're of type Brush. Por lo tanto, lo que en realidad debes seleccionar como destino para la animación es la propiedad Color de la clase SolidColorBrush, que es un tipo de derivado de Pincel que se usa normalmente para estas propiedades de interfaz de usuario relacionadas con color.So what you actually need to target for animation is the Color property of the SolidColorBrush class, which is a Brush-derived type that's typically used for these color-related UI properties. Este es el aspecto en términos de formación de una ruta de acceso de propiedades para la selección de propiedad de tu animación:And here's what that looks like in terms of forming a property path for your animation's property targeting:

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

Aquí te mostramos lo que debes tener en cuenta en la sintaxis en cuanto a sus partes:Here's how to think of this syntax in terms of its parts:

  • Cada conjunto de paréntesis () encierra el nombre de una propiedad.Each set of () parentheses encloses a property name.
  • Dentro del nombre de la propiedad, hay un punto, y ese punto separa un nombre de tipo y un nombre de propiedad, para que la propiedad que estás identificando no sea ambigua.Within the property name, there's a dot, and that dot separates a type name and a property name, so that the property you're identifying is unambiguous.
  • El punto del medio, el que está fuera de los paréntesis, es un paso.The dot in the middle, the one that's not inside parentheses, is a step. Lo que la sintaxis interpreta es tomar el valor de la primera propiedad (que es un objeto), meterse en el modelo de su objeto y seleccionar como destino una subpropiedad específica del valor de la primera propiedad.This is interpreted by the syntax to mean, take the value of the first property (which is an object), step into its object model, and target a specific sub-property of the first property's value.

Esta es una lista de escenarios de destino de animación en los que probablemente utilizará la compatibilidad de propiedades indirecta y algunas cadenas de ruta de acceso de propiedad que se aproximan a la sintaxis que usará:Here's a list of animation targeting scenarios where you'll probably be using indirect property targeting, and some property path strings that approximates the syntax you'll use:

Notarás que en algunos de estos ejemplos se usan corchetes para encerrar los números.You'll notice some of these examples use square brackets around numbers. Es un indizador.This is an indexer. Indica que el nombre de la propiedad que precede tiene una colección como valor y que quieres un elemento (identificado por un índice basado en cero) de la colección.It indicates that the property name preceding it has a collection as value, and that you want an item (as identified by a zero-based index) from within that collection.

También puedes animar propiedades adjuntas de XAML.You can also animate XAML attached properties. Siempre encierra el nombre completo de la propiedad adjunta entre paréntesis, por ejemplo, (Canvas.Left).Always enclose the full attached property name in parentheses, for example (Canvas.Left). Para obtener más información, vea animar propiedades adjuntas de XAML.For more info, see Animating XAML attached properties.

Para obtener más información sobre cómo usar una ruta de acceso de propiedad para el establecimiento indirecto de destinos de la propiedad que se va a animar, consulte la propiedad adjunta de la Sintaxis de Property-path o Storyboard. TargetProperty.For more info on how to use a property path for indirect targeting of the property to animate, see Property-path syntax or Storyboard.TargetProperty attached property.

Tipos de animaciónAnimation types

El sistema de animación de Windows Runtime tiene tres tipos específicos a los que se pueden aplicar animaciones con guión gráfico:The Windows Runtime animation system has three specific types that storyboarded animations can apply to:

También hay un tipo de animación Objeto generalizada para los valores de referencia del objeto, que analizaremos más adelante.There's also a generalized Object animation type for object reference values, which we'll discuss later.

Especificar los valores animadosSpecifying the animated values

Hasta el momento te hemos mostrado cómo seleccionar como destino el objeto y la propiedad que quieras animar, pero aún no hemos descrito qué hace la animación en el valor de la propiedad cuando se ejecuta.So far we've shown you how to target the object and the property to animate, but haven't yet described what the animation does to the property value when it runs.

A veces se hace referencia a los tipos de animación que hemos descrito como de / a / mediante animaciones.The animation types we've described are sometimes referred to as From/To/By animations. Esto significa que la animación cambia el valor de una propiedad a lo largo del tiempo, mediante una o varias de las entradas que provienen de la definición de la animación:This means that the animation is changing the value of a property, over time, using one or more of these inputs that come from the animation definition:

  • El valor comienza en el valor De origen.The value starts at the From value. Si no especificas un valor De origen, el valor inicial es cualquier valor que la propiedad animada tenga en el momento anterior a que se ejecute la animación.If you don't specify a From value, the starting value is whatever value the animated property has at the time before the animation runs. Puede ser un valor predeterminado, un valor de un estilo o una plantilla, o un valor específicamente aplicado por código de aplicación o una definición de interfaz de usuario de XAML.This might be a default value, a value from a style or template, or a value specifically applied by a XAML UI definition or app code.
  • Al final de la animación, el valor es De destino.At the end of the animation, the value is the To value.
  • O bien, para especificar un valor final relativo al valor inicial, configura la propiedad Por.Or, to specify an ending value relative to the starting value, set the By property. Deberías configurar esto en lugar de la propiedad De destino.You'd set this instead of the To property.
  • Si no especificas un valor De destino o un valor Por, el valor final es cualquier valor que la propiedad animada tenga en el momento anterior a que se ejecute la animación.If you don't specify a To value or a By value, the ending value is whatever value the animated property has at the time before the animation runs. En este caso, es mejor tener un valor De origen porque, de lo contrario, la animación no cambiará el valor. Los valores iniciales y finales son los mismos.In this case you'd better have a From value because otherwise the animation won't change the value at all; its starting and ending values are both the same.
  • Generalmente, una animación tiene al menos uno de los valores De origen, Por o De destino, pero nunca los tres juntos.An animation typically has at least one of From, By or To but never all three.

Volvamos al ejemplo de XAML anterior y observemos nuevamente los valores De origen y De destino, y Duración.Let's revisit the earlier XAML example and look again at the From and To values, and the Duration. En el ejemplo se está animando la propiedad Opacity, y el tipo de propiedad de Opacity es Double.The example is animating the Opacity property, and the property type of Opacity is Double. Entonces, la animación que debemos usar aquí es DoubleAnimation.So the animation to use here is DoubleAnimation.

From="1.0" To="0.0" especifica que cuando la animación se ejecuta, la propiedad Opacidad comienza con el valor 1 y anima hasta el 0.From="1.0" To="0.0" specifies that when the animation runs, the Opacity property starts at a value of 1 and animates to 0. En otras palabras, en términos de lo que estos valores Doble representan para la propiedad Opacidad, la animación provocará que el objeto comience siendo opaco y después se atenúe hasta convertirse en transparente.In other words, in terms of what these Double values mean to the Opacity property, this animation will cause the object to start opaque and then fade to transparent.

...
<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 la duración de la animación, es decir, la rapidez con la que se atenúa el rectángulo.Duration="0:0:1" specifies how long the animation lasts, that is, how fast the rectangle fades. Una propiedad Duración se especifica con el formato del tipo horas:minutos:segundos.A Duration property is specified in the form of hours:minutes:seconds. La duración en este ejemplo es de un segundo.The time duration in this example is one second.

Para obtener más información sobre los valores de duración y la sintaxis de XAML, vea Duration.For more info about Duration values and the XAML syntax, see Duration.

Nota

En el ejemplo que mostramos, si está seguro de que el estado inicial del objeto que se está animando tiene una opacidad siempre igual a 1, ya sea a través del conjunto predeterminado o explícito, podría omitir el valor de de , la animación usaría el valor de inicio implícito y el resultado sería el mismo.For the example we showed, if you were sure that the starting state of the object being animated has Opacity always equal to 1, either through the default or an explicit set, you could omit the From value, the animation would use the implicit starting value, and the result would be the same.

From/To/By pueden tener valores nullFrom/To/By are nullable

Antes mencionamos que puedes omitir De origen, De destino o Por y, por ende, usar los valores actuales no aminados como sustitutos para un valor que falta.We mentioned previously that you can omit From, To or By and thus use current non-animated values as substitutes for a missing value. Las propiedades from, too by de una animación no son del tipo que se puede adivinar.From, To, or By properties of an animation aren't of the type you might guess. Por ejemplo, el tipo de la propiedad DoubleAnimation.To no es Doble.For example the type of the DoubleAnimation.To property isn't Double. En su lugar, es un valor null para Double.Instead, it's a Nullable for Double. Y su valor predeterminado es null, no 0.And its default value is null, not 0. Ese valor null es cómo distingue el sistema de animación que no ha establecido específicamente un valor para una propiedad from, too by .That null value is how the animation system distinguishes that you haven't specifically set a value for a From, To, or By property. Las extensiones del componente Visual C++ (C++/CX) no tienen un tipo NULL, por lo que usan IReference en su lugar.Visual C++ component extensions (C++/CX) doesn't have a Nullable type, so it uses IReference instead.

Otras propiedades de una animaciónOther properties of an animation

Las próximas propiedades que se describen en esta sección son todas opcionales, ya que tienen valores predeterminados que son adecuados para la mayoría de las animaciones.The next properties described in this section are all optional in that they have defaults that are appropriate for most animations.

AutoReverseAutoReverse

Si no especifica Autoreveje o RepeatBehavior en una animación, la animación se ejecutará una vez y se ejecutará durante el tiempo especificado como duración.If you don't specify either AutoReverse or RepeatBehavior on an animation, that animation will run once, and run for the time specified as the Duration.

La propiedad AutoReverse especifica si se reproduce la línea de tiempo a la inversa después de que llega al final del valor Duration.The AutoReverse property specifies whether a timeline plays in reverse after it reaches the end of its Duration. Si lo estableces como true, la animación se invierte después de llegar al final del valor de Duración declarado, y cambia el valor de su valor final (De destino) nuevamente a su valor original (De origen).If you set it to true, the animation reverses after it reaches the end of its declared Duration, changing the value from its ending value (To) back to its starting value (From). Esto significa que la animación se ejecuta eficazmente durante el doble de tiempo de su duración.This means that the animation effectively runs for double the time of its Duration.

RepeatBehaviorRepeatBehavior

La propiedad RepeatBehavior especifica cuántas veces se reproduce una línea de tiempo, o una duración más prolongada dentro de la cual debe repetirse la línea de tiempo.The RepeatBehavior property specifies either how many times a timeline plays, or a larger duration that the timeline should repeat within. De manera predeterminada, una línea de tiempo tiene un recuento de iteraciones de "1x", lo que significa que se reproduce una vez para su Duración y no se repite.By default, a timeline has an iteration count of "1x", which means it plays one time for its Duration and does not repeat.

Puede hacer que la animación ejecute varias iteraciones.You can cause the animation to run multiple iterations. Por ejemplo, un valor de "3x" hace que la animación se ejecute tres veces.For example, a value of "3x" causes the animation to run three times. O bien, puedes especificar una Duración diferente para RepeatBehavior.Or, you can specify a different Duration for RepeatBehavior. Esa Duración no debe ser mayor que la Duración de la animación en sí para que sea eficaz.That Duration should be longer than the Duration of the animation itself to be effective. Por ejemplo, si especificas un RepeatBehavior de "0:0:10", para una animación que tiene una Duración de "0:0:2", la animación se repite cinco veces.For example, if you specify a RepeatBehavior of "0:0:10", for an animation that has a Duration of "0:0:2", that animation repeats five times. Si no se dividen en partes iguales, la animación se trunca en el momento en que se alcanza el tiempo de RepeatBehavior, que puede ser la mitad.If these don't divide evenly, the animation gets truncated at the time that the RepeatBehavior time is reached, which might be partway through. Por último, puede especificar el valor especial "Forever", que hace que la animación se ejecute infinitamente hasta que se detenga deliberadamente.Finally, you can specify the special value "Forever", which causes the animation to run infinitely until it's deliberately stopped.

Para obtener más información sobre los valores de RepeatBehavior y la sintaxis de XAML, consulte RepeatBehavior.For more info about RepeatBehavior values and the XAML syntax, see RepeatBehavior.

FillBehavior="Stop"FillBehavior="Stop"

De manera predeterminada, cuando una animación finaliza, la animación deja el valor de la propiedad como el valor final To o el valor modificado By, incluso después de que se supere la duración.By default, when an animation ends, the animation leaves the property value as the final To or By-modified value even after its duration is surpassed. Pero, si estableces el valor de la propiedad FillBehavior en FillBehavior.Stop, el valor del valor animado se revierte al valor que estaba antes de que se aplique la animación o, más precisamente, al valor actual eficaz determinado por el sistema de propiedades de dependencia (para obtener más información sobre esta distinción, consulta Introducción a las propiedades de dependencia).However, if you set the value of the FillBehavior property to FillBehavior.Stop, the value of the animated value reverts to whatever the value was before the animation was applied, or more precisely to the current effective value as determined by the dependency property system (for more info on this distinction, see Dependency properties overview).

BeginTimeBeginTime

De manera predeterminada, la propiedad BeginTime de una animación es "0:0:0", para que comience tan pronto como se ejecute la clase Storyboard que contiene.By default, the BeginTime of an animation is "0:0:0", so it begins as soon as its containing Storyboard runs. Puedes cambiar esto si el Guión gráfico contiene más de una animación y quieres escalonar las horas de inicio de las otras animaciones contra una animación inicial, o para crear una breve demora deliberada.You might change this if the Storyboard contains more than one animation and you want to stagger the start times of the others versus an initial animation, or to create a deliberate short delay.

SpeedRatioSpeedRatio

Si tienes más de una animación en un Guión gráfico puedes cambiar la frecuencia de tiempo de una o varias de las animaciones relativas al Guión gráfico.If you have more than one animation in a Storyboard you can change the time rate of one or more of the animations relative to the Storyboard. Es el Guión gráfico principal que controla en última instancia de qué manera transcurre el tiempo de la Duración mientras se ejecutan las animaciones.It's the parent Storyboard that ultimately controls how the Duration time elapses while the animations run. Esta propiedad no se usa con mucha frecuencia.This property isn't used very often. Para obtener más información, consulta SpeedRatio.For more info see SpeedRatio.

Definir más de una animación en una clase StoryboardDefining more than one animation in a Storyboard

El contenido de una clase Storyboard puede comprender más de una definición de animación.The contents of a Storyboard can be more than one animation definition. Es posible que tengas más de una animación si estás aplicando animaciones relacionadas a dos propiedades del mismo objeto de destino.You might have more than one animation if you are applying related animations to two properties of the same target object. Por ejemplo, puedes cambiar las propiedades TranslateX y TranslateY de TranslateTransform usadas como RenderTransform de un elemento de la interfaz de usuario. Esto generará que el elemento se traduzca diagonalmente.For example, you might change both the TranslateX and TranslateY properties of a TranslateTransform used as the RenderTransform of a UI element; this will cause the element to translate diagonally. Para lograrlo, necesitas dos animaciones diferentes. 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.You need two different animations to accomplish that, but you might want the animations to be part of the same Storyboard because you always want those two animations to be run together.

No es necesario que las animaciones sean del mismo tipo o seleccionen como destino el mismo objeto.The animations don't have to be the same type, or target the same object. Pueden tener distintas duraciones y no compartir ningún valor de las propiedades.They can have different durations, and don't have to share any property values.

Cuando se ejecuta el Guión gráfico principal, se ejecutarán también cada una de las animaciones.When the parent Storyboard runs, each of the animations within will run too.

La clase Guión gráfico, en realidad, tiene muchas propiedades de animación iguales que los tipos de animación, ya que ambas comparten la clase base de la Línea de tiempo.The Storyboard class actually has a lot of the same animation properties as the animation types do, because both share the Timeline base class. De este modo, un Guión gráfico puede tener RepeatBehavior o BeginTime.Thus, a Storyboard can have a RepeatBehavior, or a BeginTime. Por lo general, estos valores no se configuran en un Guion gráfico a menos que quieras que todas las animaciones tengan ese comportamiento.You don't usually set these on a Storyboard though unless you want all the contained animations to have that behavior. Como regla general, cualquier propiedad Línea de tiempo configurada en un Guión gráfico se aplica a todas sus animaciones secundarias.As a general rule, any Timeline property as set on a Storyboard applies to all its child animations. Si lo dejas sin configurar, el Guión gráfico tiene una duración implícita que se calcula desde el valor Duración de las animaciones contenidas.If let unset, the Storyboard has an implicit duration that's calculated from the longest Duration value of the contained animations. Una Duración configurada explícitamente en un Guión gráfico que es más breve que la de sus animaciones secundarias provocará que la animación se corte, algo que nadie quiere.An explicitly set Duration on a Storyboard that's shorter than one of its child animations will cause that animation to get cut off, which isn't usually desirable.

Un guion gráfico no puede contener dos animaciones que intenten seleccionar como destino y animar la misma propiedad en el mismo objeto.A storyboard can't contain two animations that attempt to target and animate the same property on the same object. Si lo intentas, obtendrás un error en tiempo de ejecución cuando el guion gráfico intente ejecutarse.If you try this, you'll get a runtime error when the storyboard tries to run. Esta restricción se aplica aunque las animaciones no se superpongan en tiempo debido a distintas duraciones y valores BeginTime deliberados.This restriction applies even if the animations don't overlap in time because of deliberately different BeginTime values and durations. Si realmente quieres aplicar una línea de tiempo de animación más compleja a la misma propiedad en un solo guión gráfico, la forma de hacerlo es usar una animación de fotograma clave.If you really want to apply a more complex animation timeline to the same property in a single storyboard, the way to do this is to use a key-frame animation. Consulta Fotograma clave y animaciones de función de aceleración.See Key-frame and easing function animations.

El sistema de animación puede aplicar más de una animación al valor de una propiedad, si dichas entradas provienen de varios guiones gráficos.The animation system can apply more than one animation to the value of a property, if those inputs come from multiple storyboards. Usar este comportamiento de manera deliberada para ejecutar simultáneamente guiones gráficos no es común.Using this behavior deliberately for simultaneously running storyboards isn't common. Sin embargo, es posible que una animación definida por la aplicación que aplicaste a una propiedad de control modifique el valor HoldEnd de una animación que se ejecutó previamente como parte del modelo de estado visual del control.However it's possible that an app-defined animation that you apply to a control property will be modifying the HoldEnd value of an animation that was previously run as part of the control's visual state model.

Definir un guión gráfico como un recursoDefining a storyboard as a resource

Un Guión gráfico es el contenedor en el que colocas los objetos de la animación.A Storyboard is the container that you put animation objects in. Normalmente, el guion gráfico se define como un recurso que está disponible para el objeto que se desea animar, ya sea en recursos en el nivel de página o en Application. Resources.You typically define the Storyboard as a resource that is available to the object that you want to animate, either in page-level Resources or Application.Resources.

En el ejemplo siguiente, se muestra la manera en que la clase Storyboard del ejemplo anterior forma parte de una definición Resources de nivel de página, donde la clase Storyboard es un recurso con clave de la raíz Page.This next example shows how the previous example Storyboard would be contained in a page-level Resources definition, where the Storyboard is a keyed resource of the root Page. Observa el atributo x:Name.Note the x:Name attribute. Este atributo indica cómo defines un nombre de variable para el Guión gráfico para que otros elementos de XAML, así como el código, puedan hacer referencia al Guión gráfico más adelante.This attribute is how you define a variable name for the Storyboard, so that other elements in XAML as well as code can refer to the Storyboard later.

<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 recursos con clave en tu XAML.Defining resources at the XAML root of a XAML file such as page.xaml or app.xaml is a common practice for how to organize keyed resources in your XAML. También puedes incluir recursos en archivos independientes y combinarlos en aplicaciones o páginas.You also can factor resources into separate files and merge them into apps or pages. Para obtener más información, vea referencias a los recursos de ResourceDictionary y XAML.For more info, see ResourceDictionary and XAML resource references.

Nota

Windows Runtime XAML admite la identificación de recursos mediante el atributo x:Key o el atributo x:Name.Windows Runtime XAML supports identifying resources either using the x:Key attribute or the x:Name attribute. Usar el atributo x:Name es más común para un Guión gráfico porque posiblemente quieras hacer referencia a él finalmente por un nombre de variable y llamar a su método Comenzar y ejecutar las animaciones.Using x:Name attribute is more common for a Storyboard, because you'll want to reference it by variable name eventually, so that you can call its Begin method and run the animations. Si usas el atributo x:Key, deberás usar los métodos ResourceDictionary como el indexador Elemento para recuperarlo como un recurso con clave y después convertir el objeto recuperado en Guión gráfico para usar los métodos Guión gráfico.If you do use x:Key attribute, you'll need to use ResourceDictionary methods such as the Item indexer to retrieve it as a keyed resource and then cast the retrieved object to Storyboard to use the Storyboard methods.

Guiones gráficos para Estados visualesStoryboards for visual states

También puedes colocar tus animaciones en una unidad del Guión gráfico cuando declares las animaciones de estado visual para la apariencia visual de un control.You also put your animations within a Storyboard unit when you are declaring the visual state animations for a control's visual appearance. En ese caso, los elementos de Guión gráfico que definas irán en un contenedor de VisualState anidado más profundamente en un Estilo (el Estilo es el recurso con clave).In that case the Storyboard elements you define go into a VisualState container that's nested more deeply in a Style (it's the Style that is the keyed resource). No necesitas una clave o un nombre para tu Guión gráfico en este caso porque es el VisualState quien tiene un nombre de destino al que puede invocar el VisualStateManager.You don't need a key or name for your Storyboard in this case because it's the VisualState that has a target name that the VisualStateManager can invoke. Los estilos para los controles a menudo se incluyen en archivos XAML ResourceDictionary separados en vez de colocarse en una colección de Recursos de una página o aplicación.The styles for controls are often factored into separate XAML ResourceDictionary files rather than placed in a page or app Resources collection. Para obtener más información, vea animaciones con guion gráfico para Estados visuales.For more info, see Storyboarded animations for visual states.

Animaciones dependientes e independientesDependent and independent animations

En este punto debemos introducir algunas cuestiones importantes sobre el funcionamiento del sistema de animación.At this point we need to introduce some important points about how the animation system works. En particular, la animación interactúa fundamentalmente con la forma en la que una aplicación de Windows Runtime aparece en la pantalla y la forma en la que esa representación usa subprocesos.In particular, animation interacts fundamentally with how a Windows Runtime app renders to the screen, and how that rendering uses processing threads. 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.A Windows Runtime app always has a main UI thread, and this thread is responsible for updating the screen with current information. Además, una aplicación de Windows Runtime tiene un subproceso de composición, que se usa para precalcular los diseños inmediatamente antes de que se muestren.In addition, a Windows Runtime app has a composition thread, which is used for precalculating layouts immediately before they are shown. Cuando animas la interfaz de usuario, existe un potencial de generar mucho trabajo para el subproceso de la interfaz de usuario.When you animate the UI, there's potential to cause a lot of work for the UI thread. El sistema debe volver a dibujar grandes áreas de la pantalla usando intervalos de tiempo bastante cortos entre cada actualización.The system must redraw large areas of the screen using fairly short time intervals between each refresh. Esto es necesario para capturar el último valor de propiedad de la propiedad animada.This is necessary for capturing the latest property value of the animated property. Si no eres cuidadoso, hay riesgos de que una animación pueda hacer que la interfaz de usuario tenga menos capacidad de respuesta o impacte en el rendimiento de las demás funciones de la aplicación que se encuentran en el mismo subproceso de la interfaz de usuario.If you're not careful, there's risk that an animation can make the UI less responsive, or will impact performance of other app features that are also on the same UI thread.

La variedad de animación que está determinada por imponer cierto riesgo de ralentizar el subproceso de la interfaz de usuario se denomina animación dependiente.The variety of animation that is determined to have some risk of slowing down the UI thread is called a dependent animation. Una animación que no está sujeta a este riesgo es una animación independiente.An animation not subject to this risk is an independent animation. La distinción entre animaciones dependientes e independientes no está determinada solamente por los tipos de animación (DoubleAnimation, etc.) tal como describimos anteriormente.The distinction between dependent and independent animations isn't just determined by animation types (DoubleAnimation and so on) as we described earlier. Más bien, está determinada por las propiedades específicas que se animan y otros factores como la herencia y la composición de controles.Instead, it's determined by which specific properties you are animating, and other factors like inheritance and composition of controls. Hay circunstancias en las que aunque una animación cambie la interfaz de usuario, la animación puede tener un impacto mínimo en el subproceso de la interfaz de usuario y, en cambio, puede controlarse con el subproceso de composición como una animación independiente.There are circumstances where even if an animation does change UI, the animation can have minimal impact to the UI thread, and can instead be handled by the composition thread as an independent animation.

Una animación es independiente si presenta alguna de estas características:An animation is independent if it has any of these characteristics:

Advertencia

Para que la animación se trate como independiente, debe establecer explícitamente Duration="0" .In order for your animation to be treated as independent, you must explicitly set Duration="0". Por ejemplo, si quitas Duration="0" de este XAML, la animación se trata como dependiente, aunque el KeyTime del marco es "0:0:0".For example, if you remove Duration="0" from this XAML, the animation is treated as dependent, even though the KeyTime of the frame is "0:0:0".

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

Si tu animación no cumple con estos criterios, probablemente sea una animación dependiente.If your animation doesn't meet these criteria, it's probably a dependent animation. De manera predeterminada, el sistema de animación no ejecutará una animación dependiente.By default, the animation system won't run a dependent animation. Por lo tanto, durante el proceso de desarrollo y prueba, es posible que no veas tu animación en ejecución.So during the process of developing and testing, you might not even be seeing your animation running. De todos modos, puedes usar este tipo de animación, pero debes habilitar de manera específica cada animación dependiente.You can still use this animation, but you must specifically enable each such dependent animation. Para habilitar una animación, establece la propiedad EnableDependentAnimation en el objeto de animación como true.To enable your animation, set the EnableDependentAnimation property of the animation object to true. (Cada subclase de Línea de tiempo que representa una animación tiene una implementación diferente de la propiedad, pero todas se llaman EnableDependentAnimation).(Each Timeline subclass that represents an animation has a different implementation of the property but they're all named EnableDependentAnimation.)

El requisito para habilitar animaciones dependientes que recae sobre el desarrollador de la aplicación, es un aspecto de diseño consciente del sistema de animación y la experiencia de desarrollo.The requirement of enabling dependent animations falling onto the app developer is a conscious design aspect of the animation system and the development experience. Queremos que los desarrolladores estén al tanto de que las animaciones tienen un costo de rendimiento para la capacidad de respuesta de la interfaz de usuario.We want developers to be aware that animations do have a performance cost for the responsiveness of your UI. Las animaciones con un rendimiento pobre son difíciles de aislar y depurar en una aplicación de escala total.Poorly performing animations are difficult to isolate and debug in a full-scale app. Por lo tanto, es mejor activar solo las animaciones dependientes que realmente necesitas para la experiencia de interfaz de usuario de tu aplicación.So it's better to turn on only the dependent animations you really need for your app's UI experience. No queremos que sea demasiado fácil poner en peligro el rendimiento de la aplicación debido a animaciones decorativas que usan muchos ciclos.We didn't want to make it too easy to compromise your app's performance because of decorative animations that use a lot of cycles. Para obtener más información sobre las sugerencias de rendimiento de la animación, vea optimizar animaciones y elementos multimedia.For more info on performance tips for animation, see Optimize animations and media.

Como desarrollador de una aplicación, también puedes optar por aplicar una configuración en toda la aplicación que siempre deshabilite las animaciones dependientes, incluso aquellas que tienen la opción EnableDependentAnimation establecida como true.As an app developer, you can also choose to apply an app-wide setting that always disables dependent animations, even those where EnableDependentAnimation is true. Consulte Timeline. AllowDependentAnimations.See Timeline.AllowDependentAnimations.

Sugerencia

Si utiliza el panel 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.If you're using the Animation Pane in Blend for Visual Studio 2019, whenever you attempt to apply a dependent animation to a visual state property, warnings will be displayed in the designer. Las advertencias no se mostrarán en la salida de la compilación ni Lista de errores.Warnings will not show in the build output or Error List. Si está editando XAML manualmente, el diseñador no mostrará una advertencia.If you're editing XAML by hand, the designer will not show a warning. En tiempo de ejecución durante la depuración, el resultado de depuración del panel de salida mostrará una advertencia que indica que la animación no es independiente y se omitirá.At runtime when debugging, the Output pane's Debug output will show a warning that the animation is not independent and will be skipped.

Iniciar y controlar una animaciónStarting and controlling an animation

Todo lo que te hemos mostrado hasta el momento no sirve en realidad para ejecutar o aplicar una animación.Everything we've shown you so far doesn't actually cause an animation to run or be applied! Hasta que la animación no se inicie y esté en ejecución, los cambios de valor que declara una animación en XAML están latentes y no se producen.Until the animation is started and is running, the value changes that an animation is declaring in XAML are latent and won't happen yet. Debes iniciar explícitamente una animación de alguna forma que esté relacionada con la vigencia de la aplicación o la experiencia del usuario.You must explicitly start an animation in some way that's related to the app lifetime or the user experience. En el nivel más simple, inicia una animación al llamar el método Comenzar en el Guión gráfico que sea el elemento principal para la animación.At the simplest level, you start an animation by calling the Begin method on the Storyboard that's the parent for that animation. No puedes llamar los métodos de XAML directamente, por lo que todo lo que hagas para habilitar las animaciones, lo estarás haciendo desde el código.You can't call methods from XAML directly, so whatever you do to enable your animations, you'll be doing it from code. Será el código que se encuentra detrás de las páginas o los componentes de tu aplicación, o quizás la lógica de tu control si estás definiendo una clase de control personalizada.That will either be the code-behind for the pages or components of your app, or perhaps the logic of your control if you're defining a custom control class.

Normalmente, llamas a Comenzar y dejas que la animación se ejecute hasta completar su duración.Typically, you'll call Begin and just let the animation run to its duration completion. Sin embargo, también puedes usar los métodos Pausar, Reanudar y Detener para controlar el Guión gráfico en el tiempo de ejecución, así como otras API que se usan para escenarios de control de animación más avanzados.However, you can also use Pause, Resume and Stop methods to control the Storyboard at run-time, as well as other APIs that are used for more advanced animation control scenarios.

Cuando se llama a Begin en un guion gráfico que contiene una animación que se repite infinitamente ( RepeatBehavior="Forever" ), la animación se ejecuta hasta que se descarga la página que lo contiene o cuando se llama específicamente a PAUSE o Stop.When you call Begin on a storyboard that contains an animation that repeats infinitely (RepeatBehavior="Forever"), that animation runs until the page containing it is unloaded, or you specifically call Pause or Stop.

Iniciar una animación desde el código de la aplicaciónStarting an animation from app code

Puedes iniciar las animaciones automáticamente o en respuesta a acciones de los usuarios.You can either start animations automatically, or in response to user actions. En el caso automático, generalmente usas un evento de vigencia del objeto como Cargado para que actúe como el desencadenador de la animación.For the automatic case, you typically use an object lifetime event such as Loaded to act as the animation trigger. El evento Cargado es un buen evento para usar porque en este momento la interfaz de usuario está lista para la interacción y la animación no se cortará al comienzo porque otra parte de la interfaz de usuario ya se estaba cargando.The Loaded event is a good event to use for this because at that point the UI is ready for interaction, and the animation won't be cut off at the beginning because another part of UI was still loading.

En este ejemplo, el evento PointerPressed está adjunto al rectángulo por lo que, cuando el usuario hace clic en el rectángulo, empieza la animación.In this example, the PointerPressed event is attached to the rectangle so that when the user clicks the rectangle, the animation begins.

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

El controlador de eventos inicia el guion gráfico (la animación) mediante el método Begin del guión gráfico.The event handler start the Storyboard (the animation) by using the Begin method of the Storyboard.

myStoryboard.Begin();
myStoryboard().Begin();
myStoryboard->Begin();
myStoryBoard.Begin()

Puedes controlar el evento Completed si quieres que se ejecute otra lógica después de que la animación haya terminado de aplicar valores.You can handle the Completed event if you want other logic to run after the animation has finished applying values. De igual modo, el método GetAnimationBaseValue resulta útil para solucionar problemas de interacción entre animaciones y sistema de propiedades.Also, for troubleshooting property system/animation interactions, the GetAnimationBaseValue method can be useful.

Sugerencia

Siempre que se está codificando para un escenario de aplicación en el que se inicia una animación desde el código de la aplicación, es posible que desee revisar de nuevo si ya existe una animación o una transición en la biblioteca de animaciones para el escenario de la interfaz de usuario.Whenever you are coding for an app scenario where you are starting an animation from app code, you might want to review again whether an animation or transition already exists in the animation library for your UI scenario. Las animaciones de la 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.The library animations enable a more consistent UI experience across all Windows Runtime apps, and are easier to use.

 

Animaciones para estados visualesAnimations for visual states

El comportamiento de ejecución para un Guión gráfico que se usa para definir un estado visual del control difiere de cómo puede ejecutar una aplicación un guión gráfico directamente.The run behavior for a Storyboard that's used to define a control's visual state is different from how an app might run a storyboard directly. Tal como se aplica a una definición de estado visual en XAML, el Guión gráfico es un elemento del VisualState que lo contiene y el estado en su totalidad está controlado mediante la API de VisualStateManager.As applied to a visual state definition in XAML, the Storyboard is an element of a containing VisualState, and the state as a whole is controlled by using the VisualStateManager API. Las animaciones se ejecutarán de acuerdo con sus valores de animación y las propiedades Línea de tiempo cuando se use el VisualState que lo contiene mediante un control.Any animations within will run according to their animation values and Timeline properties when the containing VisualState is used by a control. Para más información, consulta el tema sobre guiones gráficos para estados visuales.For more info, see Storyboards for visual states. Para los estados visuales, el FillBehavior aparente es diferente.For visual states, the apparent FillBehavior is different. Si un estado visual se cambia a otro estado, todos los cambios de propiedades aplicados por el estado visual anterior y sus animaciones se cancelan, incluso si el nuevo estado visual no aplica específicamente una nueva animación a una propiedad.If a visual state is changed to another state, all the property changes applied by the previous visual state and its animations are canceled, even if the new visual state doesn't specifically apply a new animation to a property.

Storyboard y EventTriggerStoryboard and EventTrigger

Hay una forma de iniciar una animación que se pueda declarar completamente en XAML.There is one way to start an animation that can be declared entirely in XAML. Pero, esta técnica ya no se usa tanto.However, this technique isn't widely used anymore. Es una sintaxis heredada de WPF y las versiones anteriores de Silverlight antes de admitir VisualStateManager.It's a legacy syntax from WPF and early versions of Silverlight prior to VisualStateManager support. Esta sintaxis EventTrigger aún funciona en el XAML de Windows Runtime por razones de importación o compatibilidad, pero solo funciona para un comportamiento desencadenador en función del evento FrameworkElement.Loaded; intentar desencadenar otros eventos arrojará excepciones o impedirá la compilación.This EventTrigger syntax still works in Windows Runtime XAML for import/compatibility reasons, but only works for a trigger behavior based on the FrameworkElement.Loaded event; attempting to trigger off other events will throw exceptions or fail to compile. Para obtener más información, consulte EventTrigger o BeginStoryboard.For more info, see EventTrigger or BeginStoryboard.

Animación de propiedades adjuntas de XAMLAnimating XAML attached properties

No es algo habitual, pero puedes aplicar un valor animado a una propiedad adjunta de XAML.It's not a common scenario, but you can apply an animated value to a XAML attached property. Si quieres obtener más información sobre propiedades adjuntas y cómo funcionan, consulta Introducción a las propiedades adjuntas.For more info on what attached properties are and how they work, see Attached properties overview. Para seleccionar una propiedad adjunta como destino hace falta una sintaxis de property-path que incluya el nombre de la propiedad entre paréntesis.Targeting an attached property requires a property-path syntax that encloses the property name in parentheses. Puedes animar las propiedades adjuntas integradas tales como Canvas.ZIndex con un ObjectAnimationUsingKeyFrames que aplique valores enteros discretos.You can animate the built-in attached properties such as Canvas.ZIndex by using an ObjectAnimationUsingKeyFrames that applies discrete integer values. Sin embargo, existe una limitación en la implementación XAML de Windows Runtime y es que no puedes animar una propiedad adjunta personalizada.However, an existing limitation of the Windows Runtime XAML implementation is that you cannot animate a custom attached property.

Más tipos de animaciones y los pasos que deben seguirse para obtener información sobre la animación de la interfaz de usuarioMore animation types, and next steps for learning about animating your UI

Hasta ahora, hemos mostrado las animaciones personalizadas que se animan entre dos valores, y después cómo interpolar de forma lineal los valores según sea necesario mientras se ejecuta la animación.Up to now, we've shown the custom animations that are animating between two values, and then linearly interpolating the values as necessary while the animation runs. Se llama desde / a / mediante animaciones.These are called From/To/By animations. Hay otro tipo de animación que permite declarar valores intermedios que se encuentran entre el inicio y el final.But there's another animation type that enables you to declare intermediate values that fall between the start and end. Estas se denominan animaciones de fotograma clave.These are called key-frame animations. También hay una manera de modificar la lógica de interpolación en una animación from / a / by o una animación de fotogramas clave.There's also a way to alter the interpolation logic on either a From/To/By animation or a key-frame animation. Esto implica aplicar una función de aceleración.This involves applying an easing function. Para obtener más información sobre estos conceptos, consulte animaciones de funciones de fotogramas clave y de aceleración.For more info on these concepts, see Key-frame and easing function animations.