Como criar animações e transições com o Motion UI
Animações e transições permitem que os designers visualizem a mudança e diferenciem o conteúdo. Animações e transições são efeitos em movimento que ajudar os usuários a reconhecer quando algo muda no site, por exemplo, eles clicam em um botão e uma nova informação aparece na tela. Adicionar movimento a aplicativos e sites melhora a experiência do usuário, pois permite que os usuários faça sentido de conteúdo de uma forma mais intuitiva.
Podemos criar animações e transições do zero ou usando bibliotecas ou frameworks. Uma boa notícia para nós, pessoal do frontend, é que Zurb, o criador da Foundation, em outubro passado, o Motion UI de código aberto, sua biblioteca de animação e transição baseada no Sass.
Originalmente, era fornecido com o Foundation for Apps, e agora, para o lançamento independente, foi reformulado, incluindo um sistema de enfileiramento de animação e padrões CSS flexíveis. O Motion UI também alimenta alguns componentes da estrutura Foundation, como o controle deslizante Orbit, o alternador Toggler e o modal Reveal, por isso é uma ferramenta bastante robusta.
Começando
Embora o Motion UI seja uma biblioteca Sass, você não precisa necessariamente usá-lo com o Sass, já que o Zurb fornece aos desenvolvedores um prático kit inicial que contém apenas o CSS compilado. Você pode baixá-lo da página inicial do Motion UI e começar rapidamente a prototipar usando as classes de transição e animação CSS predefinidas.
O kit inicial não contém apenas o Motion UI, mas também o framework Foundation, o que significa que você pode usar a grade Foundation e todas as outras funcionalidades do Foundation for Sites se quiser.
O kit inicial também é enviado com index.html arquivo que permite testar rapidamente a estrutura.
Se você precisar de ajustes mais sofisticados e quiser aproveitar os poderosos mixins Sass do Motion UI, você pode instalar a versão completa contendo a fonte .scss arquivos com npm ou Bower.
A documentação do Motion UI está atualmente incompleta ainda. Você pode encontrá-lo aqui no Github ou contribuir para ele se quiser.
Prototipagem Rápida
Para iniciar o protótipo, você pode editar o index.html arquivo do kit inicial ou crie seu próprio arquivo HTML. Você pode criar o layout usando a grade Foundation, mas o Motion UI também pode ser usado como uma biblioteca independente sem a estrutura Foundation.
Existem 3 tipos principais de classes CSS predefinidas na interface do usuário do Motion:
- Classes de transição - possibilitam adicionar transições, como efeitos de deslizamento, desbotamento e articulação a um elemento HTML.
- Classes de Animação - permitem que você use diferentes efeitos de tremor, oscilação e rotação
- Modifier Classes - trabalhe em conjunto com as classes de transição e de animação, e elas permitem ajustar a velocidade, o tempo e o atraso de um movimento.
Construindo o HTML
A melhor coisa sobre as classes CSS predefinidas é que elas não podem ser usadas apenas como classes, mas também como outros atributos HTML. Por exemplo, você pode adicioná-los ao valor atributo do tag, ou você pode usá-los em seu próprio costume dados-* atributo também.
No trecho de código abaixo eu escolhi esta última opção para comportamento separado e classes modificadoras. Eu usei o lento e facilidade atributos do modificador como classes e criou um animação de dados atributo para o escala-em-up transição. o Clique em mim botão destina-se a acionar o efeito.
Jogando animações e transições com jQuery
O Motion UI inclui também uma pequena biblioteca JavaScript que pode reproduzir transições e animações quando um determinado evento acontece.
A biblioteca em si pode ser encontrada no kit inicial do movimento-ui-iniciante> js> vendor> motion-ui.js caminho.
Cria uma MotionUI objeto que possui dois métodos: animateIn () e animateOut (). A transição ou animação vinculada ao elemento HTML específico (o
$ (function () $ (". button"). clique (function () var $ animação = $ ("# boom"). data ("animação"); MotionUI.animateIn ($ ("# boom") , $ animação););); No snippet de código acima, acessamos o animação de dados atributo usando built-in do jQuery dados() método, então chamado de animateIn () método do MotionUI objeto.
Aqui está o código completo e o resultado. Eu usei classes de botões internos do framework Foundation para o Clique em mim botão, e acrescentou algumas CSS básicas bem.
Como o Motion UI é bastante flexível, você também pode adicionar e acionar transições e animações de muitas outras maneiras.
Por exemplo, no exemplo acima, não precisamos necessariamente usar o animação de dados atributo personalizado, mas pode simplesmente adicionar a classe de comportamento com o addClass () método jQuery para o
$ ('# boom'). addClass ('scale-in-up'); Personalização com Sass
As classes CSS pré-fabricadas do Motion UI usam valores padrão que podem ser facilmente personalizados com a ajuda do Sass. Há um Sass mixin por trás de cada transição e animação, o que torna possível alterar as configurações do efeito. Dessa forma, você pode criar facilmente uma animação ou transição totalmente personalizada.
Personalização não funciona com o kit inicial, você precisa instalar a versão Sass se quiser configurar os efeitos de acordo com suas próprias necessidades.
Para personalizar uma transição ou animação, primeiro você precisa encontrar o mixin relacionado. o _classes.scss arquivo contém os nomes das classes CSS compiladas com os respectivos mixins.
Em nosso exemplo, usamos o .escala-em-up atributo, e dando uma olhada _classes.scss, podemos descobrir rapidamente que faz uso do mui-zoom mixin:
// Transitions @mixin motion-ui-transições … // Scale .scale-in-up @include mui-zoom (em, 0,5, 1); …
A interface do usuário do Motion usa mui- prefixo para mixins, e cada mixin tem seu próprio arquivo. O Motion UI tem convenções de nomenclatura bastante auto-explicativas, para que possamos encontrar rapidamente mui-zoom mixin no _zoom.scss Arquivo:
@mixin mui-zoom ($ state: in, $ from: 1.5, $ para: 1, $ fade: map-get ($ motion-ui-settings, escala-e-fade), $ duration: null, $ timing: null, $ delay: null) …
Usando a mesma técnica, você pode controlar facilmente todos os recursos de uma animação ou transição alterando os valores das respectivas variáveis Sass.
Configurando Classes Modificadoras
As classes modificadoras que controlam o comportamento (velocidade, tempo e atraso) de animações e transições também são configuráveis com o Sass, modificando os valores das respectivas variáveis no _settings.scss Arquivo.
Depois de fazer suas alterações, o Motion UI use os novos valores como padrão em todas as animações e transições, assim você não terá que configurar os mixins relacionados um por um.
