Como animar com a biblioteca Mo.JS

O Mo.JS é uma biblioteca de JavaScript Graphics de Motion Graphics que não apenas facilita as carregadeiras de animação de página de tela inteira, mas também click-to-animate micro-interações e toneladas de manipulações de forma.

Se você esteve seguindo a cena do web design por um tempo agora, é provável que você tenha se deparado - ou talvez interagir com - uma ampla variedade de técnicas de animação e bibliotecas. Tecnologias principais, como CSS, HTML5 e JavaScript, estão se tornando ainda mais poderosos, e o suporte do navegador está melhorando com o tempo. A implicação é que animações da Web mais sofisticadas podem ser suportadas entre os dispositivos. Lembre-se, se você está construindo um site complexo, seu hospedagem na web. O serviço deve ser capaz de suportar seu projeto.

Precisa de alguma inspiração de animação? Aqui estão alguns exemplos incríveis de topo Animação CSS. para recriar. Quer construir um site sem codificar? Tente esse construtores de site .

Como o Mo.Js pode ajudar?

Animação da Web, como aparece, está aqui para ficar. No entanto, uma falha com técnicas de animação mais populares é que eles são gravitados para animar elementos de interface do usuário / ux convencionais, como apresentações de slides, botões guancados e menus suspensos. Como resultado, usá-los pode eventualmente tornar seu site muito familiar e não emocionante.

Mo.js pode ajudar com isso. Usar a biblioteca ajuda a animar os elementos do site não tão comuns, utilizando seus componentes internos, como HTML, forma, redemoinho, explosão e escalada. A biblioteca é muito fácil de usar, rápido, retina pronta, fonte modular e aberta. Neste tutorial, os fundamentos de trabalhar com Mo.Js são introduzidos e duas técnicas demonstradas; explosão e bolha.

01. Comece

Comece criando uma pasta, Mo.Js, na sua área de trabalho para armazenar os arquivos tutoriais. Crie três pastas adicionais dentro dele: CSS para armazenar os arquivos de estilo, IMG para imagens e JS para os arquivos JavaScript. Os arquivos HTML serão armazenados na pasta raiz. (Você pode querer considerar o backup com armazenamento na núvem ).

02. Criar estrutura de página

Abra seu editor de código e crie um documento index.html para conter marcar para a página da Web principal. Comece a criar a estrutura básica e dar um título adequado à página.

 & lt; DOCTYPE HTML & GT;
& lt; html lang = "en" & gt;
    & lt; head & gt;
        & lt; meta charset = "utf-8" & gt;
        & lt; title & gt; blast técnica & lt;
TÍTULO & GT;
 & lt; / head & gt;
& lt; corpo e gt; & lt; / corpo & gt;
& lt; / html & gt; 

03. Estrutura da página

O tutorial é dividido em duas partes; O primeiro demonstra a técnica de explosão, enquanto o segundo ilustra o conceito de bolha. Como resultado, preparamos dois arquivos HTML, um para cada técnica. Para iniciar a técnica da explosão, crie uma seção div Para conter o título da página. Renda a página no seu navegador, onde você deve observar o texto un-estilo no canto superior esquerdo.

 & lt; corpo e gt;
      & lt; div classe = "texto" & gt;
& lt; p & gt; Mo.JS Animation & Lt; / P & GT;
     & lt; / div & gt;
& lt; / corpo & gt;

04. Link o CSS

Abra seu editor de código e crie estilos.css arquivo dentro da pasta CSS. Crie um link para este arquivo em seu documento HTML adicionando este código na seção da cabeça, & lt; link rel = "Stylesheet" href = "css / styles.css" & gt; . Como não foram adicionados estilos, a página torna ilustrada na etapa 3. Alternativamente, já que o estilo é mínimo, você pode optar por usar o estilo Inline combinando o HTML e o CSS.

05. Estilo o fundo

