Como fazer belas animações codificadas para a Web com o Mo.JS

Se você está procurando comece seu próprio site , belas animações podem fazê-lo brilhar. Existem várias maneiras de fazer isso, desde simplesmente fazendo um GIF animado de um pedaço de filme existente, para aprender a fazer o seu próprio a partir do zero com software como Liquidificador ou Maia .

Também existem bibliotecas disponíveis para criar animações de forma programática. Historicamente, os codificadores da web usaram jQuery para criar animações simples, mas conforme a web se desenvolveu e HTML5 tornou-se o novo padrão, novas opções surgiram. Bibliotecas CSS para animação tornaram-se incrivelmente poderosas sob a nova estrutura, junto com bibliotecas JavaScript projetadas especificamente para animação vetorial no navegador.

---

---

Hoje estaremos olhando para mo.js, uma das crianças mais novas no bloco para a criação de belas imagens de código. Cobriremos algumas funções básicas, antes de criar uma série de animação reativa do usuário que cria belos padrões.

Digite Mo.js

Mo.js é uma biblioteca para criar gráficos animados para a web com facilidade. Ele é projetado para tornar a criação de coisas bonitas simples para aqueles que não são muito conhecedores de código, enquanto permite que programadores veteranos descubram um lado artístico que eles nunca sabiam que tinham. Como o próprio nome sugere, é baseado na popular linguagem de programação JavaScript, embora seja implementado de forma que qualquer pessoa possa aprender o básico facilmente.

Antes de prosseguirmos, vamos dar uma olhada no que vamos criar hoje:

Estaremos usando CodePen para o projeto de hoje, pois nos permite trabalhar em tudo na mesma janela do navegador. Se preferir, você pode trabalhar em um editor de sua escolha em vez de. Se você quiser pular o tutorial passo a passo, o código completo está disponível aqui.

Configure uma nova Caneta e você será saudado com esta tela:

---

---

Antes de começarmos, você precisará fazer algumas alterações. Clique no Definições ícone no canto superior direito e navegue até o JavaScript aba.

Vamos usar Babel como nosso pré-processador de código, então selecione-o no menu suspenso. O Babel torna o JavaScript um pouco mais fácil de entender, além de fornecer ECMAScript 6 suporte para navegadores mais antigos. Se você não sabe o que isso significa, não se preocupe , só vai tornar nossas vidas um pouco mais fáceis aqui.

---

---

Também precisamos importar a biblioteca mo.js para o projeto. Faça isso procurando por mo.js no Adicionar Scripts / Canetas Externas prompt de texto e selecionando-o.

Com essas duas coisas no lugar, clique Salvar e fechar . Estamos prontos para começar!

Formas básicas com Mo.js

Antes de começarmos com os gráficos, vamos fazer algo sobre o fundo branco ofuscante no painel de visualização. Altere a propriedade da cor de fundo, escrevendo este código no CSS pão.

body{
background: rgba(11,11,11,1);
}

Criar uma forma é um processo simples e o conceito por trás disso direciona toda a biblioteca. Vamos configurar uma forma de círculo padrão. Insira este código no JS pão:

const redCirc = new mojs.Shape({
isShowStart:true
});

Aqui, criamos um const valor com o nome redCirc e atribuiu-o a um new mojs.Shape . Se você é totalmente novo na programação, preste atenção à ordem dos colchetes aqui, e não se esqueça do ponto-e-vírgula no final!

Até agora, não passamos parâmetros, exceto isShowStart: true , o que significa que aparecerá na tela antes mesmo de atribuirmos qualquer movimento. Você verá que ele colocou um círculo rosa no centro da tela:

Este círculo é o padrão Forma para mo.js. Podemos alterar essa forma facilmente adicionando uma linha ao nosso código:

const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});

Para adicionar mais propriedades a um objeto, usamos uma vírgula para separá-lo. Aqui, adicionamos um forma propriedade, e defini-la como um 'rect' . Salve sua caneta e você verá que a forma padrão muda para um quadrado.

Este processo de transferência de valores para o Forma objeto é como nós os personalizamos. No momento, temos um quadrado que não faz muita coisa. Vamos tentar animar algo.

Noções básicas de movimento

Para obter algo que pareça um pouco mais impressionante, vamos criar um círculo, com um traço vermelho ao redor e sem preenchimento dentro.

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});

