Animação de ícone

Animação de ícone
Hover
HoverAutomático
01
02
03
04
05
06
07
08
09
Transição
Duracao (MS)
500
Atraso (MS)
200
Suavização
ease-in-out

Pode diferir ligeiramente da interface real.

Previa de alteracoes
01
02
03
04
05
06
07
08
09

This setting applies to the animation

Recursos PRO:
As configurações do Animação de ícone 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
01
02
03

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 ícone se move. Pequenos movimentos que não interferem no texto principal são básicos. As opções incluem nenhum (Nenhum) e várias animações Hover Padrão.

Observação: O Animação de ícone só é ativado durante o Hover; quando combinado com o Animação de texto, é eficaz usar o Delay para retardar a operação, pois ela se torna ruidosa quando ambos se movem simultaneamente; se o ícone não estiver definido, essa configuração será desativada.

Controle exclusivo com o efeito NormalHover:** Se o Animação de ícone estiver ativado, a opacidade/visibilidade do ícone terá prioridade sobre o CSS no lado da animação. no Hover definido no painel Configurações de ícone as cores e as alterações de Tamanho do ícone e animação são aplicar ao mesmo tempo, mas o lado da animação é responsável pelo controle de exibição/ocultação.

Transição

Transição
Duracao (MS)
500
Atraso (MS)
200
Suavização
ease-in-out

Pode diferir ligeiramente da interface real.

Ponto:
Define a velocidade de comutação do Animação de ícone. Esse item é usado para reduzir o desempenho excessivo e, ao mesmo tempo, manter uma sensação de capacidade de resposta.

O que essa configuração altera: Quanto menor for o ícone, mais rápida será a sensação de naturalidade da configuração.

Dica de ajuste:
Recomenda-se começar com uma configuração curta e, em seguida, usar o Delay para adicionar um leve sabor residual, se necessário.

Itens de configuração.

  • Duration (ms): Duração da operação do ícone. Quanto menor a duração, mais leve e quanto maior a duração, mais forte é a sensação de decoração.
  • Delay (ms): Tempo de atraso no início do movimento. Basicamente, mantenha-o curto para evitar atrasos de reação.
  • Easing: Curva de velocidade. Usada para fazer com que a textura do movimento pareça natural.
  • Custom Value: valor easing personalizado. Ajuste fino se o valor padrão não for adequado.
  • **Reiniciar: AlterarTransição define o valor padrão.

Nota: Transição em Animação de ícone é uma configuração diferente de Transição (para cor, Tamanho do ícone e Posição) no painel Configurações de ícone. A velocidade de reprodução da própria animação é controlada aqui e as alterações de propriedade em Hover são controladas por Transição no lado Configurações de ícone.