Partilhar via

Animações com storyboard

As animações baseadas em storyboards são mais do que animações em termos visuais. Uma animação storyboard é uma maneira de alterar o valor de uma propriedade de dependência em função do tempo. Uma das principais razões pelas quais você pode precisar de uma animação storyboard que não seja da biblioteca de animações é definir o estado visual de um controle, como parte de um modelo de controle ou definição de página.

Definição de animações com storyboard

Uma animação storyboard é uma maneira de alterar o valor de uma propriedade de dependência em função do tempo. A propriedade que você está animando nem sempre é uma propriedade que afeta diretamente a interface do usuário do seu aplicativo. Mas como XAML é sobre a definição de interface do usuário para um aplicativo, geralmente é uma propriedade relacionada à interface do usuário que você está animando. Por exemplo, você pode animar o ângulo de um RotateTransform ou o valor de cor do plano de fundo de um botão.

Uma das principais razões pelas quais você pode estar definindo uma animação com storyboard é se você é um criador de controlos ou está a reformatar um controlo e está a definir estados visuais. Para saber mais, veja Animações com storyboard para estados visuais.

Quer esteja a definir estados visuais ou uma animação personalizada para uma aplicação, os conceitos e APIs para animações storyboard descritos neste tópico aplicam-se maioritariamente a qualquer uma delas.

Para ser animada, a propriedade que você está segmentando com uma animação storyboard deve ser uma propriedade de dependência. Uma propriedade de dependência é um recurso fundamental da implementação XAML do Tempo de Execução do Windows. As propriedades graváveis dos elementos mais comuns da interface do usuário geralmente são implementadas como propriedades de dependência, para que você possa animá-las, aplicar valores associados a dados ou aplicar um Style e direcionar a propriedade com um Setter. Para saber mais sobre como funcionam as propriedades de dependência, veja Visão geral das propriedades de dependência.

Na maioria das vezes, define-se uma animação de storyboard escrevendo XAML. Se você usar uma ferramenta como o Microsoft Visual Studio, ela produzirá o XAML para você. É possível definir uma animação storyboard usando código também, mas isso é menos comum.

Vejamos um exemplo simples. Neste exemplo XAML, a propriedade Opacity é animada em um objeto Rectangle específico.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>

  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Identificando o objeto a ser animado

No exemplo anterior, o storyboard estava animando a propriedade Opacity de um retângulo. Você não declara as animações no próprio objeto. Em vez disso, você faz isso dentro da definição de animação de um storyboard. Os storyboards geralmente são definidos em XAML que não está nas imediações da definição da interface do usuário XAML do objeto a ser animado. Em vez disso, eles geralmente são configurados como um recurso XAML.

Para conectar uma animação a um destino, faça referência ao destino por seu nome de programação de identificação. Você sempre deve aplicar o atributo x:Name na definição da interface do usuário XAML para nomear o objeto que deseja animar. Em seguida, direcione o objeto para animar definindo Storyboard.TargetName dentro da definição de animação. Para o valor de Storyboard.TargetName, use a cadeia de caracteres name do objeto de destino, que é o que você definiu anteriormente e em outro lugar com o atributo x:Name.

Orientar a propriedade de dependência para animar

Você define um valor para Storyboard.TargetProperty na animação. Isso determina qual propriedade específica do objeto de destino é animada.

Por vezes, é necessário apontar para uma propriedade que não é uma propriedade imediata do objeto de destino, mas que está aninhada mais profundamente numa relação de objeto-propriedade. Muitas vezes, é necessário fazer isso para analisar detalhadamente um conjunto de valores de objeto e propriedade associados até que possa referenciar um tipo de propriedade que possa ser animado (Duplo, Ponto, Cor). Esse conceito é chamado de direcionamento indireto, e a sintaxe para direcionar uma propriedade dessa maneira é conhecida como um caminho de propriedade.

