Clase Storyboard
TOC
Collapse the table of content
Expand the table of content

Storyboard Class

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

Herencia

Object
  DependencyObject
    Timeline
      Storyboard

Sintaxis


public sealed class Storyboard : Timeline


<Storyboard ...>
  oneOrMoreChildTimelines
</Storyboard>

XAML Values

oneOrMoreChildTimelines

Uno o varios elementos de objeto de las clases derivadas de Timeline. Puede ser otro Storyboard o cualquier número de tipos de animación.

Atributos

[ContentProperty("Name=Children")]
[MarshalingBehavior(Agile)]
[Threading(Both)]
[Version(0x06020000)]
[WebHostHidden()]

Members

A continuación se indican los tipos de miembros de Storyboard (Clase):

Constructores

A continuación se indican los constructores de Storyboard (Clase).

ConstructorDescripción
Storyboard Initializes a new instance of the Storyboard class.

 

Eventos

A continuación se indican los eventos de Storyboard (Clase).

EventoDescripción
Completed Occurs when the Storyboard object has completed playing. (Se hereda de Timeline)

 

Métodos

The Storyboard Clase tiene estos métodos. También hereda métodos de Object Clase.

MétodoDescripción
Begin Initiates the set of animations associated with the storyboard.
ClearValue Clears the local value of a dependency property. (Se hereda de DependencyObject)
GetAnimationBaseValue Returns any base value established for a dependency property, which would apply in cases where an animation is not active. (Se hereda de DependencyObject)
GetCurrentState Gets the clock state of the Storyboard.
GetCurrentTime Gets the current animation clock time of the Storyboard.
GetTargetName Gets the value of the Storyboard.TargetName XAML attached property from a target element.
GetTargetProperty Gets the value of the Storyboard.TargetProperty XAML attached property from a target element.
GetValue Returns the current effective value of a dependency property from a DependencyObject. (Se hereda de DependencyObject)
Pause Pauses the animation clock associated with the storyboard.
ReadLocalValue Returns the local value of a dependency property, if a local value is set. (Se hereda de DependencyObject)
Resume Resumes the animation clock, or run-time state, associated with the storyboard.
Seek Moves the storyboard to the specified animation position. The storyboard performs the requested seek when the next clock tick occurs.
SeekAlignedToLastTick Moves the storyboard to the specified animation position immediately (synchronously).
SetTarget Causes the specified Timeline to target the specified object.
SetTargetName Sets the value of the Storyboard.TargetName XAML attached property for a target element.
SetTargetProperty Sets the value of the Storyboard.TargetProperty XAML attached property for a target element.
SetValue Sets the local value of a dependency property on a DependencyObject. (Se hereda de DependencyObject)
SkipToFill Advances the current time of the storyboard's clock to the end of its active period.
Stop Stops the storyboard.

 

Propiedades adjuntas

StoryboardClase has these attached properties.

Tipo de accesoDescripción

Storyboard.TargetName

Lectura/escrituraGets or sets the name of the object to animate.

Storyboard.TargetProperty

Lectura/escrituraGets or sets the property that should be animated.

 

Propiedades

StoryboardClase tiene estas propiedades.

PropiedadTipo de accesoDescripción

AutoReverse

Lectura/escrituraGets or sets a value that indicates whether the timeline plays in reverse after it completes a forward iteration. (Se hereda de Timeline)

BeginTime

Lectura/escrituraGets or sets the time at which this Timeline should begin. (Se hereda de Timeline)

Children

De sólo lecturaGets the collection of child Timeline objects.

Dispatcher

De sólo lecturaGets the CoreDispatcher that this object is associated with. (Se hereda de DependencyObject)

Duration

Lectura/escrituraGets or sets the length of time for which this timeline plays, not counting repetitions. (Se hereda de Timeline)

FillBehavior

Lectura/escrituraGets or sets a value that specifies how the animation behaves after it reaches the end of its active period. (Se hereda de Timeline)

RepeatBehavior

Lectura/escrituraGets or sets the repeating behavior of this timeline. (Se hereda de Timeline)

SpeedRatio

Lectura/escrituraGets or sets the rate, relative to its parent, at which time progresses for this Timeline. (Se hereda de Timeline)

TargetNameProperty

De sólo lecturaIdentifies the Storyboard.TargetName XAML attached property.

TargetPropertyProperty

De sólo lecturaIdentifies the Storyboard.TargetProperty XAML attached property.

 

Comentarios

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

Storyboard se usa para estas propiedades:

