Compartilhar via

Storyboard Classe

  • Referência

Definição

Namespace:
Microsoft.UI.Xaml.Media.Animation
Editar

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

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

Comentários

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

O storyboard é usado para estas propriedades:

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 com 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 deverá 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 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 flexível e iniciar explicitamente a animação chamando Begin.

Propriedades anexadas de 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 elemento de destino separado de destino e propriedades de destino, enquanto ainda 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 de get e set 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 identificador como o identificador da propriedade de dependência.

Propriedade anexada Descrição
TargetName Obtém ou define o nome do objeto a ser animado. Storyboard.TargetName é usado para fazer referência a outro elemento por seu nome. O elemento que está sendo referenciado é o elemento/objeto em que a animação deve ser aplicada. Esse mecanismo faz parte do design básico do sistema de animação: ele permite que os recursos de animação sejam declarados separadamente dos recursos de declaração da interface do usuário e possibilita aplicar uma definição de animação a vários comportamentos de propriedade diferentes. Para o valor de Storyboard.TargetName em uma animação específica, especifique o nome do elemento de destino ou o valor do atributo x:Name , que é uma cadeia de caracteres. Esse elemento nomeado já deve existir em alguma outra área de marcação XAML.
O significado das cadeias de caracteres do atributo Name/x:Name é controlado por um conceito de namescope XAML. Para a maioria dos cenários de direcionamento de animação, você não precisará se preocupar com a influência de namescopes XAML, mas poderá encontrar problemas de resolução de nomes XAML se estiver tentando direcionar partes de modelo ou objetos que foram criados usando XamlReader.Load e posteriormente adicionados à árvore de objetos. Para saber mais, veja Namescopes XAML.
Targetproperty Obtém ou define a propriedade que deve ser animada.Storyboard.TargetProperty tem como destino uma propriedade específica do elemento especificado por Storyboard.TargetName. O valor que você fornece para Storyboard.TargetProperty envolve um conceito conhecido como caminho de propriedade. Para obter mais informações sobre como especificar um caminho de propriedade para uma animação, consulte Comentários em SetTargetProperty ou Storyboard.TargetProperty ou o tópico Sintaxe Property-path .

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 essa Linha do Tempo deve começar.

(Herdado de Timeline)
Children

Obtém a coleção de objetos Timeline filho.
Dispatcher

Sempre retorna null em um aplicativo SDK do Aplicativo Windows. Em vez disso, use DispatcherQueue .

(Herdado de DependencyObject)
DispatcherQueue

Obtém o ao DispatcherQueue qual este objeto está associado. O DispatcherQueue representa uma instalação que pode acessar o 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 associadas 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 atual do relógio de animação do Storyboard.
GetTargetName(Timeline)

Obtém o valor da propriedade XAML Storyboard.TargetName anexada de um elemento de destino.
GetTargetProperty(Timeline)

Obtém o valor da propriedade anexada XAML Storyboard.TargetProperty 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 nessa 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 (de forma 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 XAML Storyboard.TargetName anexada para um elemento de destino.
SetTargetProperty(Timeline, String)

Define o valor da propriedade anexada XAML Storyboard.TargetProperty 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 concluiu a reprodução.

(Herdado de Timeline)

Aplica-se a

Confira também