Eis um exemplo. Um cenário comum para uma animação storyboard é alterar a cor de uma parte de uma interface do usuário ou controle de aplicativo para representar que o controle está em um estado específico. Digamos que você queira animar o primeiro plano de um TextBlock, para que ele passe de vermelho para verde. Você esperaria que um ColorAnimation estivesse envolvido, e isso está correto. No entanto, nenhuma das propriedades nos elementos da interface do usuário que afetam a cor do objeto é, na verdade, do tipo Cor. Em vez disso, eles são do tipo Brush. Portanto, o que você realmente precisa direcionar para animação é a propriedade Color da classe SolidColorBrush , que é um tipo derivado de Brush que normalmente é usado para essas propriedades de interface do usuário relacionadas a cores. E aqui está como isso aparece em termos de formação de um caminho de propriedade para o direcionamento de propriedades específicas da sua animação:

<Storyboard x:Name="myStoryboard">
  <ColorAnimation
    Storyboard.TargetName="tb1"
    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
    From="Red" To="Green"/>
</Storyboard>

Veja como pensar nessa sintaxe em termos de suas partes:

  • Cada conjunto de parênteses () inclui um nome de propriedade.
  • Dentro do nome da propriedade, há um ponto, e esse ponto separa um nome de tipo e um nome de propriedade, para que a propriedade que você está identificando seja inequívoca.
  • O ponto no meio, aquele que não está entre parênteses, é um passo. Isso é interpretado pela sintaxe como significando, pegue o valor da primeira propriedade (que é um objeto), entre em seu modelo de objeto e direcione uma subpropriedade específica do valor da primeira propriedade.

Aqui está uma lista de cenários de segmentação de animação em que você provavelmente usará a segmentação indireta de propriedade e algumas cadeias de caracteres de caminho de propriedade que se aproximam da sintaxe que você usará:

Você notará que alguns desses exemplos usam colchetes em torno de números. Este é um indexador. Ele indica que o nome da propriedade que a precede tem uma coleção como valor e que você deseja um item (conforme identificado por um índice baseado em zero) de dentro dessa coleção.

Você também pode animar propriedades anexadas XAML. Coloque sempre o nome completo da propriedade anexada entre parênteses, por exemplo (Canvas.Left). Para obter mais informações, consulte Animando propriedades anexadas XAML.

Para saber mais sobre como utilizar um caminho de propriedade para o direcionamento indireto da propriedade que se pretende animar, veja Sintaxe de caminho de propriedade.

Tipos de animação

O sistema de animação do Tempo de Execução do Windows tem três tipos específicos aos quais as animações storyboard podem aplicar-se:

Há também um tipo de animação de objeto generalizado para valores de referência de objeto, que discutiremos mais adiante.

Especificando os valores animados

Até agora, mostramos como direcionar o objeto e a propriedade que queremos animar, mas ainda não descrevemos o que a animação faz ao valor da propriedade quando é executada.

Os tipos de animação que descrevemos às vezes são chamados de De/Para/Por animações. Isso significa que a animação está mudando o valor de uma propriedade, ao longo do tempo, usando uma ou mais dessas entradas que vêm da definição de animação:

  • O valor começa no valor De . Se não especificares um valor inicial, o valor inicial será qualquer valor que a propriedade animada tenha antes da execução da animação. Isso pode ser um valor padrão, um valor de um estilo ou modelo ou um valor especificamente aplicado por uma definição de interface do usuário XAML ou código de aplicativo.
  • No final da animação, o valor é o valor To.
  • Ou, para especificar um valor final relativo ao valor inicial, defina a propriedade By . Você definiria isto em vez da propriedade To.
  • Se você não especificar um valor Para ou um valor Por , o valor final será qualquer valor que a propriedade animada tenha no momento anterior à execução da animação. Neste caso, é melhor ter um valor De porque, caso contrário, a animação não alterará o valor; seus valores inicial e final são os mesmos.
  • Uma animação normalmente tem pelo menos um de De, Por ou Para, mas nunca os três ao mesmo tempo.

Vamos revisitar o exemplo XAML anterior e examinar novamente os valores From e To e a Duration. O exemplo está a animar a propriedade Opacity e o tipo de propriedade Opacity é Double. Portanto, a animação a ser usada aqui é DoubleAnimation.

From="1.0" To="0.0" especifica que, quando a animação é executada, a propriedade Opacity começa com um valor de 1 e anima para 0. Em outras palavras, em termos do que esses valores Double significam para a propriedade Opacity , essa animação fará com que o objeto comece opaco e, em seguida, desvaneça para transparente.

...
<Storyboard x:Name="myStoryboard">
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:1"/>
</Storyboard>
...

