Neste artigo, vamos explicar como adicionar Animações a qualquer parte do seu design.
As animações são uma forma eficaz de exibir promoções, anúncios e mensagens. Elas atraem o olhar humano com movimento, fazendo com que as pessoas naturalmente olhem para sua origem. Com o Designer, é fácil adicionar animações aos seus designs, trazendo mais atenção dos visitantes.
Para uma introdução ao uso do Designer, consulte nosso artigo sobre Começando com o Designer.
Como Adicionar Animações a Elementos de Design
Selecionar o botão Animar permitirá adicionar animações aos seus elementos de design.
Este botão também está disponível por elemento.
Clicar nele abrirá a área Animar no Menu Lateral:
Para adicionar uma animação, você precisará selecionar um elemento para animar. Em seguida, decida se usará uma Animação de Página ou uma Animação de Objeto.
Para demonstrar as diferenças entre as duas e como usá-las melhor (juntas ou separadamente), usaremos um design de modelo simples, como abaixo:
Animações de Página
Animações de Página animarão na ordem em que são colocadas na lista. Estas também animarão apenas uma vez, sempre que a página carregar.
Por exemplo, digamos que queremos que a água em nosso modelo de exemplo entre voando pela direita - para dar a aparência de respingar nas garrafas de água.
Primeiro, selecione o elemento. Em seguida, clique em Animar → Adicionar na seção Animações de Página. Isso trará uma série de opções:
Tipos de Animação:
- Aparecer gradualmente
- Desaparecer gradualmente
- Voar da esquerda
- Voar da direita
- Voar de baixo
- Voar de cima
- Voar para esquerda
- Voar para direita
- Voar para baixo
- Voar para cima
- Aumentar zoom - Aumenta brevemente o zoom do elemento
- Diminuir zoom - Diminui brevemente o zoom do elemento
- Saltar X - Faz o elemento saltar horizontalmente
- Saltar Y - Faz o elemento saltar verticalmente
- Piscar
- Zoom - Alterna entre aumentar e diminuir o zoom do elemento
- Girar para esquerda
- Girar para direita
Embora pudéssemos fornecer descrições detalhadas de cada uma delas, é mais divertido experimentá-las e ver como se encaixam na sua visão!
Tempo da Animação:
- Após anterior - Define a animação para ser acionada após a animação anterior na lista.
- Com anterior - Define a animação para ser acionada ao mesmo tempo que a animação anterior.
- Do início - Define a animação para ser acionada assim que o recurso carregar.
Atraso (seg) - Quanto tempo de atraso entre o carregamento do recurso/animação anterior e o disparo da animação.
Velocidade da Animação - Altera a rapidez com que a animação se move.
| NOTA |
|
Para utilizar adequadamente o Tempo da Animação, você precisará coordenar sua escolha com a opção de Atraso. Por exemplo, digamos que temos três animações de página, A, B e C.
|
Uma vez que uma animação é adicionada, mais podem ser criadas. A lista de animações pode ser reordenada através de arrastar e soltar:
| NOTA |
| A ordem em que as Animações são arrastadas não substitui seu tempo para exibir. Por exemplo, se você tem três animações e uma está definida para exibir "Do Início" e você a arrasta para o final da ordem, ela ainda será exibida do início, apesar de ser a última na ordem. Alterar a ordem no arrastar e soltar não alterará a configuração de Tempo da Animação. |
Para criar a animação que queremos, simplesmente selecionamos os diferentes elementos de água e fazemos com que Voem da direita, definidos como Do início para que toda a água entre de uma vez. Podemos testar isso clicando em Reproduzir:
Animações de Objeto
Animações de Objeto animarão simultaneamente, independentemente da ordem em que são colocadas. Estas também podem ser configuradas para animar indefinidamente (ou enquanto o recurso for exibido na tela).
Por exemplo, digamos que queremos que nossa tela permaneça visível por bastante tempo (mais de um minuto, digamos). Para isso, vamos querer incluir alguma animação adicional para garantir que não fique estagnada e continue atraindo a atenção das pessoas.
Para fazer isso, chamaremos a atenção para o elemento de texto Hidratação criando uma Animação de Objeto.
A aba Animações de Objeto é semelhante à aba Animações de Página, com algumas diferenças importantes:
Tempo da Animação
- Atraso - refere-se ao atraso entre cada animação. Isso inclui no início e em cada animação subsequente
- Atraso Final - Refere-se ao atraso dentro de cada animação.
Loop
- Indefinidamente - Repetir continuamente a animação até que o recurso seja alterado.
- Uma Vez - Reproduzir a animação uma vez ao carregar.
- Iterações - Permite especificar quantas vezes você gostaria que a animação se repetisse.
| NOTA para Usuários do Designer 1.0 Legado |
| Com a recente atualização do Designer 2.0, descontinuamos múltiplas animações de objeto em um único elemento. Se você tem 2-3 animações de objeto em um design 1.0, ele ainda pode ser editado no 2.0. Se excluído, no entanto, terá que ser adicionado novamente no 1.0. Uma vez que o Designer 1.0 seja descontinuado, você só poderá editar ou excluir essas animações. |
Digamos que queremos que o texto Hidratação salte de lado a lado, mas não muito rapidamente para não ser perturbador ou irritante.
Definiremos o Atraso para 3 segundos e depois definiremos o Atraso Final também para 3 segundos. Isso fará com que o salto permaneça parado por esse tempo. Por último, definiremos o Loop como Indefinidamente:
Agora, quando juntamos todas as nossas animações, obtemos um conjunto rápido e agradável de animações no início graças às nossas Animações de Página, seguido por um loop agradável depois graças à nossa Animação de Objeto. Isso pode ser testado com Reproduzir Tudo ou Visualizar:
| NOTA |
|
A fórmula para cada iteração de Animação de Objeto é a seguinte: Atraso + Duração da Animação + Atraso Final = 1 Iteração. |
Problemas Comuns com Animações
Agora, vamos abordar alguns problemas comuns que você pode encontrar ao tentar exibir suas animações em uma tela.
Pré-carregar Recursos em Playlist
Este recurso permite uma aparência mais suave ao carregar recursos antes de exibir na tela. Isso diminui a probabilidade de sua sinalização digital travar por um ou dois segundos enquanto os recursos são carregados.
OptiSigns pré-carregará seus recursos 6-8 segundos antes do recurso ser exibido na tela. Isso tem o efeito indesejado de potencialmente pular sua animação, que será exibida imediatamente ao carregar. Para corrigir isso, você pode:
- (Recomendado) Adicionar um atraso de 1-3 segundos nas suas animações para garantir que apareçam na tela quando este pré-carregamento estiver selecionado:
- Desativar Pré-carregar Recursos em Playlist. No entanto, isso mostrará uma tela em branco entre as transições.
Desempenho do Dispositivo
Executar muitas animações ao mesmo tempo afetará o desempenho do seu dispositivo e criará uma experiência de sinalização digital menos que ideal.
Em geral, o grau em que isso é sentido dependerá das capacidades de desempenho do seu dispositivo. Um dispositivo Roku, TV inteligente típica, Amazon FireStick ou outro dispositivo não projetado especificamente para sinalização digital provavelmente sofrerá problemas piores. Se estiver usando um desses dispositivos, recomendamos não mais que 1 ou 2 animações por recurso criado.
Em contraste, dispositivos Windows e Linux ou players OptiSigns podem lidar com cargas significativamente maiores. No entanto, se você notar travamentos ao usar um desses dispositivos, recomendamos limitar as animações a 3-4 animações por recurso criado.
É isso!
OptiSigns é líder em software de sinalização digital. Se você tiver dúvidas adicionais, preocupações ou qualquer feedback sobre OptiSigns, sinta-se à vontade para entrar em contato com nossa equipe de suporte em support@optisigns.com.