Em seguida, nós estilamos o fundo adicionando uma imagem de fundo. Nós usamos o fundo de paisagem cênica livre por Nikolai Ultang de Pexels. Você pode Baixe aqui . Salve esta (ou sua própria imagem) dentro da pasta IMG. Renda a página para mostrar mudanças no fundo.

 corpo, html {
  Background-Image: URL (BG.JPG);
  Fundo de tamanho: capa;
  preenchimento: 0;
  Margem: 0;
  Largura: 100%;
  Altura: 100%;
  estouro: oculto;
}

06. Estilo o texto

O texto é então estilizado para renderizar no centro da página, como atualmente aparece no canto superior esquerdo. Observe que, para centralizar o texto, selecionamos uma posição absoluta e definimos seu posicionamento exato usando as margens superior, esquerda e direita. O texto também é transformado usando a propriedade Text-Transform. A propriedade Text-Align também é definida como centro.

 texto {
  Fonte-família: século gótico, sans-serif;
  cor: #fff;
  Text-Transform: maiúsculas;
  Tamanho da fonte: 50px;
  Peso de fonte: mais ousado;
  Posição: Absoluto;
  top: 50px;
 Esquerda: 25%;
 direito: 30%;
  Alinhamento de texto: centro;
     }

07. Instale o Mo.Js.

Como com outras bibliotecas, o MO.JS é instalado através de várias opções. A abordagem mais simples, que empregamos, está acessando-a diretamente de um servidor CDN. Adicione o seguinte código na seção do corpo.

 & lt; script src = '//cdn.jsdelivr.net
mojs / 0.265.6 / mo.min.js '& gt; & lt; / script & gt; 

Caso você esteja desenvolvendo linha FF, a biblioteca pode ser baixado diretamente do github e instalado usando os pacotes do Bower ou NPM usando os comandos apropriados.

 Bower instalar mo-js
NPM instalar mo-js

Uma vez baixado, ele pode ser referenciado diretamente.

 & lt; script src = "mo.js" tipo = "texto
javascript "& gt; & lt; / script & gt;

Finalmente, crie um novo arquivo Script.js e salve-o na pasta JS. Adicionaremos a funcionalidade JavaScript a este arquivo. Ligá-lo na seção do corpo da seguinte forma. Coloque-o abaixo do título de texto como mostrado abaixo.

 & lt; corpo e gt;
& lt; div classe = "texto" & gt;
& lt; p & gt; Mo.JS Animation & Lt; / P & GT;
& lt; / div & gt;
   & lt; script src = 'https: //cdn.jsdelivr
net / mojs / 0.265.6 / mo.min.js '& gt; / lt; / script & gt;
  & lt; script src = "js / script.js" & gt; & lt;
Script & GT;
& lt; / corpo & gt;

08. Crie a primeira explosão

Antes de prosseguir para desenvolver o código, é sensato destacar o que estamos criando. Explosão algo simplesmente significa quebrá-lo em pedaços menores de uma maneira explosiva. Vamos criar um objeto simples (círculo) e configurará a pesquisa que quando um usuário clica, ele se separa de uma maneira explosiva.

09. Crie o objeto do círculo

Primeiro, o objeto a ser explodido é criado (círculo). No entanto, Mo.JS suporta outras formas, incluindo retângulo (retra), cruz, igual, ziguezague e polígono. Onde você não especifica o tipo de forma, ele será padrão para um círculo. Para criar um círculo simples, declará-lo usando o Var ou Const e atribuir seus atributos chamando a função de forma.

 // criando um objeto simples
Const circir = novo mojs.shape ({
  isShowstart: verdadeiro,
             raio: 100,
});

O código cria o objeto padrão do círculo com o raio dado. A variável ISShowStart é atribuída a um valor booleano para especificar se você precisa mostrar o objeto ou não. Renda o código para exibir um pequeno círculo magenta-colorido no centro da página.

10. Anime o círculo