Duration="0:0:1" Especifica quanto tempo dura a animação, ou seja, a velocidade com que o retângulo desaparece. Uma propriedade Duration é especificada na forma de hours:minutes:seconds. A duração do tempo neste exemplo é de um segundo.

Para saber mais sobre os valores de Duração e a sintaxe XAML, consulte Duração.

Observação

Para o exemplo que mostramos, se tu tivesses a certeza de que o estado inicial do objeto a ser animado tem Opacidade sempre igual a 1, seja através do valor padrão ou de uma definição explícita, poderias omitir o valor From, a animação usaria o valor inicial implícito, e o resultado seria o mesmo.

De/Para/Por são anuláveis

Mencionamos anteriormente que você pode omitir De, Para ou Por e, assim, usar valores não animados atuais como substitutos para um valor ausente. As propriedades De, Para ou Por de uma animação não são do tipo que você pode imaginar. Por exemplo, o tipo da propriedade DoubleAnimation.To não é Double. Em vez disso, é um Nullable para Double. E seu valor padrão é null, não 0. Esse valor nulo é a maneira como o sistema de animação distingue que o utilizador não definiu especificamente um valor para uma propriedade De, Para ou Por.

Outras propriedades de uma animação

As próximas propriedades descritas nesta seção são todas opcionais, pois têm padrões apropriados para a maioria das animações.

AutoReverse

Se você não especificar AutoReverse ou RepeatBehavior em uma animação, essa animação será executada uma vez e executada pelo tempo especificado como Duration.

A propriedade AutoReverse especifica se uma linha do tempo é reproduzida no sentido inverso depois de atingir o final de sua Duration. Se você defini-la como true, a animação será revertida depois que ela atingir o final de sua Duração declarada, alterando o valor de seu valor final (Para) de volta para seu valor inicial (De). Isso significa que a animação é efetivamente executada por o dobro do tempo da sua duração.

RepeatBehavior

A propriedade RepeatBehavior especifica quantas vezes uma linha do tempo é reproduzida ou a duração total dentro da qual a linha do tempo deve repetir-se. Por predefinição, uma linha do tempo tem uma contagem de iteração de "1x", o que significa que é reproduzida uma vez durante a sua Duração e não se repete.

Você pode fazer com que a animação execute várias iterações. Por exemplo, um valor de "3x" faz com que a animação seja executada três vezes. Ou, você pode especificar uma Duração diferente para RepeatBehavior. Essa Duração deve ser maior do que a Duração da animação em si para ser eficaz. Por exemplo, se você especificar um RepeatBehavior de "0:0:10", para uma animação que tenha uma duração de "0:0:2", essa animação se repetirá cinco vezes. Se estes não se dividirem uniformemente, a animação será truncada no momento em que o tempo de RepeatBehavior é atingido, o que pode ocorrer a meio do processo. Finalmente, você pode especificar o valor especial "Para sempre", que faz com que a animação seja executada infinitamente até ser deliberadamente interrompida.

Para saber mais sobre valores RepeatBehavior e a sintaxe XAML, veja RepeatBehavior.

FillBehavior="Stop"

Por padrão, quando uma animação termina, a animação deixa o valor da propriedade como o valor final modificado por Para ou By, mesmo depois que sua duração é ultrapassada. No entanto, se você definir o valor da propriedade FillBehavior como FillBehavior.Stop, o valor do valor animado será revertido para qualquer que fosse o valor antes da animação ser aplicada ou, mais precisamente, para o valor efetivo atual, conforme determinado pelo sistema de propriedades de dependência (para obter mais informações sobre essa distinção, consulte Visão geral das propriedades de dependência).

HoraDeInício

Por padrão, o BeginTime de uma animação é "0:0:0", portanto, ela começa assim que o Storyboard é executado. Você pode alterar isso se o Storyboard contiver mais de uma animação e quiser escalonar os horários de início das outras em relação a uma animação inicial ou criar um pequeno atraso deliberado.

SpeedRatio

Se você tiver mais de uma animação em um Storyboard , poderá alterar a taxa de tempo de uma ou mais animações em relação ao Storyboard. É o Storyboard pai que, em última análise, controla como o tempo de duração decorre enquanto as animações são executadas. Esta propriedade não é usada com muita frequência. Para obter mais informações, consulte SpeedRatio.