Como você pode ver, também atribuímos um largura valor para o traço, e um raio para o círculo. As coisas já estão começando a ficar um pouco diferentes. Se sua forma não estiver sendo atualizada, certifique-se de não ter perdido nenhuma vírgula ou aspas simples 'internet' ou 'Nenhum' e certifique-se de ter clicado Salve  no topo da página.

Vamos adicionar uma animação a isso. No exemplo acima, esse círculo vermelho aparece onde o usuário clica, antes de desaparecer gradualmente. Uma maneira de fazer isso acontecer é alterando o raio e a opacidade ao longo do tempo. Vamos modificar o código:

radius: {15:30},
opacity: {1:0},
duration:1000

Mudando o raio propriedade, e adicionando opacidade e duração propriedades, demos as instruções de forma para realizar ao longo do tempo. Estes são Delta objetos, contendo informações de início e fim para essas propriedades.

Você vai notar que nada está acontecendo ainda. Isso ocorre porque não adicionamos o .Toque() função para instruí-lo a seguir nossas instruções. Adicione-o entre os colchetes finais e o ponto-e-vírgula, e você verá seu círculo ganhar vida.

Agora estamos chegando a algum lugar, mas para torná-lo realmente especial, vamos examinar mais algumas possibilidades em profundidade.

Pedidos e facilitação com Mo.js

Agora, assim que o círculo aparece, ele começa a desaparecer. Isso funcionará perfeitamente bem, mas seria bom ter um pouco mais de controle.

Podemos fazer isso com o .então() função. Em vez de mudar o raio ou a opacidade, vamos fazer nossa forma ficar onde começa, antes de mudar depois de um determinado período de tempo.

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();

Agora, nossa forma aparecerá com os valores que atribuímos, espere 1000 ms, antes de realizar qualquer coisa que colocamos no .então() função. Vamos adicionar algumas instruções entre os colchetes:

//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500

Este código apresenta outra parte importante da animação. Onde instruímos o escala para mudar de 1 para 2, também atribuímos atenuação baseada em onda senoidal com sin.in . Mo.js tem uma variedade de curvas de atenuação integradas, com a capacidade de usuários avançados adicionarem as suas próprias. Nesse caso, a escala ao longo do tempo acontece de acordo com uma onda sinusoidal curvando-se para cima.

Para um resumo visual de curvas diferentes, confira easings.net . Combine isso com o largura do traçado mudando para 0 ao longo de nossa duração definida, e você tem um efeito de desaparecimento muito mais dinâmico.

As formas são a base de tudo no Mo.js, mas são apenas o começo da história. Vamos olhar para Explosões .

Cheio de potencial em Mo.js

PARA Explodido em Mo.js é uma coleção de formas que emanam de um ponto central. Faremos disso a base de nossa animação finalizada. Você pode chamar um burst padrão da mesma forma que faz com uma forma. Vamos fazer algumas faíscas:

const sparks = new mojs.Burst({
}).play();

Você pode ver, apenas adicionando um vazio Explodido objeto e dizendo-lhe para jogar, obtemos o efeito burst padrão. Podemos afetar o tamanho e a rotação do burst animando seu raio e ângulo propriedades:

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();

Já adicionamos um raio e rotação personalizados ao nosso burst:

Para torná-los mais parecidos com faíscas, vamos mudar as formas que a explosão usa e quantas formas a explosão gera. Você faz isso abordando as propriedades dos filhos do burst.

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
count:50,
children:{
shape: 'cross',
stroke: 'white',
points: 12,
radius:10,
fill:'none',
angle:{0:360},
duration:300
}
}).play();

Você notará que as propriedades filho são iguais às propriedades de forma com as quais já trabalhamos. Desta vez, escolhemos uma cruz como forma. Todas as 50 formas agora possuem as mesmas propriedades. Está começando a ficar muito bom! Esta é a primeira coisa que o usuário verá ao clicar com o mouse.

Já podemos ver que o traço vermelho de nossa inicial redCirc forma está ficando muito tempo. Tente alterar sua duração para que as duas animações se encaixem. Deve ficar parecido com isto:

Estamos longe de terminar nossa animação, mas vamos tomar um momento para torná-la reativa ao usuário.

O evento principal

Estaremos usando um manipulador de eventos para acionar nossas animações na posição em que o usuário clicar. No final do seu bloco de código, adicione este:

document.addEventListener( 'click', function(e) {
});

Este trecho de código escuta os cliques do mouse e executa todas as instruções entre colchetes para nós. Podemos adicionar nosso redCirc e faíscas objetos para este ouvinte.

