Visão geral do Storyboard

Essa visão geral se concentra em como transições e storyboards são usados na Animação do Windows. Para obter uma visão geral dos componentes da Animação do Windows, consulte Visão geral da animação do Windows.

Este tópico contém as seguintes seções:

• Transições
  • Biblioteca de Transição
  • Transições personalizadas
• Storyboards
  • Criando um storyboard simples
  • Usando uma duração de Context-Sensitive
  • Criando um storyboard mais complexo
  • Usando quadros-chave
  • Variáveis de retenção
  • Agendando um Storyboard
• Tópicos relacionados

Transições

Uma transição define como uma única variável de animação muda em um intervalo de tempo específico. A Animação do Windows inclui uma biblioteca de transições comuns que os desenvolvedores podem aplicar a uma ou mais variáveis de animação. Diferentes tipos de transições têm diferentes conjuntos de parâmetros, que podem incluir o valor da variável quando a transição for concluída, a duração da transição ou quantidades exclusivas para a função matemática subjacente, como aceleração ou intervalo de oscilação.

Todas as transições compartilham dois parâmetros implícitos: o valor inicial e a velocidade inicial (inclinação) da função matemática. Eles podem ser especificados explicitamente pelo aplicativo, mas normalmente são definidos pelo gerenciador de animação como o valor e a velocidade da variável de animação quando a transição começa.

• Biblioteca de Transição
• Transições personalizadas

Biblioteca de Transição

As transições a seguir são fornecidas atualmente pela biblioteca de transição. Se um aplicativo exigir um efeito que não possa ser especificado usando a biblioteca de transição, os desenvolvedores poderão criar outros tipos de transições implementando um interpolador personalizado para o aplicativo ou usando uma biblioteca de transição de terceiros.

Nome da Transição	Descrição
aceleração-desaceleração	A variável de animação acelera e, em seguida, desacelera durante uma determinada duração.
constante	A variável de animação permanece em seu valor inicial durante a transição.
cúbicas	A variável de animação muda de seu valor inicial para um valor final especificado, com uma velocidade final especificada, durante uma determinada duração.
Discreta	A variável de animação permanece em seu valor inicial por um tempo de atraso especificado e, em seguida, alterna instantaneamente para um valor final especificado e permanece nesse valor por um determinado tempo de retenção.
Instantânea	A variável de animação muda instantaneamente de seu valor atual para um valor final especificado.
linear	A variável de animação faz a transição linear de seu valor inicial para um valor final especificado durante uma determinada duração.
linear da velocidade	A variável de animação faz a transição linear de seu valor inicial para um valor final especificado com uma velocidade especificada.
parabólico da aceleração	A variável de animação faz a transição de seu valor inicial para um valor final especificado, com uma velocidade final especificada, alterando sua velocidade com uma aceleração especificada.
Reversão	A variável altera a direção durante uma determinada duração. O valor final será o mesmo que o inicial e a velocidade final será o negativo da velocidade inicial.
sinusoidal do intervalo	A variável oscila dentro de um determinado intervalo de valores, com um período especificado de oscilação, por uma determinada duração.
sinusoidal da velocidade	A variável oscila com um período especificado de oscilação, por uma determinada duração. A amplitude da oscilação é determinada pela velocidade inicial da variável.
parada suave	A variável de animação chega a uma parada suave em um valor final especificado, dentro de uma duração máxima de tempo.

A tabela a seguir contém ilustrações para cada uma dessas transições.

Ilustrações

Transições personalizadas

Um interpolador define a função matemática que determina como uma variável de animação muda ao longo do tempo à medida que progride de seu valor inicial para um valor final. Cada transição na biblioteca de transição tem um objeto interpolador associado fornecido pelo sistema e implementa a função interpolador. Se um aplicativo exigir um efeito que não pode ser especificado usando a biblioteca de transição, ele poderá implementar uma ou mais transições personalizadas implementando um objeto interpolador para cada nova transição. Os objetos interpoladores não podem ser usados diretamente por aplicativos e, em vez disso, devem ser encapsulados em uma transição associada. Uma fábrica de transição é usada para gerar transições de um objeto interpolador. Consulte IUIAnimationInterpolator e IUIAnimationTransitionFactory para obter mais detalhes.