Definição de mais de uma animação em um Storyboard

O conteúdo de um Storyboard pode ser mais de uma definição de animação. Você pode ter mais de uma animação se estiver aplicando animações relacionadas a duas propriedades do mesmo objeto de destino. Por exemplo, você pode alterar as propriedades TranslateX e TranslateY de um TranslateTransform usado como RenderTransform de um elemento da interface do usuário; Isso fará com que o elemento seja traduzido na diagonal. Você precisa de duas animações diferentes para fazer isso, mas talvez queira que as animações façam parte do mesmo Storyboard porque você sempre quer que essas duas animações sejam executadas juntas.

As animações não precisam ser do mesmo tipo ou ter como alvo o mesmo objeto. Podem ter diferentes durações e não têm de partilhar quaisquer valores de propriedade.

Quando o Storyboard pai for executado, cada uma das animações nele também será executada.

Na realidade, a classe Storyboard tem muitas das mesmas propriedades de animação que os tipos de animação têm, porque ambos compartilham a classe base Timeline. Assim, um Storyboard pode ter um RepeatBehavior ou um BeginTime. No entanto, você geralmente não os define em um Storyboard , a menos que queira que todas as animações contidas tenham esse comportamento. Como regra geral, qualquer propriedade de Timeline definida num Storyboard se aplica a todas as animações filhas. Se não for definido, o Storyboard terá uma duração implícita calculada a partir do valor de Duração mais longo das animações contidas. Uma Duração definida explicitamente numa Storyboard que for mais curta do que uma das suas animações subjacentes fará com que essa animação seja cortada, o que não é normalmente desejado.

Um storyboard não pode conter duas animações que tentam direcionar e animar a mesma propriedade no mesmo objeto. Se tentar fazê-lo, receberá um erro em tempo de execução ao tentar executar o storyboard. Esta restrição aplica-se mesmo que as animações não se sobreponham no tempo devido a valores e durações BeginTime deliberadamente diferentes. Se realmente quiseres aplicar uma linha de tempo de animação mais complexa à mesma propriedade num único storyboard, a forma de o fazer é usar uma animação de fotograma-chave. Consulte Animações de quadros-chave e funções de atenuação.

O sistema de animação pode aplicar mais de uma animação ao valor de uma propriedade, se essas entradas forem originárias de múltiplos storyboards. Usar esse comportamento deliberadamente para executar simultaneamente storyboards não é comum. No entanto, é possível que uma animação definida pelo aplicativo que você aplica a uma propriedade de controle esteja modificando o valor HoldEnd de uma animação que foi executada anteriormente como parte do modelo de estado visual do controle.

Definindo um storyboard como um recurso

Um Storyboard é o contêiner no qual você coloca objetos de animação. Normalmente, você define o Storyboard como um recurso disponível para o objeto que deseja animar, seja em Recursos no nível da página ou em Application.Resources.

Este próximo exemplo mostra como o exemplo anterior do Storyboard estaria contido em uma definição de Recursos no nível da página, onde o Storyboard é um recurso com chave da Página raiz. Observe o atributo x:Name. Esse atributo é como você define um nome de variável para o Storyboard, para que outros elementos em XAML, bem como código, possam se referir ao Storyboard posteriormente.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>
  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Definir recursos na raiz XAML de um arquivo XAML, como page.xaml ou app.xaml, é uma prática comum para organizar recursos com chave em seu XAML. Você também pode organizar recursos em arquivos separados e mesclá-los em aplicações ou páginas. Para obter mais informações, consulte ResourceDictionary e referências de recursos XAML.

Observação

O XAML do Tempo de Execução do Windows oferece suporte à identificação de recursos usando o atributo x:Key ou o atributo x:Name. O uso do atributo x:Name é mais comum para um Storyboard, porque você desejará fazer referência a ele por nome de variável eventualmente, para que possa chamar seu método Begin e executar as animações. Caso utilize o atributo x:Key, precisará usar os métodos do ResourceDictionary, como o indexador Item, para recuperá-lo como um recurso com chave e, em seguida, converter o objeto recuperado em Storyboard para usar os métodos do Storyboard.

Storyboards para estados visuais

