5 animações SVG para animar seu web design

Animações podem fazer um site parecer liso e suave, mas como você pode incorporar esse recurso em seu próprio trabalho? Junte-se a nós e aprenda como animar seu web design com esses exemplos criativos de animação SVG.

Trabalhando com gráficos vetoriais escaláveis

SVG é um formato de arquivo que usa linhas, em vez de pixels, para armazenar e exibir imagens. Como o próprio nome sugere, gráficos vetoriais escaláveis ​​podem ser dimensionados sem perder qualidade.

Além de ser ótimo para redimensionar, você também pode usar código SVG dentro do HTML, e ele funcionará como qualquer outro elemento. Isso significa que você pode usar Regras CSS, Código JavaScripte, o mais importante, animações com os SVGs do seu site.

Você pode criar SVGs usando softwares como Adobe Illustrator e sites como SVGator, mas também pode criá-los manualmente. O formato SVG é uma linguagem XML de texto simples e se parece um pouco com HTML.

Este exemplo apresenta quatro botões com seus próprios ícones e um fundo colorido em bloco. Quando você seleciona um botão, ele muda de um círculo para um retângulo arredondado, enquanto também muda a cor de fundo da página para corresponder ao botão.

Uma mistura de JS e CSS produz esses resultados, e tudo começa com um loop que adiciona ouvintes de eventos a cada botão.

por (var eu = 0; i < menuItems.length; i++) {
 menuItems[i].addEventListener('clique', botãoClique);
}

Uma vez que um botão é clicado, uma função chamada buttonClick() executa várias ações. Ele começa alterando a cor de fundo da página:

documento.body.style.backgroundColor = `#${esta.getAttribute('fundo de dados')}`;

Depois disso, ele adiciona uma classe CSS ao botão que foi pressionado, acionando uma animação e alterando a cor de fundo do botão.

menuItemActive.classList.remove('menu__item--ativo');
this.classList.add('menu__item--ativo');
menuItemActive.classList.add('menu__item--animate');
this.classList.add('menu__item--animate');
menuItemAtivo = esta;

Embora simples, este exemplo de animação SVG oferece uma maneira única de tornar seu site mais atraente. Esse tipo de recurso de design é perfeito para sites móveis e aplicativos baseados em HTML.

Você pode adicionar quantos nós quiser a um caminho SVG, tornando-os ideais para a criação de texto. Esta simples animação de traçado demonstra a técnica perfeitamente, com o texto aparecendo da esquerda para a direita como se estivesse sendo escrito.

A animação não possui quadros-chave, ela simplesmente aplica uma nova largura de traço ao lado da propriedade de transição CSS. Isso faz com que cada linha se desenhe na tela sem animações complicadas.

.path-1 {
 traço-dasharray: 1850 2000;
 deslocamento-traço: 1851;
 transição: 5s linear;
}

Uma função JS adiciona uma classe CSS exclusiva a cada seção do texto usando uma classe CSS pai único para diminuir ainda mais a densidade do código.

$(função() {
funçãoanimaçãoInício() {
 $('#recipiente').addClass('barbatana');
 }
setTimeout (animationStart, 250);
});

Como um exemplo somente de CSS, esta animação SVG é ótima para quem não quer mergulhar no código JavaScript. A ideia é simples: um botão começa com um sublinhado que se transforma em uma borda completa quando você passa o mouse sobre ele.

Os quadros-chave CSS criam dois estados para o botão. O primeiro estado tem um traço mais grosso e cobre apenas a parte inferior do botão de forma SVG, começando em 0%. O outro estado é o botão completo em 100% com um traço mais fino.

@keyframes desenhar {
 0% {
 acidente vascular cerebral: 140 540;
 deslocamento de traço: -474;
 largura do traço: 8px;
 }
100% {
 traço-dasharray: 760;
 deslocamento-traço: 0;
 largura do traço: 2px;
 }
}

Esses quadros-chave só são aplicados ao contorno do botão de forma SVG quando o usuário move o cursor sobre o botão. Ele usa o :hover pseudoclasse CSS para conseguir isso, acionando uma regra que adiciona os quadros-chave de animação ao botão.

.svg-wrapper:flutuar.forma {
-webkit-animation: 0.5sdesenharlinearpara a frente;
animação: 0.5sdesenharlinearpara a frente;
}

Isso mostra como você pode criar belas animações sem usar código complexo. Você pode usar esses fundamentos e sua criatividade para criar elementos interativos mais elaborados para seu próprio site.

Com tantas técnicas interessantes sob o capô, é difícil decidir o que discutir ao olhar para este exemplo de relógio SVG.

Para começar, ele usa a função Date() para coletar a data e hora atuais. Usando esse valor, as funções getHours(), getMinutes() e getSeconds() dividem os dados em suas partes relevantes. O código então calcula a posição de cada ponteiro no relógio.

var data = novoEncontro();
var horas Ângulo = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minutoÂngulo = 360 * date.getMinutes() / 60;
var secÂngulo = 360 * date.getSeconds() / 60;

Ao armazenar cada uma das mãos em uma matriz, suas posições podem ser definidas com muita facilidade cada vez que o código é executado.

mãos[0].setAttribute('a partir de', shifter (secAngle));
mãos[0].setAttribute('para', shifter (secAngle + 360));
mãos[1].setAttribute('a partir de', shifter (minutoAngle));
mãos[1].setAttribute('para', shifter (minutoAngle + 360));
mãos[2].setAttribute('a partir de', shifter (horasAngle));
mãos[2].setAttribute('para', shifter (horasAngle + 360));

O tempo tem aplicações limitadas no domínio do web design, mas é útil para cronômetros de contagem regressiva, relógios e armazenamento de registros de data e hora. Este exemplo também oferece uma visão sobre como criar animações SVG dinâmicas com variáveis.

Essa animação SVG baseada em CSS fornece uma maneira elegante de fazer qualquer formulário parecer incrível.

Sem nada selecionado, o formulário tem linhas acinzentadas abaixo de cada campo. Uma linha aparece quando um campo é selecionado, deslizando da esquerda com uma animação suave. Se o usuário selecionar um campo diferente, a linha desliza para sua nova posição em um movimento suave.

Finalmente, uma vez que o usuário pressiona o botão Conecte-se botão, a linha se transforma em um círculo que pulsa conforme a página é carregada.

Este exemplo de SVG é particularmente impressionante porque depende apenas de CSS para produzir um resultado tão complexo. Ele usa variáveis ​​CSS para armazenar dados, facilitando o controle de elementos como o aplicativo principal.

$app-preenchimento: 6vh;
$app-width: 50vh;
$app-altura: 90vh;
#aplicativo {
 largura: $app-width;
 altura: $app-height;
 preenchimento: $app-preenchimento;
 fundo: branco;
 Sombra da caixa: 002rem rgba(Preto, 0.1);
}

Você pode usar este exemplo em praticamente qualquer formulário da web e envolver seus usuários como nunca antes.

Criando suas próprias animações SVG com HTML, JS e CSS

Criar uma animação SVG do zero pode ser um processo difícil quando você começa. Esses exemplos lhe darão a vantagem necessária para criar animações SVG que farão seu site brilhar.

9 truques avançados de CSS de consulta de mídia que você deve conhecer

Leia a seguir

Sobre o autor