Observe que a maioria dos aplicativos terá todas as transições necessárias usando a biblioteca de transição e, portanto, não precisaria implementar um interpolador.

Storyboards

Um storyboard é uma coleção de transições aplicadas a uma ou mais variáveis de animação ao longo do tempo. As transições em um storyboard têm a garantia de permanecer sincronizadas em relação umas às outras, e o storyboard é agendado ou cancelado como uma unidade. Depois de criar as transições desejadas, um aplicativo cria um storyboard usando o gerenciador de animação, adiciona as transições para o storyboard, configura o storyboard adequadamente e o agenda para ser reproduzido o mais rápido possível. O gerenciador de animação determina a hora de início real do storyboard, pois pode haver contenção com outros storyboards animando atualmente as mesmas variáveis.

A duração geral de um storyboard depende das durações das transições no storyboard. A duração de uma transição não precisa ser corrigida; ele pode ser determinado pelo valor e velocidade das variáveis animadas quando a transição começa. Portanto, a duração de um storyboard também pode depender do estado das variáveis que ele anima.

Os exemplos a seguir pressupõem que um gerenciador de animação, uma biblioteca de transição e um temporizador foram criados. Para obter mais informações, consulte Criar os principais objetos de animação. Os exemplos também pressupõem que o aplicativo tenha criado três variáveis de animação (X, Y e Z) usando o método IUIAnimationManager::CreateAnimationVariable e cinco transições (T1, T2, T3, T4 e T5) usando um dos métodos da interface IUIAnimationTransitionLibrary .

• Criando um storyboard simples
• Usando uma duração de Context-Sensitive
• Criando um storyboard mais complexo
• Usando quadros-chave
• Variáveis de retenção
• Agendando um Storyboard

Criando um storyboard simples

Para criar um storyboard simples, use o método IUIAnimationManager::CreateStoryboard para criar um novo storyboard, o método IUIAnimationTransitionLibrary::CreateLinearTransition para criar uma transição linear, T1 e o método IUIAnimationStoryboard::AddTransition para aplicar a transição T1 à variável X e adicionar a transição resultante ao storyboard.

Esse processo gera um storyboard simples, conforme mostrado na figura a seguir. O storyboard contém uma transição, T1, de modo que o valor da variável X é alterado linearmente durante uma duração fixa de tempo.

Observe que, para um cenário tão simples, uma opção alternativa é usar o método IUIAnimationManager::ScheduleTransition .

Usando uma duração de Context-Sensitive

Embora algumas transições tenham uma duração fixa, a duração de outras depende do valor inicial ou da velocidade da variável animada quando a transição começa. Por exemplo, o método IUIAnimationTransitionLibrary::CreateLinearTransitionFromSpeed cria uma transição com uma duração proporcional à diferença entre o valor inicial da variável de animação e o valor final especificado. Nesta ilustração e nas ilustrações restantes, essas transições com durações arbitrárias são mostradas com um ponto de interrogação (?) e suas durações reais são determinadas quando o storyboard é reproduzido.

Criando um storyboard mais complexo

Depois de criar um storyboard e adicionar uma única transição, T1, você pode acrescentar uma segunda transição para a variável X chamando o método IUIAnimationStoryboard::AddTransition novamente, mas com T2 em vez de T1.

Supondo que a transição T2 tenha uma duração que seja contextual, o storyboard agora contém duas transições consecutivas de duração arbitrária que afetam a variável X.

Chamar AddTransition novamente com a variável Y e a transição T3 adiciona uma terceira transição no início do storyboard. Dependendo dos valores de X e Y quando o storyboard é reproduzido, t3 pode terminar após T1 ou até mesmo após T2.

Usando quadros-chave

