Visão geral de storyboards
Esta visão geral se concentra em como as transições e os storyboards são usados no Windows Animation. Para obter uma visão geral dos componentes do Windows Animation, confira Visão geralVisão geral do Windows Animation.
Este tópico contém as seguintes seções:
Transições
Uma transição define como uma única variável de animação é alterada em um intervalo de tempo específico. O Windows Animation 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, o quais podem incluir o valor da variável quando a transição é concluída, a duração da transição ou quantidades exclusivas da 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. Elas podem ser especificadas explicitamente pelo aplicativo, mas normalmente são definidas pelo gerenciador de animação conforme o valor e a velocidade da variável de animação quando a transição começa.
Biblioteca de transição
As transições a seguir são atualmente fornecidas pela biblioteca de transição. Se um aplicativo precisa ter um efeito que não pode ser especificado usando a biblioteca de transição, os desenvolvedores podem 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 |
|---|---|
| accelerate-decelerate |
A variável de animação acelera e, em seguida, desacelera ao longo de uma determinada duração. |
| constante |
A variável de animação permanece em seu valor inicial durante toda a transição. |
| cubic |
A variável de animação é alterada de seu valor inicial para um valor final especificado, com uma velocidade final especificada, ao longo de uma determinada duração. |
| discrete |
A variável de animação permanece em seu valor inicial por um tempo de atraso especificado, depois muda instantaneamente para um valor final especificado e permanece nesse valor por um tempo de espera determinado. |
| instantaneous |
A variável de animação é alterada instantaneamente de seu valor atual para um valor final especificado. |
| linear |
A variável de animação faz a transição linearmente de seu valor inicial para um valor final especificado em uma determinada duração. |
| linear from speed |
A variável de animação faz a transição linearmente 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. |
| reversal |
A variável muda de direção ao longo de determinada duração. O valor final será o mesmo que o inicial e a velocidade final será o negativo da velocidade inicial. |
| sinusoidal from range |
A variável oscila em um determinado intervalo de valores, com um período especificado de oscilação, por uma determinada duração. |
| sinusoidal from velocity |
A variável oscila com um período de oscilação especificado, por uma determinada duração. A amplitude da oscilação é determinada pela velocidade inicial da variável. |
| smooth stop |
A variável de animação chega a uma parada suave em um valor final especificado, dentro de uma duração máxima. |
A tabela a seguir contém ilustrações para cada uma das transições citadas anteriormente.
| Ilustrações |
|---|
     |
   |
   |
 |
