0

Animação Simples Usando svg e js

#HTML #JavaScript
J
Julimar Paula

Olá pessoal boa noite!!!😊

A galera do Front-End pode algumas vezes ter se deparado com o seguinte pedido de um cliente:

Por favor, você poderia colocar em meu site minha logo animada?

O cliente apenas te dará um arquivo do CorelDraw ou do InkScape se tiver sorte.

Talvez seu primeiro impulso seja salvar essa imagem em vários png's diferentes oque poderia deixar sua aplicação pesada. Além disso a implementação de uma animação assim poderia precisar de muita engenhosidades (gambiaras).


Nada contra as gambiarras, mas vamos dar uma chance para outra forma ok?

Abaixo colocaremos um código html + svg + javaScript, copie-o e o salve no formato html e depois o execute:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="210mm" height="210mm" version="1.1" viewBox="0 0 210 210" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
        <metadata>
         <rdf:RDF>
          <cc:Work rdf:about="">
           <dc:format>image/svg+xml</dc:format>
           <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
           <dc:title/>
          </cc:Work>
         </rdf:RDF>
        </metadata>
        <g id="boca_aberta">
         <path d="m34.056 60.542 38.881 41.592 8.9535-17.418 20.224 12.907 12.704 3.427-15.351 32.155-14.64-7.7966 11.717 21.535c60.297-7.8484 64.528-45.285 84.308-59.327l26.131 20.489-9.1078-25.245 9.5197-26.777-26.07 18.916c-34.076-12.653-43.434-23.068-54.852-23.904l18.176-28.592-50.415 21.255c-9.8158 0.75898-40.017 8.2151-60.178 16.783z" fill="#37abc8"/>
         <path d="m125.09 138.54 9.4999-45.698 10.474 7.1849 35.791-12.411c-14.328 24.572-33.516 47.209-55.765 50.924z" fill="#e6e6e6"/>
        </g>
        <g id="boca_fechada">
         <path d="m34.056 60.542 38.881 41.592 8.9535-17.418 20.224 12.907 12.704 3.427-19.511 10.5-14.64-7.7966 11.717 21.535c60.297-7.8484 68.688-23.63 88.468-37.672l26.131 20.489-9.1078-25.245 9.5197-26.777-26.07 18.916c-34.076-12.653-43.434-23.068-54.852-23.904l18.176-28.592-50.415 21.255c-9.8158 0.75898-40.017 8.2151-60.178 16.783z" fill="#37abc8"/>
         <path d="m111.93 122.4 22.656-29.56 10.474 7.1849 35.791-12.411c-24.048 23.282-46.672 31.071-68.921 34.786z" fill="#e6e6e6"/>
        </g>
        <path d="m114.22 70.137-7.961 10.289 9.8106 11.078-4.2133-11.099z" fill="#216778"/>
        <path d="m124.65 70.075-7.961 10.289 9.8106 11.078-4.2133-11.099z" fill="#2c89a0"/>
        <ellipse cx="80.102" cy="64.686" rx="6.081" ry="5.9748" fill="#fff" opacity=".96422" stroke="#f00" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".89665" stroke-width=".947"/>
        <ellipse cx="79.627" cy="64.477" rx="5.6316" ry="5.7426" opacity=".96422"/>
        <ellipse cx="79.627" cy="64.477" rx="2.7518" ry="2.8061" fill="#fff" opacity=".96422"/>
       </svg>
       
       <script>
        let vel = 0.5;
        let tempo= 0
        let tubaraoAnimar = ()=>{
            tempo++
            console.log('ok')
            let boca_aberta =   document.querySelector('#boca_aberta');
            let boca_fechada = document.querySelector('#boca_fechada');
            const estado1 = ()=>{
                boca_aberta.style.opacity = 0;
                boca_fechada.style.opacity = 1;
            }
            const estado2 = ()=>{
                boca_aberta.style.opacity = 1;
                boca_fechada.style.opacity = 0;
            }
            if(tempo < vel*50){
                estado1();
            }else if( tempo >= vel*50 && tempo < vel*100){
                estado2();
            }else{
                tempo =0
            }
            window.requestAnimationFrame(tubaraoAnimar)
        }
        window.requestAnimationFrame(tubaraoAnimar)
     </script>
</body>
</html>

Se você abrir em seu navegador, verá um tubarão, parecendo o 'papai tubarão' abrindo e fechando a bora. E vc se pergunta: como isso é possível? Eu te respondo: Usando js e svg.


Minha intenção aqui não é te dar todos os macetes do svg, mas sim, apresentar uma nova forma de fazer animações, te permitindo mais uma possibilidade em seu leque de soluções, assim como explicar o exemplo acima.


O SVG é uma forma de encorporar imagens vetoriais em nossas paginal html. Eles são muito bons pois independente de quanto os estiquemos eles nunca ficão pixelados.


O que fizemos aqui foi:


1 criar um vetor usando InkScape;

2 fizemos dois tubarões semelhantes sobrepostos, cada um em um grupo;

3 deixamos um com boca aberta outra fechada ;

4 damos, ainda no inkScape, uma id para cada uma deles;

5 salvamos e convertemos no vsCode para html;

6 abaixo do fechamento da tag svg adicionamos o e script

presente no código acima.


Evite usar o setInterval !!! Já existe uma função própria para animações no JS. Aqui usamos a função nativa do DOM

window.requestAnimationFrame(tubaraoAnimar)

onde 'tubaraoAnimar' é uma função de callback, que nos criamos, que contem os dados para a animação.

Por hora é isso meus amigo!!!

Caso queiram saber mais sobre o svg e suas aplicações deem uma olhada em


https://www.w3schools.com/graphics/svg_intro.asp


para saber mais sobre o requestAnimationFrame vocês podem procurar em


https://developer.mozilla.org/pt-BR/docs/Web/API/Window/requestAnimationFrame


No mais, boa noite e bom trabalho a todos!!!

0
27

Comentários (0)