Depois de alguns anos redesenhando serviços digitais usando cores sólidas, designs mais refinados, enfim simplificando, aqui está o Google, e suas novas recomendações que mais uma vez quebram as regras da ergonomia e do design: "Material Design" (http://www.google.com/design/spec/material-design/introduction.html).
Se à primeira vista, as coisas não parecem fundamentalmente transformadas para o desenvolvedor Front-End, é principalmente nas animações e no significado que devemos dar a elas que devemos concentrar nossos esforços.
(http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-visual-continuity)
Produzir efeitos que permitem transições animadas para contar uma história aos visitantes por conta própria é baseado em um princípio: poder encadear animações em momentos-chave escolhidos pela equipe digital.
Há vários anos, navegadores modernos e seus respectivos mecanismos de renderização (geralmente baseados em Webkit) nos fornecem o elemento técnico necessário para essa conquista: acionar eventos.
E mais particularmente o evento transitionEnd que marca o fim de uma mudança de estado animada de um ou mais elementos.
Exemplo :
Digamos que queremos fazer um elemento aparecer e depois alongá-lo antes de finalmente torná-lo maior.
Se for configurada uma animação “clássica”, ou seja, uma mudança de estado, todas as mudanças ocorrerão ao mesmo tempo. O elemento aparecerá, então tomará altura e alongará em um único movimento. O evento TransitionEnd permite que você espere o fim da mudança de estado animada anterior antes de iniciar a próxima.
Podemos, portanto, pensar em termos de uma sucessão de estados, um cenário de transição.
:
1. As classes CSS são definidas
.initial-state-element-invisible { transição: todos facilitam 250ms; -transição do webkit: todos os 250ms de fácil saída; -moz-transição: todos os 250ms de saída fácil; -o-transição: todos os 250ms de saída fácil; opacidade: 0; altura: 100px; } .state-number-two-element-visible { opacidade: 1; } .state-number-three-highest-element { largura: 100px; altura: 300px; } .state-number-three-widest-element { largura: 300px; altura: 300px; }
2. Um pouco de JavaScript (JQuery) para escutar o trigger do evento e aplicar as novas propriedades CSS no momento certo.
$('.state-initial-element-invisible').click(function(){ $(this).addClass('state-number-two-element-visible'); $(this).one("transitionend webkittransitionEnd otransitionEnd MStransitionEnd", function(){ $(this).addClass('state-number-three-highest-element'); $(this).one("transitionend webkittransitionEnd otransitionEnd MStransitionEnd", function(){ $( this) .addClass('estado-número-três-elemento-maior'); }); }); });
Estado 1
Nosso elemento é invisível
Estado 2
Nosso elemento é visível
Estado3
Quando nosso elemento termina de aparecer, ele começa a ganhar altura…
Estado4
... então ele se deita.
em conclusão
Este exemplo simples, que atende às recomendações de intenção de animação, demonstra que é possível ajudar a entender a usabilidade de uma interface apenas por meio de suas animações usando o evento transitionEnd.
UX/UI ECO-DESIGN # Paris
SORRISO Paris
163 cais de Doctor Dervaux 92600 Asnières-sur-Seine
DESIGN THINKING: CRIANDO INOVAÇÃO # Bélgica
UX-REPUBLIC Bélgica
Avenida de Broqueville, 12 - 1150 Woluwe-Saint-Pierre
GERENCIANDO E MEDINDO UX # Paris
SORRISO Paris
163 cais de Doctor Dervaux 92600 Asnières-sur-Seine
DESIGN SPRINT: INICIAÇÃO E FACILITAÇÃO # Paris
SORRISO Paris
163 cais de Doctor Dervaux 92600 Asnières-sur-Seine
UX-DESIGN: OS FUNDAMENTOS # Bélgica
UX-REPUBLIC Bélgica
Avenida de Broqueville, 12 - 1150 Woluwe-Saint-Pierre
GERENCIADOR DE TAG DO GOOGLE # Paris
SORRISO Paris
163 cais de Doctor Dervaux 92600 Asnières-sur-Seine
GOOGLE ANALYTICS 4#Paris
SORRISO Paris
163 cais de Doctor Dervaux 92600 Asnières-sur-Seine
DESIGN UX/UI ACESSÍVEL # Bélgica
UX-REPUBLIC Bélgica
Avenida de Broqueville, 12 - 1150 Woluwe-Saint-Pierre
EXPERIÊNCIA DE MAPEAMENTO # Paris
SORRISO Paris
163 cais de Doctor Dervaux 92600 Asnières-sur-Seine