Para adicionar uma transição em um deslocamento do início do storyboard, primeiro você deve adicionar um quadro-chave. Quadros-chave representam instantâneos no tempo e por si só não têm efeito sobre o comportamento do storyboard. Cada storyboard tem um quadro-chave implícito que representa o início do storyboard, UI_ANIMATION_KEYFRAME_STORYBOARD_START; você pode adicionar novos quadros-chave em deslocamentos desde o início chamando o método IUIAnimationStoryboard::AddKeyframeAtOffset com UI_ANIMATION_KEYFRAME_STORYBOARD_START.

O deslocamento no qual você adiciona um quadro-chave é sempre relativo a outro quadro-chave. O diagrama a seguir mostra o resultado da adição do quadro-chave1 e da transição T4, que é aplicado à variável Z, alinhado ao quadro-chave1 e criado com uma duração fixa. É claro que, como as durações das outras transições ainda não são conhecidas, t4 pode não ser a última transição a ser concluída.

Os quadros-chave também podem ser colocados no final das transições, usando o método IUIAnimationStoryboard::AddKeyframeAfterTransition . O diagrama a seguir mostra o resultado da adição de quadro-chave2 após T1 e quadro-chave3 após T2.

Como as durações de T1 e T2 não são conhecidas até que o storyboard seja reproduzido, os deslocamentos de quadro-chave2 e quadro-chave3 também não são determinados até lá. Consequentemente, o quadro-chave2 e até mesmo o quadro-chave3 podem ocorrer antes do quadro-chave1.

O início e o fim de uma transição podem ser alinhados com quadros-chave usando o método IUIAnimationStoryboard::AddTransitionBetweenKeyframes . O diagrama a seguir mostra o resultado da adição de uma quinta transição, T5, na variável Y, entre keyframe2 e keyframe3. Isso altera a duração de T5, tornando-a mais longa ou menor, dependendo dos deslocamentos relativos de keyframe2 e keyframe3.

Variáveis de retenção

Se T4 terminar após T2 e T5, o storyboard interromperá a animação das variáveis X e Y, tornando-as disponíveis para outros storyboards animarem. No entanto, o aplicativo pode chamar o método IUIAnimationStoryboard::HoldVariable para solicitar que o storyboard mantenha algumas ou todas as variáveis que ele anima em seus valores finais até que o storyboard seja concluído. O diagrama a seguir mostra o resultado da retenção de X e Z quando t4 termina por último. Observe que o storyboard mantém X em seu valor final até que o storyboard seja concluído. A retenção não tem efeito em Z porque o storyboard termina quando T4 termina.

Embora Y não seja mantido por este storyboard, seu valor não é alterado após a conclusão de T5, a menos que outro storyboard o anime. Como Y não é mantido, qualquer outro storyboard, independentemente da prioridade, pode animar Y após a conclusão de T5. Por outro lado, como X é mantido, um storyboard de prioridade mais baixa não pode animar X até que este storyboard seja concluído.

Todas essas ilustrações assumiram um conjunto arbitrário de valores atuais para as variáveis quando o storyboard começa a ser reproduzido. Se outros valores forem encontrados, as durações das transições contextuais provavelmente serão diferentes, conforme mostrado na ilustração a seguir.

Nesse cenário, t5 começa antes de T3 ser concluído e, portanto, T3 é cortado. Como t4 termina antes de T2 e T5, o valor de Z é mantido até o final do storyboard. Em geral, os valores e as velocidades de variáveis quando um storyboard começa a ser reproduzido podem afetar a ordenação de quadro-chave e o comprimento geral e a forma do storyboard.

Agendando um storyboard

Ao agendar um storyboard, sua hora de início é determinada por sua estrutura de tópicos e pelos contornos dos storyboards que estão atualmente na agenda. Especificamente, os primeiros e últimos momentos em que o storyboard anima cada variável individual determinam se e quando dois storyboards colidem, mas os detalhes internos das transições dentro não são importantes.

A ilustração a seguir mostra a estrutura de tópicos de um storyboard com cinco transições animando três variáveis.

