Compartir a través de

Storyboard Clase

  • Referencia

Definición

Espacio de nombres:
Microsoft.UI.Xaml.Media.Animation
Editar

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
/// [Microsoft.UI.Xaml.Markup.ContentProperty(Name="Children")]
/// [Windows.Foundation.Metadata.Activatable(65536, "Microsoft.UI.Xaml.WinUIContract")]
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.WinUIContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
class Storyboard final : Timeline
[Microsoft.UI.Xaml.Markup.ContentProperty(Name="Children")]
[Windows.Foundation.Metadata.Activatable(65536, "Microsoft.UI.Xaml.WinUIContract")]
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.WinUIContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
public sealed class Storyboard : Timeline
Public NotInheritable Class Storyboard
Inherits Timeline
<Storyboard ...>
  oneOrMoreChildTimelines
</Storyboard>
Herencia
Object Platform::Object IInspectable DependencyObject Timeline Storyboard
Atributos
ContentPropertyAttribute ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

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();
}

//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();
}

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:

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). Siempre 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á 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 debe 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. Esta es la forma más común de usar una animación de tema, pero también se puede colocar una en un recurso de Guión gráfico flexible y iniciar explícitamente la animación llamando a Begin.

Propiedades adjuntas xaml

Storyboard es la clase de servicio host para varias propiedades adjuntas xaml. Estas habilitan las animaciones secundarias bajo el control del Guión gráfico para cada elemento de destino independiente y propiedades de destino, mientras 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 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 identificador como identificador de propiedad de dependencia.

Propiedad adjunta Descripción
TargetName Obtiene o establece el objeto que se va a animar. Storyboard.TargetName se usa para hacer referencia a otro elemento por su nombre. El elemento al que se hace referencia es el elemento o objeto donde se debe aplicar la animación. Este mecanismo forma parte del diseño básico del sistema de animación: permite declarar los recursos de animación por separado de los recursos de declaración de la interfaz de usuario y permite aplicar una definición de animación a varios comportamientos de propiedad diferentes. Para el valor de Storyboard.TargetName en una animación determinada, se especifica el valor del atributo Name o x:Name del elemento de destino, que es una cadena. Ese elemento con nombre ya debe existir en algún otro área del marcado XAML.
El significado de las cadenas de atributo Name/x:Name se controla mediante un concepto de ámbito de nombres XAML. Para la mayoría de los escenarios de destino de animación, no tendrás que preocuparte por la influencia de los ámbitos de nombres XAML, pero es posible que encuentres problemas de resolución de nombres XAML si intentas dirigir elementos de plantilla o objetos que se crearon con XamlReader.Load y posteriormente se agregaron al árbol de objetos. Para obtener más información, consulta Ámbitos de nombres XAML.
TargetProperty Obtiene o establece la propiedad que debe animarse.Storyboard.TargetProperty tiene como destino una propiedad determinada del elemento especificado por Storyboard.TargetName. El valor que proporcione para Storyboard.TargetProperty implica un concepto conocido como ruta de acceso de propiedad. Para obtener más información sobre cómo especificar una ruta de acceso de propiedad para una animación, vea Comentarios en SetTargetProperty o Storyboard.TargetProperty, o el tema sintaxis property-path .

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

Siempre devuelve null en una aplicación de SDK de Aplicaciones para Windows. Use DispatcherQueue en su lugar.

(Heredado de DependencyObject)
DispatcherQueue

Obtiene el objeto DispatcherQueue al que está asociado este objeto. DispatcherQueue representa una instalación que puede acceder al DependencyObject en el subproceso de 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 cuyo momento progresa 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 llamando a RegisterPropertyChangedCallback.

(Heredado de DependencyObject)

Eventos

Completed

Se produce cuando se ha completado la reproducción del objeto Storyboard .

(Heredado de Timeline)

Se aplica a

Consulte también