Storyboard Classe

Definição

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>

Herança

Object Platform::Object IInspectable DependencyObject Timeline Storyboard

Atributos

ContentPropertyAttribute ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Exemplos

O exemplo a seguir mostra como usar os métodos Begin, Stop, Pause e Resume para controlar a reprodução de um storyboard (animação). Um conjunto de botões permite que o usuário chame esses 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();
}

Este exemplo mostra como criar e executar uma animação inteiramente no código.

<Button Content="Create animation" Click="Button_Click"/>

private void Button_Click(object sender, RoutedEventArgs e)
{
    Create_And_Run_Animation();
}

private void Create_And_Run_Animation()
{
    Storyboard justintimeStoryboard = null;
    // If the storyboard already exists in the resources dictionary,
    // get it and make sure it's stopped.
    if (LayoutRoot.Resources.ContainsKey("justintimeStoryboard"))
    {
        justintimeStoryboard = (Storyboard)LayoutRoot.Resources["justintimeStoryboard"];
        justintimeStoryboard.Stop();
    }
    // Otherwise, create the storyboard and add it to the resources dictionary.
    else
    {
        // 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;
        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();
}

Comentários

Storyboard é uma classe importante no conceito de animações storyboarded. Para obter mais informações sobre o conceito, consulte animações storyboarded.

O storyboard é usado para estas propriedades:

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

Essas propriedades não são o único lugar onde um Storyboard é definido. A maneira típica que um Storyboard é usado para uma animação storyboard é que o Storyboard é definido em uma coleção resources ( Application.Resources ou FrameworkElement.Resources, ou possivelmente como um recurso dentro de um arquivo como Generic.xaml para um controle personalizado). Sempre que ele for definido como um recurso XAML, você sempre deve atribuir um valor de atributo x:Name ao storyboard. Em seguida, você pode referenciar o nome como uma variável de programação posteriormente no code-behind. Você precisará dessa referência para realmente executar as animações que o Storyboard contém, chamando o método Begin nessa instância do Storyboard. O storyboard também tem outros métodos de controle, como Parar , que podem controlar a animação depois disso.

O storyboard herda várias propriedades da Linha do Tempo. Essas propriedades podem ser aplicadas a um Storyboard ou a uma das animações dentro dela (na coleção Children ). Há prós e contras para definir as propriedades da Linha do Tempo no Storyboard principal em vez de em cada animação. Para obter mais informações, consulte animações com storyboard.

Você também precisa de um Storyboard para controlar as animações predefinidas que você adiciona aos controles ou à interface do usuário, se estiver usando uma das animações de tema. Animações de tema não têm um ponto de gatilho inato, portanto, você precisa conter animações de tema em um Storyboard como os Filhos. Se o Storyboard for usado como o valor VisualState.Storyboard , a animação será executada quando esse estado visual for carregado. Ou, se estiver em um VisualTransition.Storyboard, a animação será executada quando essa transição for detectada pelo gerenciador de estado visual. Estas são a maneira mais comum de usar uma animação de tema, mas você também pode colocar uma em um recurso de Storyboard flexível e iniciar explicitamente a animação chamando Begin.

Propriedades anexadas ao XAML

Storyboard é a classe de serviço de host para várias propriedades anexadas XAML. Elas habilitam animações filho sob controle pelo Storyboard para cada destino de elementos de destino separados e propriedades de destino, enquanto ainda seguem a mesma linha do tempo de controle e mecanismo de gatilho que o pai.

Para dar suporte ao acesso do processador XAML às propriedades anexadas e também para expor operações de obtenção e definição equivalentes ao código, cada propriedade anexada XAML tem um par de métodos de acessador Get e Set. Outra maneira de obter ou definir o valor no código é usar o sistema de propriedades de dependência, chamando GetValue ou SetValue e passando o campo de identificador como o identificador da propriedade de dependência.

Confira também

• Timeline
• TimelineCollection
• Storyboard
• Storyboard
• animações animadas a partir de storyboards
• Animações de quadro-chave e animações de função de easing
• Sintaxe de caminho de propriedade
• Visão geral das propriedades anexadas