Estas propiedades no son el único lugar donde se define Storyboard. La manera habitual de usar Storyboard para una animación de guion gráfico consiste en definir Storyboard en una colección Resources (ya sea Application.Resources o FrameworkElement.Resources, o posiblemente como recursos en un archivo como StandardStyles.xaml). Si se usa de esta manera, debe asignar siempre un valor x:Atributo de nombre al Storyboard. 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 el Storyboard contiene, llamando al método Begin en esa instancia de Storyboard. Storyboard también tiene otros métodos de control.

Storyboard hereda varias propiedades de Timeline. Estas propiedades se pueden aplicar a Storyboard o a una de las animaciones dentro de él (en la colección Children). Hay ventajas y desventajas al establecer las propiedades de Timeline en el Storyboard principal en lugar de en cada animación. Para obtener más información vea Animaciones de guion gráfico.

También necesita un Storyboard para controlar las animaciones de personalidad que agregue a controles o a la interfaz de usuario, si usa una de las animaciones de tema. Las animaciones de tema no tienen un punto natural de desencadenador, por lo que necesita agruparlas en un Storyboard como Children y llamar a Begin en la lógica de la aplicación cuando controle eventos de desencadenador para cada tipo de animación de tema. Para obtener más información, vea Inicio rápido: animar la interfaz de usuario.

Propiedades adjuntas XAML de Storyboard

Storyboard es la clase de servicio de host para varias propiedades adjuntas XAML. Estas habilitan las animaciones secundarias bajo el control de Storyboard para cada elemento y propiedad de destino independientes del destino, mientras todavía siguen la misma escala de tiempo de control y el mismo mecanismo de activación que el elemento primario.

Las propiedades XAML adjuntas admitidas por Storyboard son:

Storyboard.TargetName se utiliza para hacer referencia a otro elemento por su nombre. El elemento al que se hace referencia es el elemento u 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 crea posibles reutilizaciones de la animación. Para el valor de Storyboard.TargetName en una animación determinada, especifique el valor de atributo Name o x:Name del elemento de destino, que es una cadena. Ese elemento con nombre ya debe existir en otra área de marcado XAML.

Storyboard.TargetProperty tiene como destino una propiedad específica del elemento denominada por Storyboard.TargetName. El valor que se proporciona para Storyboard.TargetProperty implica un concepto conocido como ruta de acceso de la propiedad. Para obtener más información sobre cómo especificar una ruta de acceso de propiedad de una animación, vea los comentarios de SetTargetProperty o Storyboard.TargetProperty, o el tema Sintaxis de PropertyPath.

Para admitir el acceso del procesador XAML a las propiedades adjuntas, y también para exponer las operaciones Get y Set equivalentes al código, cada propiedad adjunta XAML tiene un par de métodos de descriptor de acceso Get y Set. Por ejemplo, los métodos GetTargetName y SetTargetName admiten y proporcionan compatibilidad equivalente solo para código para Storyboard.TargetName. O bien, puede utilizar el sistema de propiedades de dependencia para obtener o establecer el valor de propiedad adjunta. Llame a GetValue o SetValue, pasando los argumentos del identificador de propiedad de dependencia para establecer, y una referencia al objeto de destino en el que se va a obtener o establecer el valor.

Ejemplos

En el ejemplo siguiente se muestra cómo utilizar los métodos Begin, Stop, Pause y Resume para controlar la reproducción de un guion 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();
}


En el siguiente ejemplo se muestra cómo crear un objeto Storyboard mediante código.


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

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;
    Windows.UI.Color myColor = Windows.UI.Color.FromArgb(255, 255, 0, 0);
    SolidColorBrush myBrush = new SolidColorBrush();
    myBrush.Color = myColor;
    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();
}


Requisitos

Cliente mínimo admitido

Windows 8 [Solo aplicaciones de la Tienda Windows]

Servidor mínimo admitido

Windows Server 2012 [Solo aplicaciones de la Tienda Windows]

Espacio de nombres

Windows.UI.Xaml.Media.Animation
Windows::UI::Xaml::Media::Animation [C++]

Metadatos

Windows.winmd

Vea también

Timeline
Inicio rápido: animar la interfaz de usuario
Animaciones de fotograma clave y animaciones con función de aceleración
Sintaxis de las rutas de acceso de propiedad
Animaciones de guion gráfico
Animaciones de guion gráfico para estados visuales
Información general sobre propiedades adjuntas
Sintaxis de PropertyPath

 

 

Mostrar:
© 2017 Microsoft