Animação de texto

Animação de texto
Hover
HoverAutomático
Leia mais
01
Leia mais
02
Leia mais
03
Leia mais
04
Leia mais
05
Leia mais
06
Leia mais
07
Leia mais
08
Leia mais
09
Leia mais
10
Transição
Duracao (MS)
300
Atraso (MS)
0
Suavização
ease-out

Pode diferir ligeiramente da interface real.

Previa de alteracoes
01Troca simples
02Deslizamento vertical (padrao)
03Deslizamento vertical (com atraso)
04Deslizamento horizontal (da esquerda para a direita)
05Escala + fade
06Apenas fade
07Onda vertical
08Desfoque + fade
09Leve flutuacao
10Amplia e sobe

This setting applies to the animation

Recursos PRO:
As configurações do Animação de texto são um recurso disponível na versão paga (ZenBlocks PRO); esse painel não está disponível para a versao gratuita.

Hover

Hover
HoverAutomático
Leia mais
01
Leia mais
02
Leia mais
03
Leia mais
04

Pode diferir ligeiramente da interface real.

Ponto:
Selecione a animação para ser aplicar quando Hover. Essa configuração cria um feedback reativo para o usuário.

O que muda com essa configuração:
A alteração facilita o reconhecimento como um elemento "operável".

Dica de ajuste:
É prático escolher animações com curta duração e pequenas alterações, desde que elas não reduzam a legibilidade.

Itens de configuração.

  • Animação Predefinição Select: seleciona como o Texto se move. Tente em uma direção modesta, dando prioridade à legibilidade. As opções incluem nenhum (Nenhum) e várias animações Hover Padrão.

Nota: O Animação de texto só é ativado durante o Hover. Recomenda-se configurações de curta duração, pois há casos em que o Texto perde temporariamente a legibilidade durante a animação; quando o Configurações de estilo é usado em conjunto com o Transição, a duração/atraso de ambos pode ser somada a um atraso experimental. Observe o exibição no painel Configurações de estilo do Transição quando a animação estiver ativada. Limite de 30 caracteres: O Animação de texto é internamente incluído em um caractere de cada vez em “ e um atraso é aplicado a cada caractere. Esse processo de atraso só gerará no máximo 30 caracteres; após o 31º caractere, o Texto não terá um atraso de animação aplicar e funcionará de uma só vez. Otimização do empacotamento de caracteres:** Se Animação de texto for "nenhum", o empacotamento de cada caractere "" será omitido para otimizar o desempenho. O envolvimento é semelhante ao Automático aplicar quando a animação está ativada.

Transição

Transição
Duracao (MS)
300
Atraso (MS)
0
Suavização
ease-out

Pode diferir ligeiramente da interface real.

Ponto:
Define a velocidade de comutação do Animação de texto. Controla o movimento enquanto mantém a legibilidade do texto.

O que muda com essa configuração:
A mesma animação pode dar uma impressão muito diferente dependendo da configuração de tempo.

Dica de ajuste:
Se o texto ficar difícil de ler durante a transição, é eficaz ajustar a redução da Duração e a redução do Atraso.

Itens de configuração.

  • Duration (ms): tempo de reprodução da animação. Durações mais curtas tornam a resposta mais leve, enquanto durações mais longas dão uma sensação mais encenada.
  • Delay (ms): Tempo de espera após o Hover até que a animação comece a se mover. Atrasos desnecessários reduzem a sensação de operação.
  • Easing: Mudança de velocidade Padrão.
  • Custom Value: Insira seu próprio valor Suavização e ajuste o movimento para corresponder ao tom Marcas.
  • **Reset: retorna a configuração do Transição ao seu estado inicial.

Nota: O Transição no Animação de texto opera independentemente do Transição no Configurações de estilo e do Transição no Animação de ícone. A duração/atraso de cada um pode ser ajustada individualmente, de modo que diferentes temporizações podem ser produzidas com o Texto e o ícone.