Você também coloca suas animações dentro de uma unidade do Storyboard quando declara as animações de estado visual para a aparência visual de um controle. Nesse caso, os elementos do Storyboard definidos vão para um contêiner do VisualState aninhado mais profundamente em um Style (é o Style que é o recurso chaveado). Neste caso, você não precisa de uma chave ou nome para o Storyboard , pois é o VisualState que tem um nome de destino que o VisualStateManager pode invocar. Os estilos para controlos geralmente são factorados em arquivos XAML ResourceDictionary separados, em vez de colocados numa página ou numa coleção de Recursos de aplicativo. Para saber mais, veja Animações com storyboard para estados visuais.

Animações dependentes e independentes

Neste ponto, precisamos introduzir alguns pontos importantes sobre como o sistema de animação funciona. Em particular, a animação interage fundamentalmente com a forma como uma aplicação Windows Runtime é renderizada na tela e como essa renderização utiliza threads de processamento. Um aplicativo do Tempo de Execução do Windows sempre tem um thread de interface do usuário principal, e esse thread é responsável por atualizar a tela com as informações atuais. Além disso, uma aplicação do Windows Runtime tem um thread de composição, que é usado para precalcular layouts imediatamente antes de serem mostrados. Quando você anima a interface do usuário, há potencial para causar muito trabalho para o thread da interface do usuário. O sistema deve redesenhar grandes áreas da tela usando intervalos de tempo bastante curtos entre cada atualização. Isto é necessário para captar o valor mais atual da propriedade animada. Se você não tiver cuidado, há risco de que uma animação possa tornar a interface do usuário menos responsiva ou afetar o desempenho de outros recursos do aplicativo que também estão no mesmo thread da interface do usuário.

A variedade de animação que é determinada como tendo algum risco de retardar o thread da interface do usuário é chamada de animação dependente. Uma animação não sujeita a este risco é uma animação independente. A distinção entre animações dependentes e independentes não é determinada apenas pelos tipos de animação (DoubleAnimation e assim por diante), como descrevemos anteriormente. Em vez disso, ele é determinado por quais propriedades específicas você está animando e outros fatores, como herança e composição de controles. Há circunstâncias em que, mesmo que uma animação altere a interface do usuário, a animação pode ter um impacto mínimo no thread da interface do usuário e, em vez disso, pode ser manipulada pelo thread de composição como uma animação independente.

Uma animação é independente se tiver alguma destas características:

Advertência

Para que sua animação seja tratada como independente, você deve definir Duration="0"explicitamente . Por exemplo, se você remover Duration="0" desse XAML, a animação será tratada como dependente, mesmo que o KeyTime do quadro seja "0:0:0".

<Storyboard>
  <DoubleAnimationUsingKeyFrames
    Duration="0"
    Storyboard.TargetName="Button2"
    Storyboard.TargetProperty="Width">
    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="200"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

Se sua animação não atender a esses critérios, provavelmente é uma animação dependente. Por padrão, o sistema de animação não executará uma animação dependente. Assim, durante o processo de desenvolvimento e teste, você pode nem estar vendo sua animação em execução. Você ainda pode usar essa animação, mas deve habilitar especificamente cada uma dessas animações dependentes. Para habilitar sua animação, defina a propriedade EnableDependentAnimation do objeto de animação como true. (Cada subclasse de Linha do tempo que representa uma animação tem uma implementação diferente da propriedade, mas todas elas são nomeadas EnableDependentAnimation.)

O requisito de permitir animações dependentes que recaiam sobre o desenvolvedor do aplicativo é um aspeto de design consciente do sistema de animação e da experiência de desenvolvimento. Queremos que os desenvolvedores estejam cientes de que as animações têm um custo de desempenho para a capacidade de resposta da sua interface do usuário. Animações de baixo desempenho são difíceis de isolar e depurar em um aplicativo em grande escala. Portanto, é melhor ativar apenas as animações dependentes que você realmente precisa para a experiência da interface do usuário do seu aplicativo. Não queríamos tornar muito fácil comprometer o desempenho do seu aplicativo por causa de animações decorativas que usam muitos ciclos. Para saber mais sobre dicas de desempenho para animação, veja Otimizar animações e mídia.