O snippet de código especifica que a escala e a opacidade mudarão de 1 a 0, indicando que o objeto desaparece. ADuração e atraso da animação também são definidos. Note que a animação não é reproduzida, já que ainda estamos a inicializá-la. Para fazer isso, adicione a função abaixo.

 documento.addeventlistener ('clique', função
(e) {
Circular.
 Replay ();
}); 

11. Faça explodindo polígonos

Agora que o círculo está animando, criamos uma animação de explosão que torna ao mesmo tempo. A primeira explosão usa as formas de polígono para extrair a explosão. Para criar uma explosão, use a função Mo.JS Burst conforme mostrado no snippet de código abaixo.

 constrst1 = new mojs.burst ({
  Esquerda: 0, top: 0,
  Contagem: 7,
  raio: {50: 250},
  crianças: {
    Preencha: 'Branco',
    forma: 'polígono',
    acidente vascular cerebral: {'branco': '# a50710'},
    CursoWidth: 4,
    raio: 'Rand (30, 60)',
    radiusy: 0,
    escala: {1: 0},
    pathscale: 'Rand (0,5, 1)',
    Grau: 360,
    ISFORCE3D: TRUE}});

O código atribui sete formas de polígono à explosão e especifica dois RADII. O primeiro refere-se à animação geral, enquanto o segundo concentra-se nos objetos específicos do polígono dentro da animação. Certifique-se de adicionar a explosão à função do ouvinte de eventos para que ela responda a cliques do mouse. Observe que dois novos parâmetros foram adicionados; a melodia e gerar. A Sintonizada faz a explosão para renderizar em qualquer lugar da página, enquanto a geração inicializa a animação de burst. Renderize a página. Observe os elementos explodindo que aparecem ao mesmo tempo que o círculo.

 documento.addeventlistener ('clique', função
(e) {
             Burst1.
  sintonia ({x: e.pagex, y: e.pagey}).
  gerar ().
 Replay ();
Circular.
 Replay ();
});

12. Crie a segunda explosão

Em seguida, criamos a segunda explosão usando diferentes opções de forma. O código segue a estrutura da explosão anterior e apenas altera alguns parâmetros.

 constrst2 = novo mojs.burst ({
  top: 0, esquerda: 0,
  Contagem: 4,
  raio: {0: 250},
crianças: {
    forma: ['círculo', 'rect'],
    Pontos: 5,
    Preencha: ['branco'],
    raio: 'Rand (30, 60)',
    Atraso: 'Stagger (50)',
    Facilitando: ['Cubic.Out', 'Cubic.Out',
'Cubic.Out'],
    Escala: {1: 0},
    pathscale: 'Rand (0,5, 1)',
    ISFORCE3D: TRUE}});

Adicione a explosão à função do ouvinte de eventos.

 documento.addeventlistener ('clique', função
(e) {
             Burst1.
  sintonia ({x: e.pagex, y: e.pagey}).
  gerar ().
 Replay ();
             Burst2.
             sintonizar ({x: e.pagex, y: e.pagey
}).
             gerar().
             Replay ();
Circular.
 Replay ();
});

13. Adicionar explosões do círculo

Para melhorar ainda mais a animação, adicionamos explosões circulares. Examinar o Código nas etapas 11 e 12 revela muitas semelhanças existentes entre os dois tipos de rajadas. Ao criar a terceira explosão, evitamos reescrever muito código usando o operador de propagação que é escrito como três pontos (...). No entanto, primeiro, declaramos uma variável que contém os recursos semelhantes que queremos reutilizar. Depois disso, os outros dois círculos podem ser criados simplesmente usando o operador de propagação.

 // Criando a variável com
parâmetros.
    const círculo_opts = {
  Esquerda: 0, top: 0,
   Preencha: 'Branco',
  escala: {.2: 1},
  opacidade: {1: 0},
  ISFORCE3D: TRUE,
  IsShowend: Falso
};