Uma base da plataforma De animação do Windows é seu suporte para permitir que uma animação seja concluída antes de outra começar, quando necessário. Embora isso elimine muitos problemas lógicos, ele também introduz latência arbitrária na interface do usuário. Para resolver isso, os aplicativos podem especificar o atraso aceitável mais longo para um storyboard iniciar, usando o método IUIAnimationStoryboard::SetLongestAcceptableDelay , e o gerenciador de animação usa essas informações para agendar o storyboard antes que o período de latência especificado se desfaça. Quando um storyboard é agendado, o gerenciador de animação determina se outros storyboards devem primeiro ser cancelados, cortados, concluídos e/ou compactados.

Um aplicativo pode registrar um manipulador que será chamado quando o status de um storyboard for alterado. Isso permite que o aplicativo responda quando o storyboard começa a ser reproduzido, é executado até a conclusão, é totalmente removido do agendamento ou é impedido de ser concluído devido à interrupção por um storyboard de prioridade mais alta. Para identificar os storyboards passados para manipuladores de eventos de storyboard (ou comparações de prioridade), um aplicativo pode usar o método IUIAnimationStoryboard::SetTag para aplicar marcas a storyboards, semelhantes àqueles que podem ser usados para identificar variáveis. Assim como acontece com o reutilização do storyboard, os desenvolvedores devem ter cuidado ao usar marcas para identificar storyboards e garantir que as ambiguidades não surjam quando as ações do usuário resultam em muitos storyboards sendo enfileirados.

Os exemplos a seguir mostram duas variações de uma tentativa de agendar o storyboard criado nas seções anteriores deste tópico.

Nesse cenário, seis storyboards, de A a F, já foram agendados para animar as variáveis W, X, Y e Z, mas apenas A e B começaram a ser reproduzidos. O novo storyboard, rotulado como G, tem seu maior atraso aceitável definido como a duração mostrada na ilustração a seguir.

O aplicativo registrou comparações de prioridade que incluem a seguinte lógica:

• G pode cancelar apenas C e E e apenas para evitar falhas.
• G pode cortar apenas A, C, E e F e apenas para evitar falhas.
• Qualquer storyboard pode compactar qualquer outro storyboard (a compactação sempre é feita apenas para evitar falhas).

Observação

O qualificador "somente para evitar falhas" significa que as comparações de prioridade registradas retornam S_OK somente quando o parâmetro priorityEffect é UI_ANIMATION_PRIORITY_EFFECT_FAILURE. Consulte o método IUIAnimationPriorityComparison::HasPriority para obter detalhes.

Para iniciar o G antes que o atraso aceitável mais longo tenha decorrido, o gerenciador de animação deve fazer o seguinte:

• Cortar F
• Cancelar E

Quando E é cancelado, D e F são descobertos e reverter aos seus contornos originais:

O gerenciador de animação não precisa cancelar ou cortar C para agendar antes que seu maior atraso aceitável tenha decorrido, portanto, a reunião de C e G determina quando G é iniciado.

Depois que g tiver sido agendado com êxito, as durações de suas transições podem ser determinadas e o restante de sua estrutura de tópicos é, portanto, conhecido. No entanto, a estrutura de tópicos poderá mudar se outro storyboard for removido posteriormente do agendamento.

Como segundo exemplo, considere um cenário como esse acima, mas com um atraso aceitável mais curto especificado para G.

Nesse caso, as seguintes ações são executadas:

• Cortar F
• Cancelar E
• Cancelar C

Além disso, o gerenciador de animação deve compactar D pelo valor mostrado para permitir que G comece após seu maior atraso aceitável e não posterior.

Para preservar o tempo relativo, A, B e F também são compactados.

No entanto, storyboards em variáveis não relacionadas (não mostrados) não seriam compactados.

Mais uma vez, a estrutura de tópicos de G agora é conhecida e é diferente do resultado no primeiro cenário porque as variáveis têm valores diferentes quando G começa.

Tópicos relacionados

IUIAnimationManager

IUIAnimationPriorityComparison

IUIAnimationStoryboard

IUIAnimationTransitionLibrary