Como desenvolvedor de aplicativos, você também pode optar por aplicar uma configuração em todo o aplicativo que sempre desabilita animações dependentes, mesmo aquelas em que EnableDependentAnimation é true. Consulte Timeline.AllowDependentAnimations.

Sugestão

Se você estiver usando o Painel de Animação no Blend para Visual Studio 2019, sempre que tentar aplicar uma animação dependente a uma propriedade de estado visual, avisos serão exibidos no designer. Os avisos não serão exibidos na saída da compilação ou na Lista de Erros. Se você estiver editando XAML manualmente, o designer não mostrará um aviso. Durante a execução no modo de depuração, a saída de Debug do painel Saída apresentará um aviso de que a animação é dependente e será omitida.

Iniciando e controlando uma animação

Tudo o que mostramos até agora não faz com que uma animação seja executada ou aplicada! Até que a animação seja iniciada e esteja em execução, as alterações de valor que uma animação está declarando em XAML estão latentes e ainda não acontecerão. Você deve iniciar explicitamente uma animação de alguma forma relacionada ao tempo de vida do aplicativo ou à experiência do usuário. No nível mais simples, você inicia uma animação chamando o método Begin no Storyboard que é o pai dessa animação. Você não pode chamar métodos de XAML diretamente, portanto, o que quer que você faça para habilitar suas animações, você estará fazendo isso a partir do código. Esse será o code-behind para as páginas ou componentes do seu aplicativo, ou talvez a lógica do seu controle se você estiver definindo uma classe de controle personalizada.

Normalmente, irá chamar Begin e simplesmente permitir que a animação decorra até ao final da sua duração. No entanto, você também pode usar os métodos Pause, Resume e Stop para controlar o Storyboard em tempo de execução, bem como outras APIs usadas para cenários de controle de animação mais avançados.

Quando você chama Begin em um storyboard que contém uma animação que se repete infinitamente (RepeatBehavior="Forever"), essa animação é executada até que a página que a contém seja descarregada, ou você chama especificamente Pause ou Stop.

Iniciando uma animação a partir do código do aplicativo

Você pode iniciar animações automaticamente ou em resposta a ações do usuário. Para o caso automático, normalmente usa-se um evento do ciclo de vida do objeto, como Carregado, para atuar como o gatilho de animação. O evento Loaded é um bom evento para usar para isso porque nesse ponto a interface do usuário está pronta para interação e a animação não será cortada no início porque outra parte da interface do usuário ainda estava carregando.

Neste exemplo, o evento PointerPressed é anexado ao retângulo para que, quando o usuário clicar no retângulo, a animação comece.

<Rectangle PointerPressed="Rectangle_Tapped"
  x:Name="MyAnimatedRectangle"
  Width="300" Height="200" Fill="Blue"/>

O manipulador de eventos inicia o Storyboard (a animação) usando o método Begin do Storyboard.

myStoryboard.Begin();

myStoryboard().Begin();

Você pode manipular o evento Completed se quiser que outra lógica seja executada depois que a animação terminar de aplicar valores. Além disso, para solucionar problemas de interações de sistema de propriedade/animação, o método GetAnimationBaseValue pode ser útil.

Sugestão

Sempre que estiver codificando para um cenário de aplicativo em que você está iniciando uma animação a partir do código do aplicativo, convém revisar novamente se já existe uma animação ou transição na biblioteca de animações para seu cenário de interface do usuário. As animações de biblioteca permitem uma experiência de interface do usuário mais consistente em todos os aplicativos do Tempo de Execução do Windows e são mais fáceis de usar.

Animações para estados visuais

O comportamento de execução de um Storyboard usado para definir o estado visual de um controle é diferente de como um aplicativo pode executar um storyboard diretamente. Como aplicado a uma definição de estado visual em XAML, o Storyboard é um elemento contido num VisualState, e o estado completo é controlado através da API VisualStateManager. Qualquer animação dentro será executada de acordo com os seus valores de animação e propriedades de Timeline quando o VisualState que o contém for usado por um controle. Para saber mais, veja Storyboards para estados visuais. Para estados visuais, o FillBehavior aparente é diferente. Se um estado visual for alterado para outro estado, todas as alterações de propriedade aplicadas pelo estado visual anterior e suas animações serão canceladas, mesmo que o novo estado visual não aplique especificamente uma nova animação a uma propriedade.