O código especifica o tipo de preenchimento, escala, opacidade e se deve exibi-los no final da animação. As duas animações do círculo são criadas da seguinte forma.

 const círculo1 = novo mojs.shape ({
  ... Circle_opts,
  raio: 200});
const círculo2 = novo mojs.shape ({
  ... Circle_opts,
  raio: 240,
  Facilitando: 'Cubic.Out',
  Atraso: 300});

Adicione as formas circulares.

 documento.addeventlistener ('clique', função
(e) {
             Burst1.
  sintonia ({x: e.pagex, y: e.pagey}).
  gerar ().
 Replay ();
             Burst2.
             sintonizar ({x: e.pagex, y: e.pagey
}).
             gerar().
             Replay ();
Circular.
 Replay ();
});

14. Renderize uma bolha básica

Ao contrário da animação da explosão, que quebra o objeto em pedaços menores, a animação de bolha, por outro lado, traduz o objeto clicado em um espaço maior. O conceito adota a analogia de explodir um balão onde o objeto expande continuamente em tamanho. Para fazer isso, simplesmente criamos um novo openbackground de variável e atribuídos atributos que farão todo o fundo alcançar uma cor semelhante ao objeto. Como resultado, isso cria a nuance de borbulhar.

 const opelebackground = novo mojs.shape ({
  Preencha: '# fc2d79',
  Esquerda: 0, top: 0,
  escala: {0: 4,5},
  isShowstart: verdadeiro,
  raio: 15,
  ISFORCE3D: TRUE,
  istimeliness: verdade,
Atraso: 150,
  raio: 200,
  Facilitando: 'Cubic.Out',
  atrasado: 'expo.in',});

Certifique-se de adicionar a variável de fundo à função do ouvinte de eventos.

 openbackground.
  sintonia ({x: e.pagex, y: e.pagey}).
  Replay (); 

15. Adicione várias formas

Seguindo o conceito na etapa 14, agora avançamos o exemplo para incluir vários objetos circulares coloridos, que clicando em expandir de maneira semelhante e exibir algum texto. Edite o arquivo HTML existente e copie o código dentro do corpo. Cria a estrutura básica da página.

16. Adicione bibliotecas auxiliares

Em seguida, algumas bibliotecas adicionais são adicionadas na seção do corpo para facilitar a rolagem e produzir sons quando os objetos são clicados.

& lt; script src = 'https: //cdnjs.cloudflare.com
Ajax / libs / Howler / 1.1.26 / Howler.min.js '& gt; & lt;
Script & GT;
& lt; script src = 'https: //cdn.jsdelivr.net
mojs / 0.119.0 / mo.min.js '& gt; & lt; / script & gt;
& lt; script src = 'https: //cdn.jsdelivr.net
hammerjs / 2.0.4 / hammer.min.js '& gt; / lt; / script & gt;
& lt; script src = 'https: //cdnjs.cloudflare.com
Ajax / libs / iscroll / 5.1.1 / iscroll-probe.min
js '& gt;
& lt; / script & gt;

17. Avance a animação

Em seguida, adicionamos estilos para as classes individuais destacadas nos arquivos HTML. A funcionalidade Mo.JS é então adicionada. O código completo (CSS e JS) é compartilhado com os arquivos tutoriais para revisão.

18. Saiba mais sobre Mo.Js

Enquanto o tutorial demonstra as técnicas de bolha e explosão, há mais recursos disponíveis on-line que podem ajudá-lo a rastrear rapidamente seu processo de aprendizado. Algumas delas incluem Tutoriais de Mo.Js no GitHub e demos também no github .

Este artigo foi originalmente publicado em questão 291 da revista Creative Web Design Web designer . Comprar edição 291. .

Consulte Mais informação:

• CSS Art fica brilhantemente arruinado por navegadores antigos
• Melhores peças de teste de teste de usuário
• Grandes projetos de interface do usuário