Storyboard Classe

Definição

Namespace:

Windows.UI.Xaml.Media.Animation

Controla animações com um linha do tempo e fornece informações de direcionamento de objeto e propriedade para suas animações filho.

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>

Herança

Object Platform::Object IInspectable DependencyObject Timeline Storyboard

Atributos

ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Requisitos do Windows

Família de dispositivos	Windows 10 (introduzida na 10.0.10240.0)
API contract	Windows.Foundation.UniversalApiContract (introduzida na v1.0)

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

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

Comentários

O Storyboard é uma classe importante no conceito de animações com storyboard. 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 de um Storyboard ser 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 em 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 em 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 Stop , 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 main em vez de em cada animação. Para saber mais, 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. As 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. Essa é a maneira mais comum de usar uma animação de tema, mas você também pode colocar uma em um recurso de Storyboard solto e iniciar explicitamente a animação chamando Begin. Para obter mais informações sobre como usar animações de tema, consulte Início Rápido: Animando sua interface do usuário usando animações de biblioteca ou animações storyboarded para estados visuais.

Propriedades anexadas XAML

Storyboard é a classe de serviço host para várias propriedades anexadas XAML. Elas habilitam animações filho sob controle pelo Storyboard para cada destino separa os elementos de destino e as propriedades de destino, ao mesmo tempo em que seguem o mesmo mecanismo de controle linha do tempo e gatilho que o pai.

Para dar suporte ao acesso do processador XAML às propriedades anexadas e também para expor operações equivalentes get e set 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 identificador como o identificador de propriedade de dependência.

Propriedade anexada	Descrição
Targetname	Obtém ou define o nome do objeto a ser animado.
Targetproperty	Obtém ou define a propriedade que deve ser animada.

Construtores

Storyboard()

Inicializa uma nova instância da classe Storyboard .

Propriedades

AutoReverse	Obtém ou define um valor que indica se a linha do tempo é executada em ordem inversa após concluir uma iteração na ordem comum. (Herdado de Timeline)
BeginTime	Obtém ou define a hora em que esta Linha do Tempo deve começar. (Herdado de Timeline)
Children	Obtém a coleção de objetos timeline filho.
Dispatcher	Obtém o CoreDispatcher ao qual esse objeto está associado. O CoreDispatcher representa uma instalação que pode acessar DependencyObject no thread da interface do usuário mesmo que o código seja iniciado por um thread que não seja da interface do usuário. (Herdado de DependencyObject)
Duration	Obtém ou define o período para o qual essa linha do tempo é reproduzida, sem contar repetições. (Herdado de Timeline)
FillBehavior	Obtém ou define um valor que especifica como a animação se comporta depois de atingir o final de seu período ativo. (Herdado de Timeline)
RepeatBehavior	Obtém ou define o comportamento de repetição desta linha do tempo. (Herdado de Timeline)
SpeedRatio	Obtém ou define a taxa, em relação ao pai, em que o tempo progride para esta Linha do Tempo. (Herdado de Timeline)
TargetNameProperty	Identifica a propriedade anexada Storyboard.TargetName XAML.
TargetPropertyProperty	Identifica a propriedade anexada Storyboard.TargetProperty XAML.

Propriedades Anexadas

TargetName	Obtém ou define o nome do objeto a ser animado.
TargetProperty	Obtém ou define a propriedade que deve ser animada.

Métodos

Begin()	Inicia o conjunto de animações associado ao storyboard.
ClearValue(DependencyProperty)	Limpa o valor local de uma propriedade de dependência. (Herdado de DependencyObject)
GetAnimationBaseValue(DependencyProperty)	Retorna qualquer valor base estabelecido para uma propriedade de dependência, que se aplicaria nos casos em que uma animação não está ativa. (Herdado de DependencyObject)
GetCurrentState()	Obtém o estado do relógio do Storyboard.
GetCurrentTime()	Obtém a hora do relógio de animação atual do Storyboard.
GetTargetName(Timeline)	Obtém o valor da propriedade anexada Storyboard.TargetName XAML de um elemento de destino.
GetTargetProperty(Timeline)	Obtém o valor da propriedade anexada Storyboard.TargetProperty XAML de um elemento de destino.
GetValue(DependencyProperty)	Retorna o valor efetivo atual de uma propriedade de dependência de um DependencyObject. (Herdado de DependencyObject)
Pause()	Pausa o relógio de animação associado ao storyboard.
ReadLocalValue(DependencyProperty)	Retorna o valor local de uma propriedade de dependência, se um valor local for definido. (Herdado de DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)	Registra uma função de notificação para escutar alterações em uma DependencyProperty específica nesta instância dependencyObject . (Herdado de DependencyObject)
Resume()	Retoma o relógio de animação ou o estado de tempo de execução associado ao storyboard.
Seek(TimeSpan)	Move o storyboard para a posição de animação especificada. O storyboard executa a busca solicitada quando o próximo tique de relógio ocorre.
SeekAlignedToLastTick(TimeSpan)	Move o storyboard para a posição de animação especificada imediatamente (síncrona).
SetTarget(Timeline, DependencyObject)	Faz com que a Linha do Tempo especificada direcione o objeto especificado.
SetTargetName(Timeline, String)	Define o valor da propriedade anexada Storyboard.TargetName XAML para um elemento de destino.
SetTargetProperty(Timeline, String)	Define o valor da propriedade anexada Storyboard.TargetProperty XAML para um elemento de destino.
SetValue(DependencyProperty, Object)	Define o valor local de uma propriedade de dependência em um DependencyObject. (Herdado de DependencyObject)
SkipToFill()	Avança a hora atual do relógio do storyboard até o final de seu período ativo.
Stop()	Interrompe o storyboard.
UnregisterPropertyChangedCallback(DependencyProperty, Int64)	Cancela uma notificação de alteração que foi registrada anteriormente chamando RegisterPropertyChangedCallback. (Herdado de DependencyObject)

Eventos

Completed

Ocorre quando o objeto Storyboard é concluído. (Herdado de Timeline)

Confira também

• Timeline
• TimelineCollection
• Storyboard
• Storyboard
• Animações com storyboard
• Animações de storyboard para estados visuais
• Animações de quadro chave e animações com função de easing
• Guia de início rápido: animando sua interface do usuário usando animações da biblioteca
• Sintaxe de Property-path
• Visão geral das propriedades anexadas