document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});

As duas funções que chamamos aqui são .afinação() e .replay () . A função de reprodução é semelhante à função de reprodução, embora especifique que a animação deve começar novamente desde o início sempre que for clicada.

o afinação função passa valores para o nosso objeto para que você possa alterar as coisas quando for disparada. Neste caso, estamos passando as coordenadas da página onde o mouse foi clicado e atribuindo as posições xey de nossa animação de acordo. Salve seu código e tente clicar na tela. Você notará alguns problemas.

Em primeiro lugar, nossa animação inicial ainda aparece no meio da tela, mesmo que o usuário não clique em nada. Em segundo lugar, a animação não é disparada no ponto do mouse, mas deslocada para baixo e para a direita. Podemos consertar essas duas coisas facilmente.

Nossa forma e explosão têm o .Toque() no final de seus respectivos blocos de código. Nós não precisamos mais disso como .replay () está sendo chamado no manipulador de eventos. Você pode remover .play () de ambos os blocos de código. Pelo mesmo motivo, você pode remover isShowStart: true também, já que não precisamos mais que ele apareça no início.

Para corrigir o problema de posicionamento, precisaremos definir valores de posição para nossos objetos. Como você se lembrará da nossa primeira forma, o mo.js os coloca no centro da página por padrão. Quando esses valores são combinados com a posição do mouse, ele cria o deslocamento. Para se livrar desse deslocamento, basta adicionar essas linhas aos redCirc e faíscas objetos:

left: 0,
top: 0,

Agora, os únicos valores de posição que nossos objetos assumem são os valores de posição do mouse transmitidos pelo ouvinte de evento. Agora as coisas devem funcionar muito melhor.

Este processo de adicionar objetos ao manipulador de eventos é como iremos acionar todas as nossas animações, então lembre-se de adicionar todos os novos objetos a partir de agora! Agora que temos o básico funcionando como queremos, vamos adicionar alguns bursts maiores e mais brilhantes.

Ficando psicodélico

Vamos começar com alguns triângulos giratórios. A ideia aqui era criar um efeito estroboscópico hipnótico, e configurar isso é realmente muito fácil. Adicione outro burst com estes parâmetros:

const triangles = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {1080 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
points: 3,
radius: { 10 : 100 },
fill: ['red','yellow','blue','green'],
duration: 3000
}
});

Tudo aqui deve ser bastante familiar agora, embora haja alguns pontos novos. Você notará que, em vez de definir a forma como um triângulo, nós a chamamos de polígono antes de atribuir o número de pontos tem como 3.

Nós também demos preencher funcionar uma matriz de cores para trabalhar, cada quinto triângulo reverterá para o vermelho e o padrão continuará. O alto valor do ângulo configuração torna o burst spin rápido o suficiente para produzir seu efeito estroboscópico.

Se o código não estiver funcionando para você, certifique-se de ter adicionado o objeto triângulos à classe de ouvinte de evento, como fizemos com os objetos anteriores.

Muito psicodélico! Vamos adicionar outro burst para segui-lo.

Pentágonos Dançantes

Podemos usar algo quase idêntico ao nosso triângulos objeto para fazer a explosão que o segue. Este código ligeiramente modificado produz hexágonos giratórios sobrepostos e coloridos:

const pentagons = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 720,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
radius: { 1 : 300 },
points: 5,
fill: ['purple','pink','yellow','green'],
delay:500,
duration: 3000
}
});

A principal mudança aqui é que adicionamos um atraso de 500ms, para que a explosão não comece antes dos triângulos. Ao alterar alguns valores, a ideia aqui era fazer o burst girar na direção oposta aos triângulos. Por feliz acidente, quando os pentágonos aparecem, o efeito estroboscópico dos triângulos faz com que pareça que eles estão girando juntos.

Um pouco de aleatoriedade

Vamos adicionar um efeito que faz uso de valores aleatórios. Crie um burst com estas propriedades:

const redSparks = new mojs.Burst({
left: 0, top: 0,
count:8,
radius: { 150: 350 },
angle: {0:90 ,easing:'cubic.out'},
children: {
shape: 'line',
stroke: {'red':'transparent'},
strokeWidth: 5,
scaleX: {0.5:0},
degreeShift: 'rand(-90, 90)',
radius: 'rand(20, 300)',
duration: 500,
delay: 'rand(0, 150)',
}
});