Storyboard e EventTrigger

Há uma maneira de iniciar uma animação que pode ser declarada inteiramente em XAML. No entanto, esta técnica já não é muito utilizada. É uma sintaxe herdada do WPF e das primeiras versões do Silverlight antes do suporte ao VisualStateManager . Essa sintaxe EventTrigger ainda funciona no XAML do Tempo de Execução do Windows por motivos de importação/compatibilidade, mas só funciona para um comportamento de gatilho baseado no evento FrameworkElement.Loaded ; A tentativa de acionar outros eventos lançará exceções ou falhará na compilação. Para saber mais, veja EventTrigger ou BeginStoryboard.

Animando propriedades anexadas XAML

Não é um cenário comum, mas pode-se aplicar um valor animado a uma propriedade XAML anexada. Para saber mais sobre o que são propriedades anexadas e como elas funcionam, veja Visão geral das propriedades anexadas. O direcionamento de uma propriedade anexada requer uma sintaxe de caminho de propriedade que inclua o nome da propriedade entre parênteses. Você pode animar as propriedades anexadas internas, como Canvas.ZIndex usando um ObjectAnimationUsingKeyFrames que aplica valores inteiros discretos. No entanto, uma limitação existente da implementação do XAML no Windows Runtime é que não se pode animar uma propriedade anexada personalizada.

Mais tipos de animação e próximas etapas para aprender sobre como animar sua interface do usuário

Até agora, mostramos as animações personalizadas que efetuam animação entre dois valores e, em seguida, interpolam linearmente os valores quando necessário, enquanto a animação é executada. Estas são chamadas de animações From/To/By. Mas há outro tipo de animação que permite declarar valores intermediários que ficam entre o início e o fim. São as chamadas animações de quadros-chave. Há também uma maneira de alterar a lógica de interpolação em uma animação De-Para-Por ou/ uma animação de quadro-chave/. Isto implica a aplicação de uma função de flexibilização. Para saber mais sobre esses conceitos, veja Quadro-chave e animações de função de suavização.

Diferenças com o WPF

Se você estiver familiarizado com o Windows Presentation Foundation (WPF), leia esta seção; caso contrário, você pode ignorá-lo.

Em geral, criar animações com storyboard numa aplicação Windows Runtime é semelhante ao WPF. Mas há uma série de diferenças importantes:

  • As animações com storyboard não são a única maneira de animar visualmente uma interface do usuário, nem são necessariamente a maneira mais fácil para os desenvolvedores de aplicativos fazerem isso. Em vez de utilizar animações baseadas em storyboard, é frequentemente uma prática de design melhor optar por animações de tema e de transição. Eles podem criar rapidamente animações de interface do usuário recomendadas sem entrar nas complexidades da segmentação de propriedades de animação. Para saber mais, veja Animações em XAML.
  • No Windows Runtime, muitos controlos XAML incluem animações de tema e animações de transição como parte do seu comportamento incorporado. Na maioria das vezes, os controles WPF não tinham um comportamento de animação padrão.
  • Nem todas as animações personalizadas criadas podem ser executadas por padrão em um aplicativo do Tempo de Execução do Windows, se o sistema de animação determinar que a animação pode causar um desempenho insatisfatório na interface do usuário. As animações em que o sistema determina que pode haver um impacto no desempenho são chamadas animações dependentes. É dependente porque a temporização da sua animação está trabalhando diretamente no fio de execução da interface do utilizador, que é também onde a entrada ativa do utilizador e outras atualizações estão a tentar aplicar as alterações em tempo de execução à interface do utilizador. Uma animação dependente que está consumindo recursos extensos do sistema no thread da interface do usuário pode fazer com que o aplicativo pareça não responder em determinadas situações. Se a animação causar uma alteração de layout ou tiver o potencial de afetar o desempenho no thread da interface do usuário, muitas vezes você precisará habilitar explicitamente a animação para vê-la ser executada. É para isso que serve a propriedade EnableDependentAnimation em classes de animação específicas. Consulte Animações dependentes e independentes para obter mais informações.
  • Atualmente, não há suporte para funções de flexibilização personalizadas no Tempo de Execução do Windows.
  • Last updated on