Transições personalizadas
Um interpolador define a função matemática que determina como uma variável de animação é alterada com o passar 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 que é fornecido pelo sistema e implementa a função interpolator. Se um aplicativo precisa ter um efeito que não pode ser especificado usando a biblioteca de transição, ele pode 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. 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. Confira IUIAnimationInterpolator e IUIAnimationTransitionFactory para obter mais detalhes.
A maioria dos aplicativos terá todas as transições necessárias usando a biblioteca de transição e, portanto, não precisará 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. É garantido que as transições em um storyboard permaneçam sincronizadas uma em relação à outra, 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 ao storyboard, configura o storyboard de forma adequada 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 que atualmente animam 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 fixada. Ela pode ser determinada pelo valor e pela 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 tenham sido criados. Para obter mais informações, confira Criar os principais objetos de animação. Os exemplos também pressupõem que o aplicativo criou 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.
- Criar um storyboard simples
- Usar uma duração sensível ao contexto
- Criar um storyboard mais complexo
- Usar quadros-chave
- Reter variáveis
- Agendar um storyboard
Criar 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 produz 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 ao longo de um período fixo.
Para um cenário tão simples, uma opção alternativa é usar o método IUIAnimationManager::ScheduleTransition.
Usar uma duração sensível ao contexto
Enquanto algumas transições têm uma duração fixa, a duração de outras depende do valor inicial ou da velocidade da variável animada quando a transição é iniciada. 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, as 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.
Criar 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 sensível ao contexto, o storyboard agora contém duas transições back-to-back de duração arbitrária que afetam a variável X.
Chamar o método 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 mesmo após T2.
Usar quadros-chave
Para adicionar uma transição em um deslocamento do início do storyboard, você deve primeiro adicionar um quadro-chave. Os quadros-chave representam instantes no tempo e, por si só, não têm efeito no 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 de adicionar o keyframe1 e a transição T4, que é aplicada à variável Z, alinhada com o keyframe1, e é criada 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 fim das transições, usando o método IUIAnimationStoryboard::AddKeyframeAfterTransition. O diagrama a seguir mostra o resultado de adicionar keyframe2 após T1 e do keyframe3 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 keyframe2 e keyframe3 também não são determinados até então. Consequentemente, o keyframe2 e até mesmo o keyframe3 podem ocorrer antes de keyframe1.
O início e o fim de uma transição podem ser alinhados com os quadros-chave usando o método IUIAnimationStoryboard::AddTransitionBetweenKeyframes. O diagrama a seguir mostra o resultado de adicionar uma quinta transição, T5, na variável Y, entre o keyframe2 e o keyframe3. Isso altera a duração de T5, tornando-a mais longa ou mais curta, dependendo dos deslocamentos relativos de keyframe2 e keyframe3.
Reter variáveis
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 animadas em seus valores finais até que o storyboard seja concluído. O diagrama a seguir mostra o resultado de reter X e Z quando T4 termina por último. O storyboard reté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.
Mesmo que Y não seja retido por esse storyboard, seu valor não é alterado após a conclusão de T5, a menos que outro storyboard o anime. Como Y não é retido, qualquer outro storyboard, independentemente da prioridade, pode animar Y após o término de T5. Por outro lado, como X é retido, um storyboard de prioridade mais baixa não pode animar X até que esse 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 sensíveis ao contexto provavelmente serão diferentes, conforme mostrado na ilustração a seguir.
Nesse cenário, T5 começa antes de T3 terminar e, portanto, T3 é cortado. Como T4 termina antes de T2 e T5, o valor de Z é retido até o fim do storyboard. Em geral, os valores e as velocidades das variáveis quando um storyboard começa a ser reproduzido podem afetar a ordenação do quadro-chave e o tamanho e a forma gerais do storyboard.
Agendar um storyboard
Ao agendar um storyboard, sua hora de início é determinada por seu contorno e pelos contornos dos storyboards que estão atualmente no agendamento. Especificamente, o primeiro e o último momentos em que o storyboard anima cada variável individual determinam se e quando dois storyboards colidem, mas os detalhes internos das transições não são importantes.
A ilustração a seguir mostra o contorno de um storyboard com cinco transições que animam três variáveis.
Uma base da plataforma Windows Animation é seu suporte para permitir que uma animação seja concluída antes que outra comece, quando necessário. Embora isso elimine muitos problemas lógicos, também introduz latência arbitrária na interface do usuário. Para resolver isso, os aplicativos podem especificar o atraso mais longo aceitável 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 tenha decorrido. 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, é removido totalmente do agendamento ou é impedido de ser concluído devido à interrupção por um storyboard de prioridade mais alta. Para identificar os storyboards transferidos para manipuladores de eventos de storyboard (ou comparações de prioridade), um aplicativo pode usar o método IUIAnimationStoryboard::SetTag para aplicar marcações a storyboards, semelhantes àquelas que podem ser usadas para identificar variáveis. Assim como acontece com a reutilização de storyboards, os desenvolvedores devem ter cuidado ao usar marcações para identificar storyboards e garantir que não surjam ambiguidades quando as ações do usuário resultarem 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 atraso aceitável mais longo definido para 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 somente C e E, e apenas para evitar falhas.
- G pode cortar somente A, C, E e F, e apenas para evitar falhas.
- Qualquer storyboard pode compactar qualquer outro storyboard (a compactação é feita sempre 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. Confira o método IUIAnimationPriorityComparison::HasPriority para obter detalhes.
Para iniciar G antes do atraso aceitável mais longo, o gerenciador de animação deve fazer o seguinte:
- Cortar F
- Cancelar E
Quando E é cancelado, D e F são descobertos e revertem para seus contornos originais:
O gerenciador de animação não precisa cancelar ou cortar C para agendar antes de seu atraso aceitável mais longo, portanto, o encontro de C e G determina quando G começa.
Depois que G foi agendado com sucesso, as durações de suas transições podem ser determinadas e, portanto, o restante de seu contorno é conhecido. No entanto, o contorno pode ser alterado se outro storyboard é removido posteriormente do agendamento.
Como segundo exemplo, considere um cenário como o anterior, mas com um menor atraso aceitável mais longo especificado para G.
Neste 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 inicie após seu atraso aceitável mais longo e não mais tarde.
Para preservar seu tempo relativo, A, B e F também são compactados.
No entanto, os storyboards em variáveis não relacionadas (não mostradas) não serão compactados.
Mais uma vez, o contorno de G agora é conhecido e é diferente do resultado no primeiro cenário, porque as variáveis têm valores diferentes quando G começa.