Essa explosão criará linhas que começam em vermelho e desaparecem até a transparência, diminuindo com o tempo. O que torna este componente interessante é que valores aleatórios são usados ​​para determinar algumas de suas propriedades.

o graus Shift dá ao objeto filho um ângulo inicial. Ao randomizar isso, ele fornece uma explosão totalmente diferente a cada clique. Valores aleatórios também são usados ​​para o raio e atraso funções para adicionar ao efeito caótico.

Aqui está o efeito em si:

Como estamos usando valores aleatórios aqui, precisamos adicionar um método extra ao nosso manipulador de eventos para o objeto:

redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();

o gerar() A função calcula novos valores aleatórios sempre que o evento é chamado. Sem isso, a forma escolheria valores aleatórios na primeira vez que fosse chamada e continuaria usando esses valores em todas as chamadas subsequentes. Isso arruinaria totalmente o efeito, então certifique-se de adicionar isso!

Você pode usar valores aleatórios para quase todos os elementos dos objetos mo.js, e eles são uma maneira simples de fazer animações exclusivas.

como faço para descobrir em quais sites meu endereço de e-mail está registrado

A aleatoriedade não é a única maneira de adicionar movimentos dinâmicos às animações. Vejamos o cambalear função.

Staggering Lines

Para mostrar como o cambalear função funciona, vamos fazer algo um pouco como uma roda de Catherine. Crie um novo burst com estes parâmetros:

const lines = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 1440,easing: 'cubic.out'},
left: 0, top: 0,
count: 50,
children : {
shape: 'line',
radius: { 1 : 100,easing:'elastic.out' },
fill: 'none',
stroke: ['red','orange'],
delay:'stagger(10)',
duration: 1000
}
});

Tudo aqui é familiar agora, uma explosão cria 50 crianças com linhas vermelhas ou laranja. A diferença aqui é que passamos o atraso propriedade a cambalear (10) função. Isso adiciona 10ms de atraso entre a emissão de cada criança, dando a ela o efeito giratório que procuramos.

A função escalonar não faz uso de nenhum valor aleatório, então você não vai precisar de um gerar função no manipulador de eventos neste momento. Vamos ver tudo o que temos até agora em ação:

Poderíamos facilmente parar por aqui, mas vamos apenas adicionar mais uma explosão para encerrar este projeto.

Quadrados Inteligentes

Para este último burst, vamos fazer algo usando retângulos. Adicione este objeto ao seu código e ouvinte de eventos:

const redSquares = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {360 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'rect',
radiusX: { 1 : 1000 },
radiusY:50,
points: 5,
fill: 'none',
stroke: {'red':'orange'},
strokeWidth:{5:15},
delay:1000,
duration: 3000
}
});

Este objeto não adiciona nada de novo ao que já trabalhamos hoje, ele é incluído apenas para mostrar como padrões geométricos complexos podem ser facilmente criados por meio de código.

Este não era o resultado pretendido deste objeto quando ele foi criado nos estágios de teste de escrever este tutorial. Assim que o código foi executado, ficou claro que descobri algo muito mais bonito do que poderia ter feito de propósito!

Com este objeto final adicionado, estamos prontos. Vamos ver tudo em ação.

Mo.js: uma ferramenta poderosa para animações na web

Esta introdução simples ao mo.js cobre as ferramentas básicas necessárias para criar belas animações. A forma como essas ferramentas são usadas pode criar quase tudo e, para muitas tarefas, as bibliotecas da web são uma alternativa simples ao uso Photoshop , After Effects ou outro software caro.

Esta biblioteca é útil para quem trabalha com programação e desenvolvimento web, o tratamento de eventos usado no projeto pode ser facilmente usado para criar botões reativos e texto em sites ou aplicativos. Divirta-se com isso: não há erros, apenas acidentes felizes!

Compartilhado Compartilhado Tweet O email Vale a pena atualizar para o Windows 11?

O Windows foi redesenhado. Mas isso é suficiente para convencê-lo a mudar do Windows 10 para o Windows 11?

Leia a seguir Tópicos relacionados

• Programação
• JavaScript

Sobre o autor Ian Buckley(216 artigos publicados)

Ian Buckley é jornalista freelance, músico, performer e produtor de vídeo que mora em Berlim, Alemanha. Quando ele não está escrevendo ou no palco, ele está mexendo em eletrônicos ou códigos DIY na esperança de se tornar um cientista maluco.

Mais de Ian Buckley

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever