No momento, há um bug em que você não verá um campo UI Animation Condition em View Bindings quando não houver vinculações de visualização regulares criadas. Primeiro, você deve criar uma vinculação de visualização regular para poder ver os campos de vinculação de condição. Esse bug foi corrigido na v.33.00.
Use o Sequencer no UMG para animar widgets. Os widgets são animados com base nos valores inseridos em um parâmetro de material.
Como configurar o widget
O widget está usando o widget de rastreador do exemplo em Como configurar parâmetros de material no UMG.
Crie um widget de rastreador se não tiver um pronto para uso. Em seguida, faça o seguinte:
Adicione um bloco de texto que mostre +1 na parte superior do widget de rastreador existente. Indica que o rastreador de eliminação está sendo incrementado com base no número de zumbis eliminados.
Em Renderização > Opacidade de renderização, defina Opacidade de renderização como 0,0 para esse bloco de texto.
O widget está pronto para ser animado.
Como configurar a animação
Para adicionar animação à IU, você abrirá o Sequencer no gráfico de evento para animar o ícone e "+1". Em seguida, você configurará a animação no Sequencer.
Para este exemplo, o ícone é exibido e o texto "+1" aparece quando o rastreador do jogador avança, como no gif abaixo.
Para obter informações sobre como usar o Sequencer, consulte o documento Sequencer e Control Rig.
Abra a janela Animação em Janela > Animações.
Clique em +Animação e chame a animação OnIncrement.
Como animar a visibilidade de um widget
Para animar a IU, você identificará o widget a ser animado e, em seguida, animará o material ou a textura associada a esse widget no Sequencer, na janela de animação. Inicie a animação selecionando IncrementText (+1).
Selecione OnIncrement, selecione Texto +1 e depois selecione +Adicionar > Texto incremental.
Selecione o ícone "+" na faixa IncrementText e selecione "Opacidade de renderização". Isso permite rastrear a opacidade na linha do tempo da animação.
Defina uma chave para o início da animação. Isso determina onde o texto começa a aparecer e desaparecer.
Defina a Opacidade de renderização como:
1,0 em 0,25 segundo
0,0 em 0,50 segundo
Agora, você tem uma animação que faz o texto aparecer e desaparecer sempre que o jogador obtém uma eliminação.
Como animar a posição de um widget
Adicione uma animação à posição do widget de texto para que o texto se mova para cima quando estiver visível antes de desaparecer.
Clique no ícone "+" em IncrementText e selecione Transformar.
Expanda Transformar > Translação e defina Y como o valor com o qual você deseja que o texto +1 se mova para cima enquanto estiver visível. Neste exemplo, os keyframes de translação Y no texto estão definidos como:
0,0 em 0,0 s
-20,0 em 0,25 s
-20,0 em 0,50 s
Lembre-se de definir keyframes para cada movimento do texto.
Agora, o texto se move para cima quando aparece.
Como animar a escala de um widget
Aumente o tamanho do texto +1 animado conforme ele se move para chamar a atenção para as eliminações, animando as configurações de escala do widget. Essa animação dá a ilusão de texto "estourando" na tela.
Expanda IncrementText > Transformar > Escala. Os valores X e Y aparecem em Escala.
Defina a escala X e Y como keyframes na sua linha do tempo OnIncrement. Neste exemplo, os keyframes da escala foram definidos para:
0,0 em 0,0 s
2,0 a 0,10 s
0,0 a 0,50 s
Agora, o texto +1 aparece com um efeito dramático quando a animação é reproduzida.
Como animar um parâmetro de material do pincel de uma imagem
Para fazer com que o ícone no material se expanda com o progresso do rastreador, acesse o material por meio do Sequencer.
Selecione a imagem TrackerMaterial e clique em +Adicionar > TrackerMaterial na animação OnIncrement.
Clique no ícone + na sua faixa TrackerMaterial e selecione Brush.Brush Material. Isso adiciona uma faixa de material à propriedade de Brush.Brush.Material.
Clique no ícone + na nova faixa de Brush.Brush.Material e selecione IconScaleX e IconScaleY.
Expanda IconScaleX e IconScaleY. Você pode manipular facilmente esses parâmetros no Sequencer quando a animação OnIncrement é reproduzida. Ao usar essas configurações, você pode animar o ícone ampliando e reduzindo.
Defina IconScaleX e IconScaleY como:
0,7 a 0,00
1,0 a 0,25
0,7 a 0,00
Agora, a animação usa os parâmetros de material de TrackerMaterial para animar o ícone, como no gif abaixo.
Como adicionar uma condição de animação
Agora que sua animação está pronta, vincule-a a um valor de jogabilidade para que ela reproduza uma animação quando esse valor de jogabilidade mudar.
Abra a janela Vinculações de Visualização ao selecionar Janela > Vinculações de Visualização.
Na janela Vinculações de Visualização, selecione +Adicionar condição.
Selecione a caixa à esquerda e, em seguida, selecione MVVM_UEFN_Tracker > Valor. Isso rastreia o progresso do rastreador reproduzindo uma animação sempre que o valor do rastreador incrementa.
Clique no menu suspenso do meio e selecione Maior que (>).
As duas caixas no meio são as condições que você deseja preencher para reproduzir a animação. Sempre que o valor muda, ele verifica se está dentro dessa condição e, se estiver, reproduzirá a animação.
Ao defini-lo como Maior que (>) 0,0, a IU reproduzirá a animação sempre que esse valor mudar.
Selecione a caixa à direita e selecione WBP_{YourWidgetName} > Queue Play Animation. A caixa à direita é a ação a ser realizada quando esse valor atender à condição. Nesse caso, para reproduzir a animação OnIncrement criada acima.
Uma lista de opções relacionadas à animação que você deseja reproduzir aparece em "View Bindings".
In Animation = Play
Start at Time = Selecione um horário
Num Loops to Play = quantidade de vezes que a animação é reproduzida
Play Mode = Forward, Reverse ou Ping Pong
Playback Speed = acelere ou desacelere a animação
Restore State = restaura a animação para seu estado padrão
Clique no ícone de link ao lado de InAnimation, então selecione WBP_{YourWidgetName} > OnIncrement > SelectPing Pong.
Agora, sua animação está configurada para ser reproduzida sempre que o rastreador progredir.
Resultado final
À medida que os jogadores eliminam inimigos ou PNJs, a IU mostra o progresso da eliminação com o ícone de destaque e o +1 aparecendo, sendo destacado e desaparecendo.