Storyboard Clase

Definición

Espacio de nombres:

Windows.UI.Xaml.Media.Animation

Controla las animaciones con una escala de tiempo y proporciona información de destino de objetos y propiedades para sus animaciones secundarias.

public ref class Storyboard sealed : Timeline

/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Children")]
/// [Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
class Storyboard final : Timeline

[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Children")]
[Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
public sealed class Storyboard : Timeline

Public NotInheritable Class Storyboard
Inherits Timeline

<Storyboard ...>
  oneOrMoreChildTimelines
</Storyboard>

Herencia

Object Platform::Object IInspectable DependencyObject Timeline Storyboard

Atributos

ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Requisitos de Windows

Familia de dispositivos	Windows 10 (se introdujo en la versión 10.0.10240.0)
API contract	Windows.Foundation.UniversalApiContract (se introdujo en la versión v1.0)

Ejemplos

En el ejemplo siguiente se muestra cómo usar los métodos Begin, Stop, Pause y Resume para controlar la reproducción de un guión gráfico (animación). Un conjunto de botones permite al usuario llamar a estos métodos.

<StackPanel x:Name="LayoutRoot" >
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="1" To="6" Duration="00:00:6" 
            Storyboard.TargetName="rectScaleTransform" 
            Storyboard.TargetProperty="ScaleY">
                <DoubleAnimation.EasingFunction>
                    <BounceEase Bounces="2" EasingMode="EaseOut" 
                            Bounciness="2" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>

    <!-- Button that begins animation. -->
    <Button Click="Animation_Begin"
         Margin="2" Content="Begin" />

    <!-- Button that pauses Animation. -->
    <Button Click="Animation_Pause"
         Margin="2" Content="Pause" />

    <!-- Button that resumes Animation. -->
    <Button Click="Animation_Resume"
         Margin="2" Content="Resume" />

    <!-- Button that stops Animation. Stopping the animation 
         returns the ellipse to its original location. -->
    <Button Click="Animation_Stop"
         Margin="2" Content="Stop" />

    <Rectangle Fill="Blue" Width="200" Height="30">
        <Rectangle.RenderTransform>
            <ScaleTransform x:Name="rectScaleTransform" />
        </Rectangle.RenderTransform>
    </Rectangle>

</StackPanel>

private void Animation_Begin(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin();
}
private void Animation_Pause(object sender, RoutedEventArgs e)
{
    myStoryboard.Pause();
}
private void Animation_Resume(object sender, RoutedEventArgs e)
{
    myStoryboard.Resume();
}
private void Animation_Stop(object sender, RoutedEventArgs e)
{
    myStoryboard.Stop();
}

Private Sub Animation_Begin(sender As Object, e As RoutedEventArgs)
    myStoryboard.Begin()
End Sub

Private Sub Animation_Pause(sender As Object, e As RoutedEventArgs)
    myStoryboard.Pause()
End Sub

Private Sub Animation_Resume(sender As Object, e As RoutedEventArgs)
    myStoryboard.Resume()
End Sub

Private Sub Animation_Stop(sender As Object, e As RoutedEventArgs)
    myStoryboard.Stop()
End Sub

//using Windows.UI.Xaml.Media.Animation;
//using Windows.UI.Xaml.Shapes;
//using Windows.UI

private void Create_And_Run_Animation(object sender, RoutedEventArgs e)
{
    // Create a red rectangle that will be the target
    // of the animation.
    Rectangle myRectangle = new Rectangle();
    myRectangle.Width = 200;
    myRectangle.Height = 200;
    SolidColorBrush myBrush = new SolidColorBrush(Colors.Red);
    myRectangle.Fill = myBrush;

    // Create the transform
    TranslateTransform moveTransform = new TranslateTransform();
    moveTransform.X = 0;
    moveTransform.Y = 0;
    myRectangle.RenderTransform = moveTransform;

    // Add the rectangle to the tree.
    LayoutRoot.Children.Add(myRectangle);

    // Create a duration of 2 seconds.
    Duration duration = new Duration(TimeSpan.FromSeconds(2));
    // Create two DoubleAnimations and set their properties.
    DoubleAnimation myDoubleAnimationX = new DoubleAnimation();
    DoubleAnimation myDoubleAnimationY = new DoubleAnimation();
    myDoubleAnimationX.Duration = duration;
    myDoubleAnimationY.Duration = duration;
    Storyboard justintimeStoryboard = new Storyboard();
    justintimeStoryboard.Duration = duration;
    justintimeStoryboard.Children.Add(myDoubleAnimationX);
    justintimeStoryboard.Children.Add(myDoubleAnimationY);
    Storyboard.SetTarget(myDoubleAnimationX, moveTransform);
    Storyboard.SetTarget(myDoubleAnimationY, moveTransform);

    // Set the X and Y properties of the Transform to be the target properties
    // of the two respective DoubleAnimations.
    Storyboard.SetTargetProperty(myDoubleAnimationX, "X");
    Storyboard.SetTargetProperty(myDoubleAnimationY, "Y");
    myDoubleAnimationX.To = 200;
    myDoubleAnimationY.To = 200;

    // Make the Storyboard a resource.
    LayoutRoot.Resources.Add("justintimeStoryboard", justintimeStoryboard);
    // Begin the animation.
    justintimeStoryboard.Begin();
}

' need Imports for Windows.UI.Xaml.Shapes, Windows.UI.Media.Animation, Windows.UI
Private Sub Create_And_Run_Animation(sender As Object, e As RoutedEventArgs)
    ' Create a red rectangle that will be the target
    ' of the animation.
    Dim myRectangle As Rectangle = New Rectangle
    myRectangle.Width = 200
    myRectangle.Height = 200
    Dim myBrush As SolidColorBrush = New SolidColorBrush(Colors.Red)
    myRectangle.Fill = myBrush

   ' Create the transform
    Dim moveTransform As TranslateTransform = New TranslateTransform
    moveTransform.X = 0
    moveTransform.Y = 0
    myRectangle.RenderTransform = moveTransform

    ' Add the rectangle to the tree.
    LayoutRoot.Children.Add(myRectangle)

    ' Create a duration of 2 seconds.
    Dim duration As Duration = New Duration(TimeSpan.FromSeconds(2))
    ' Create two DoubleAnimations and set their properties.
    Dim myDoubleAnimationX As DoubleAnimation = New DoubleAnimation
    Dim myDoubleAnimationY As DoubleAnimation = New DoubleAnimation
    myDoubleAnimationX.Duration = duration
    myDoubleAnimationY.Duration = duration
    Dim justintimeStoryboard As Storyboard = New Storyboard
    justintimeStoryboard.Duration = duration
    justintimeStoryboard.Children.Add(myDoubleAnimationX)
    justintimeStoryboard.Children.Add(myDoubleAnimationY)
    Storyboard.SetTarget(myDoubleAnimationX, moveTransform)
    Storyboard.SetTarget(myDoubleAnimationY, moveTransform)

    ' Set the X and Y properties of the Transform to be the target properties
    ' of the two respective DoubleAnimations.
    Storyboard.SetTargetProperty(myDoubleAnimationX, "X")
    Storyboard.SetTargetProperty(myDoubleAnimationY, "Y")
    myDoubleAnimationX.To = 200
    myDoubleAnimationY.To = 200

    ' Make the Storyboard a resource.
    LayoutRoot.Resources.Add("justintimeStoryboard", justintimeStoryboard)
    ' Begin the animation.
    justintimeStoryboard.Begin()
End Sub

Comentarios

Storyboard es una clase importante en el concepto de animaciones con guion gráfico. Para obtener más información sobre el concepto, consulta Animaciones con guion gráfico.

Storyboard se usa para estas propiedades:

• VisualState.Storyboard
• VisualTransition.Storyboard
• BeginStoryboard.Storyboard

Estas propiedades no son el único lugar donde se define un guión gráfico. La manera típica de usar un guión gráfico para una animación con guion gráfico es que el guión gráfico se define en una colección Resources ( Application.Resources o FrameworkElement.Resources, o posiblemente como un recurso dentro de un archivo como Generic.xaml para un control personalizado). Cada vez que se define como un recurso XAML, siempre debes asignar un valor de atributo x:Name a storyboard. A continuación, puede hacer referencia al nombre como una variable de programación más adelante en el código subyacente. Necesitarás esta referencia para ejecutar realmente las animaciones que contiene storyboard, llamando al método Begin en esa instancia de Storyboard. Storyboard también tiene otros métodos de control como Stop que pueden controlar la animación a partir de entonces.

Storyboard hereda varias propiedades de Timeline. Estas propiedades se pueden aplicar a un guión gráfico o a una de las animaciones que contiene (en la colección Children ). Hay ventajas y desventajas para establecer las propiedades timeline en el guión gráfico principal en lugar de en cada animación. Para obtener más información, consulta Animaciones con guion gráfico.

También necesitas un guión gráfico para controlar las animaciones predefinidas que agregas a controles o interfaz de usuario, si usas una de las animaciones de tema. Las animaciones de tema no tienen un punto de desencadenador innato, por lo que debes contener animaciones de tema en un Guión gráfico como elementos secundarios. Si el guión gráfico se usa como valor visualState.Storyboard , la animación se ejecuta cuando se carga ese estado visual. O bien, si se encuentra en un VisualTransition.Storyboard, la animación se ejecuta cuando el administrador de estado visual detecta esa transición. Se trata de la forma más común de usar una animación de tema, pero también puedes colocar una en un recurso de Guión gráfico flexible e iniciar explícitamente la animación llamando a Begin. Para obtener más información sobre cómo usar animaciones de tema, consulta Inicio rápido: Animación de la interfaz de usuario mediante animaciones de biblioteca o animaciones de guion gráfico para estados visuales.

Propiedades adjuntas xaml

Storyboard es la clase de servicio host para varias propiedades adjuntas de XAML. Estas habilitan las animaciones secundarias bajo control por el guión gráfico para cada elemento de destino independiente y las propiedades de destino, al tiempo que siguen la misma escala de tiempo de control y el mecanismo de desencadenamiento que el elemento primario.

Para admitir el acceso del procesador XAML a las propiedades adjuntas y también para exponer operaciones de obtención y establecimiento equivalentes en el código, cada propiedad adjunta XAML tiene un par de métodos de descriptor de acceso Get y Set. Otra manera de obtener o establecer el valor en el código es usar el sistema de propiedades de dependencia, llamar a GetValue o SetValue y pasar el campo de identificador como identificador de propiedad de dependencia.

Propiedad adjunta	Descripción
TargetName	Obtiene o establece el objeto que se va a animar.
TargetProperty	Obtiene o establece la propiedad que debe animarse.

Constructores

Storyboard()

Inicializa una nueva instancia de la clase Storyboard .

Propiedades

AutoReverse	Obtiene o establece un valor que indica si la escala de tiempo se reproduce en orden inverso después de completar una iteración de avance. (Heredado de Timeline)
BeginTime	Obtiene o establece la hora en la que debe comenzar esta escala de tiempo . (Heredado de Timeline)
Children	Obtiene la colección de objetos Timeline secundarios.
Dispatcher	Obtiene el CoreDispatcher al que está asociado este objeto. CoreDispatcher representa una instalación que puede acceder a DependencyObject en el subproceso de la interfaz de usuario, incluso si un subproceso que no es de interfaz de usuario inicia el código. (Heredado de DependencyObject)
Duration	Obtiene o establece la duración para la que se reproduce esta escala de tiempo, sin contar las repeticiones. (Heredado de Timeline)
FillBehavior	Obtiene o establece un valor que especifica cómo se comporta la animación después de que llegue al final de su período activo. (Heredado de Timeline)
RepeatBehavior	Obtiene o establece el comportamiento de repetición de esta escala de tiempo. (Heredado de Timeline)
SpeedRatio	Obtiene o establece la velocidad, en relación con su elemento primario, en el que avanza el tiempo para esta escala de tiempo. (Heredado de Timeline)
TargetNameProperty	Identifica la propiedad adjunta XAML Storyboard.TargetName .
TargetPropertyProperty	Identifica la propiedad adjunta XAML Storyboard.TargetProperty .

Propiedades adjuntas

TargetName	Obtiene o establece el objeto que se va a animar.
TargetProperty	Obtiene o establece la propiedad que debe animarse.

Métodos

Begin()	Inicia el conjunto de animaciones asociadas al guión gráfico.
ClearValue(DependencyProperty)	Borra el valor local de una propiedad de dependencia. (Heredado de DependencyObject)
GetAnimationBaseValue(DependencyProperty)	Devuelve cualquier valor base establecido para una propiedad de dependencia, que se aplicaría en los casos en los que una animación no está activa. (Heredado de DependencyObject)
GetCurrentState()	Obtiene el estado del reloj del guión gráfico.
GetCurrentTime()	Obtiene la hora del reloj de animación actual del guión gráfico.
GetTargetName(Timeline)	Obtiene el valor de la propiedad adjunta XAML Storyboard.TargetName de un elemento de destino.
GetTargetProperty(Timeline)	Obtiene el valor de la propiedad adjunta XAML Storyboard.TargetProperty de un elemento de destino.
GetValue(DependencyProperty)	Devuelve el valor efectivo actual de una propiedad de dependencia de dependencyObject. (Heredado de DependencyObject)
Pause()	Pausa el reloj de animación asociado al guión gráfico.
ReadLocalValue(DependencyProperty)	Devuelve el valor local de una propiedad de dependencia, si se establece un valor local. (Heredado de DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)	Registra una función de notificación para escuchar los cambios en una dependencyProperty específica en esta instancia de DependencyObject . (Heredado de DependencyObject)
Resume()	Reanuda el reloj de animación, o el estado en tiempo de ejecución, asociado al guión gráfico.
Seek(TimeSpan)	Mueve el guión gráfico a la posición de animación especificada. El guión gráfico realiza la búsqueda solicitada cuando se produce el siguiente tic del reloj.
SeekAlignedToLastTick(TimeSpan)	Mueve el guión gráfico a la posición de animación especificada inmediatamente (sincrónicamente).
SetTarget(Timeline, DependencyObject)	Hace que la escala de tiempo especificada se dirija al objeto especificado.
SetTargetName(Timeline, String)	Establece el valor de la propiedad adjunta XAML Storyboard.TargetName para un elemento de destino.
SetTargetProperty(Timeline, String)	Establece el valor de la propiedad adjunta XAML Storyboard.TargetProperty para un elemento de destino.
SetValue(DependencyProperty, Object)	Establece el valor local de una propiedad de dependencia en dependencyObject. (Heredado de DependencyObject)
SkipToFill()	Avanza la hora actual del reloj del guión gráfico hasta el final de su período activo.
Stop()	Detiene el guión gráfico.
UnregisterPropertyChangedCallback(DependencyProperty, Int64)	Cancela una notificación de cambio registrada anteriormente mediante una llamada a RegisterPropertyChangedCallback. (Heredado de DependencyObject)

Eventos

Completed

Se produce cuando se ha completado la reproducción del objeto Storyboard . (Heredado de Timeline)

Consulte también

• Timeline
• TimelineCollection
• Storyboard
• Storyboard
• Animaciones con guion gráfico
• Animaciones con guion gráfico para estados visuales
• Animaciones de fotograma clave y animaciones de función de aceleración
• Inicio rápido: animación de la interfaz de usuario con animaciones de la biblioteca
• Sintaxis de property-path
• Introducción a las propiedades adjuntas