33

Tenho usado uma biblioteca de JavaScript para fazer icones/simbolos de uma app de metereologia. Queria agora fazer em SVG o simbolo da nuvem (céu nublado), e questiono-me sobre qual a melhor abordagem.

Fiz um svg com a linha da nuvem, estática (jsFiddle), e uma rotação básica que não é o efeito pretendido uma vez que a nuvem original (na animação com o canvas/js) tem 5 arcos que expandem e contraem à medida que rotacionam.

Possiveis abordagens que pensei:

  • fazer 5 circulos, usando "dash" para ter só arcos, e depois tentar animar esse valor e fazer tudo rodar à volta de um eixo
  • fazer 5 path, e depois tentar animar esse valor e fazer tudo rodar à volta de um eixo

Haverá uma maneira melhor (e que funcione em browsers modernos), de maneira a recriar a animação mas com SVG?

O exemplo de js, como no jsFiddle em cima:

var skycons = new Skycons({
    "color": "black"
});
var canvas = document.querySelectorAll('canvas');
[].forEach.call(canvas, function (el) {
    skycons.add(el, el.dataset.icon);
});

skycons.play();
<script src="https://rawgit.com/darkskyapp/skycons/master/skycons.js"></script>
<div class="fe_forecast">
    <div class="fe_currently">
        <canvas id="fe_current_icon" data-icon="cloudy" width="160" height="160" style="width:120px; height:120px"></canvas>
    </div>
</div>

10
  • 1
    Sim a dificuldade está em manter as animações, eu até coagitei formas de ficar pegando pixel a pixel do canvas em um loop continuo mais mesmo otimizando não ficou nada performático. Commented 2/02/2016 às 18:50
  • 1
    @FelipeAssunção se concordares deixa a recompensa aberta até ao fim do tempo para outros terem possibilidade de contribuir com respostas também.
    – Sergio
    Commented 3/02/2016 às 15:43
  • 1
    Sim, a resposta atual apesar de bem completa não é muito objetiva, achei ela muito teórica e eu procuro uma resposta mais técnica. Entendo que somos focados em coding e criar os svgs com o uso de um programa basicamente foge ao escopo Javascript, eu procuro uma abordagem similar a esta: willianjusten.com.br/manipulando-svg-com-js focada na criação e manipulação por javascript Commented 3/02/2016 às 15:53
  • 1
    Vou ser mais especifico, considerando o uso de javascript como o principal ferramenta, a library que o Sergio utilizou rawgit.com/darkskyapp/skycons/master/skycons.js possui exatos 10 modelos de weather icons sendo totalmente feita em javascript, eu procuro uma abordagem que me permita fazer algo similar. O Sergio assim é um programador experiente basta ver as contribuições que ele fez aqui na comunidade portanto presumo que mesmo consultou o básico sobre SVG antes de perguntar aqui. Commented 3/02/2016 às 16:33
  • 1
    Uma abordagem adequada seria explicar da seguinte forma: - Como criar os shapes com uso de coding(como funciona, como fazer uma curva e etc..) - Como manipular os elementos também com o uso de javascript, Como modificar os elementos em tempo de execução da forma mais performática, para permitir que ele crie uma solução viável e coerente, pois se o mesmo tiver que usar mil softwares externos pra fazer oque ele já encontrou pronto em canvas certamente não vai valerá a pena substituir. Commented 3/02/2016 às 16:38

3 Respostas 3

31
+500

Atualização: Animação com Javascript

Para uma abordagem mais simples, consulte Animação (abaixo)

A animação de objetos em um documento SVG com Javascript pode ser feitas de várias formas, como:

  • alterando as propriedades do DOM (parecida com Animação, abaixo)

  • modificando as transformações dos vetores (ex: através das propriedades transform ou matrix)

  • animação direta de propriedades internas (ex: alterar os vetores que formam o path)

O acesso a atributos do objeto pode ser feito diretamente, porém, para acessar elementos do SVG, deve-se utilizar um namespace:

const svgNS = 'http://www.w3.org/2000/svg';

// Referência ao objeto SVG (sem o namespace)
svgRef = document.getElementById('svgImg01');

// Cria um caminho (usa namespace)
pathRef = document.createElementNS(svgNS, "path");

// Atributos são acessados sem o namespace
pathRef.setAttribute('id','cam');
pathRef.setAttribute('style', "fill:#000000");
pathRef.setAttribute('d', 'M0 0 Z');

// Adiciona o caminho criado ao documento SVG
svgRef.appendChild(pathRef);

Looping da Animação

A forma mais simples para atualizar os objetos durante a animação, é utilizar as funções setInterval ou setTimeout.

A desvantagem, é que essas funções não tem muita precisão (de tempo) para atualizar a animação e podem ocorrer falhas ("pulos") durante a execução.

Um exemplo de como criar a estrutura básica do looping de animação com setInterval:

var handleInterval = -1;

function renderizar()
{
    // Código da animação
}

// inicia o timer
function iniciaAnimacao()
{
    handleInterval = setInterval('renderizar();', 300);
}

// para o timer
function pausaAnimacao()
{
    clearInterval(handleInterval);
    handleInterval = -1;
}

Uma outra forma (com precisão e desempenho melhores) para atualizar a animação é utilizar um looping auxiliar e a função requestAnimationFrame:

var handleFrame = -1;

// tempo que o último frame foi renderizado
var ultimoFrame = 0;

// tempo até a renderização do próximo frame
const numFrames = 30.0;

// Looping auxiliar
function loopingAnimacaoFrameComTempo(tempo)
{
    if ((tempo - ultimoFrame) > numFrames) {
        renderizar();
        ultimoFrame = tempo;
    };
    handleFrame = requestAnimationFrame(loopingAnimacaoFrameComTempo);
    return;
}

// inicia o looping
function iniciaAnimacao()
{
    ultimoFrame = performance.now() - numFrames + 1;
    handleFrame = requestAnimationFrame(loopingAnimacaoFrameComTempo);
}

// interrompe o looping
function pausaAnimacao()
{
    cancelAnimationFrame(handleFrame);
    hanldeFrame = -1;
}

Como a função requestAnimationFrame aguarda a próxima operação de repaint do dispositivo, é possível obter velocidades maiores e, ao mesmo tempo, manter uma atualização "suave" dos frames.

A constante numFrames controla a velocidade da animação. Quanto menor o valor, mais rápida será a animação.


Objetos

Neste exemplo, a animação deforma (aleatóriamente) os vetores de um polígono.

Criar ou alterar as propriedades de outros objetos (ex: círculos, retângulos), além do path, segue a mesma lógica e pode ser utilizada para qualquer tipo de animação (gráficos comerciais, banners, histogramas, jogos, etc.).

Os vetores são criados pela função abaixo e retornam em uma string, que será atribuída a propriedade d do caminho criado:

function cria_path_inicial(x, y, r, tess)
{
    var ponto_x = Math.cos(0.0)*r + x;
    var ponto_y = Math.sin(0.0)*r + y;
    var ret = 'M' + ponto_x + ' ' + ponto_y + ' ';

    for (var angulo=0.0; angulo<2.0*Math.PI; angulo+=tess) {
        ponto_x = Math.cos(angulo)*r + x;
        ponto_y = Math.sin(angulo)*r + y;
        ret += 'L' + ponto_x + ' ' + ponto_y + ' ';
    }
    return ret + 'Z';
}

e a função que deforma o polígono dentro de um cage:

// Pontos importantes nos comentários

function renderizar()
{
    var i = 0;
    var px = 0.0;
    var py = 0.0;

    // Obtém a lista de vetores do caminho
    var segmentos = pathRef.pathSegList;

    // Percorre a lista
    for (i=1; i<segmentos.numberOfItems; i++) {

        // Obtém uma referência ao vértice 'i' e as coordenadas do vértice
        var vertice = segmentos.getItem(i);
        px = vertice.x;
        py = vertice.y;

        dx = Math.random()*2;
        dy = Math.random()*2;
        if (Math.random() < 0.5) {
            px += (px+dx < 400) ? dx : -dx;
            py += (py+dy < 400) ? dy : -dy;
        } else {
            px -= (px-dx > 0) ? dx : -dx;
            py -= (py-dy > 0) ? dy : -dy;
        }

        // Atualiza os vértices
        vertice.x = px;
        vertice.y = py;
    }
    return;
}

A complexidade na implementação depende, principalmente: do objetivo da animação, os algoritmos que serão utilizados, a quantidade de objetos, sincronização dos movimentos, etc.

O formato SVG pertime a declaração de código Javascript dentro do documento, portanto, também há possibilidade usar essa área para codificar a animação.

O resultado abaixo foi implementado com controles para iniciar e pausar a animação, resetar o polígono e alternar o looping entre setInterval e requestAnimationFrame:


Animação JS


Observação: O exemplo no jsfiddle foi testado com os navegadores FireFox 43.0.4 64bit, Opera 31.0, Safari 9.0.3 e Internet Explorer 11, porém, não funciona no Google Chrome.


Veja rodando no jsfiddle



Animação

Animar o objeto SVG consistem em alterar as suas propriedades em função de um intervalo de tempo.

É possível alterar essas propriedades (sem uso de Javascript), por exemplo, utilizando:

Através do CSS, é possível criar uma animação alterando uma ou mais propriedades em um intervalo de tempo utilizando, por exemplo, os comandos:

  • @keyframes para definir como e quais propriedades serão alteradas.

  • animation para definir, por exemplo, o tempo da animação ou quantas vezes ela será executada

Ao analisar a imagem no link da pergunta, a primeira estratégia utilizada para copiar a animação, foi combinar uma operação de escala com rotação, conforme o código abaixo:

#container {
  position: relative;
  float: left;
  width: 90mm;
  height: 90mm;
  left:20px;
  top:100px;
  background: rgb(240, 240, 255);
}

@keyframes animacao-escala-rotaciona {
  0%   { width:45mm; height: 45mm; top: 50%; left: 50%; }
  50%  { width:55mm; height: 55mm; top: 45%; left: 45%; }
  100% { width:45mm; height: 45mm; top: 50%; left: 50%; transform: rotate(360deg); }
}

#svg2 {
  position:absolute;
  top: 50%;
  left: 50%;
  width: 45mm;
  height: 45mm;
  margin: -23mm 0 0 -23mm;
  animation:
    animacao-escala-rotaciona 4s infinite running linear;
}

No comando keyframes, os passos (steps) da animação são definidos em porcentagens do tempo total da animação.

Dentro do bloco de código após cada porcentagem, estão as propriedades que serão alteradas em cada passo.

No objeto svg2, o atributo animation define o tempo da animação, a quantidade de repetições (infinite) o status (parada ou rodando) e o tipo de interpolação de tempo.


inserir a descrição da imagem aqui

Veja rodando no jsfiddle


Uma outra possibilidade é combinar as duas transformações diretamente no atributo transform, com o código:

@keyframes animacao-escala {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: scale(1.8) rotate(180deg); }
  100% { transform: scale(1.0) rotate(360deg); }
}


Veja rodando no jsfiddle



Animação de Caminhos (paths)


Para este tipo de animação, basta alterar os caminhos conforme o tempo da animação no atributo d da tag path.

A animação do atributo d deve ser feita com SMIL, pois o CSS não permite a animação desse atributo.

No código abaixo, o atributo values (na tag animate) armazena os caminhos de cada passo da animação, e o atributo d (na tag path), o caminho inicial:

<path
   d="m 288.8656,608.00072 a 44.166031 ...
   id="novanuvem2"
   >
   <animate
    id="path"
    xlink:href="#novanuvem2"
    attributeName="d"
    repeatCount="indefinite"
    values="
        m 288.8656,608.00072 a 44.166 ...
        m 325.36386,601.50838 a 42.18 ...
        m 352.99225,577.56713 a 42.18 ...
        m 365.39429,541.71227 a 42.18 ...
        m 358.90196,505.21401 a 44.16 ...
        m 334.96071,477.58562 a 44.16 ...
        m 299.10585,465.18357 a 44.16 ...
        m 262.60758,471.6759 a 42.188 ...
        m 234.97918,495.61715 a 42.18 ...
        m 222.57713,531.47202 a 42.18 ...
        m 229.06946,567.97029 a 44.16 ...
        m 253.01071,595.59869 a 44.16 ...
        m 288.8656,608.00072 a 44.166 ...
    dur="5s"/>
  </path>

Um ponto importante é que o atributo xlink:href="#novanuvem2" na tag animate deve corresponder ao id da tag path.


Veja rodando no jsfiddle



Conclusão

Há formas diferentes e, talvez, mais eficientes para implementar esse tipo de animação, mas o objetivo desta resposta é oferecer um exemplo prático de como criar animações com gráficos vetoriais.

Ao animar objetos no SVG, seja através das tags CSS, SMIL ou através de Javascript, a animação pode apresentar comportamentos diferentes ou exigir uma sintaxe específica conforme o navegador, por isso a dica é consultar e testar a aplicação em diversos navegadores:

A vantagem da animação SVG é que a qualidade da imagem não depende da resolução do dispositivo onde ela será renderizada (ex: monitores, celulares, etc.), devido a imagem ser formada por vetores e não mapa de bits.



Abaixo, seguem outros links que ajudaram na elaboração da resposta:

Basic SVG path tweening with SMIL

Keyframe Animation Syntax

How SVG Line Animation Works

A Guide to SVG Animations - SMIL

W3 - Animation

SVG Path Morphing

7
  • 4
    Seria interessante ter um motivo para -1 nesta resposta (caso seja por causa de um erro na resposta assim ela pode ser corrigida e aprendemos todos com isso).
    – Sergio
    Commented 3/02/2016 às 12:02
  • 4
    @Sergio infelizmente este tipo de bom senso não faz parte da nossa comunidade. Gomiero, muito bacana a sua abordagem contudo achei que a mecânica que você usou para descrever o processo ficou muito atrelado ao uso de softwares gráficos e o SVG possibilita a criação de formas compostas com handcode only, consegue descrever um pouco sobre o processo de drawing? Commented 3/02/2016 às 12:30
  • 1
    Eu quero muito acreditar que quem deu -1 realmente leu e entendeu toda a resposta. Custa nada esclarecer ao AR o que ele pode melhorar na pergunta.
    – user28595
    Commented 3/02/2016 às 13:14
  • 2
    Acho que o -1 deve ter sido por ter criado uma resposta muito longa, tendo explicado até os conceitos de animação etc, o que é absolutamente desnecessário pelo conceito do site... Acho que não só o -1, mas a falta de +1's tbm deve ser por isso... eu do AR retiraria o capítulo "Teoria" inteiro... aposto que a recepção melhoraria muito. :-) +1
    – gustavox
    Commented 3/02/2016 às 14:10
  • 1
    @gustavox Muito obrigado pela dica!! :-)
    – Gomiero
    Commented 3/02/2016 às 14:15
5

Usando apenas SVG talvez algo assim seja uma boa abordagem.

https://jsfiddle.net/wgzk3qze/

É claro que a animação que eu fiz não esta perfeita, foi só para exemplificar. Eu criei 8 casos na animação mas acho que se consegue reduzir o código para 4.

[PS] este ja funciona em Chrome também: https://jsfiddle.net/khnsoynh/

<svg x="0px" y="0px" width="283.026px" height="214.477px" viewBox="0 0 283.026 214.477" enable-background="new 0 0 283.026 214.477">
  <path fill="#FFFFFF" stroke="#000000" stroke-width="10" stroke-miterlimit="10">

  <animate attributeName="d" dur="20000ms" repeatCount="indefinite"  values="M236.5,140.163
    c27.5,37.281-59.5,78.029-93.945,36.414C124.321,220.712,24.5,183.946,43,143.631c-44.5-0.433-18-105.773,38-85.832
    C59,4.045,221.593,3.622,203,55.197C262.5,35.257,286,135.394,236.5,140.163z;

    M205.254,179.176
    c-17,29.568-148.404,29.972-151.214-15.828C9.319,186.476,0,64.738,40.913,71.946c-18.9-41.207,93.852-61.207,107.1-38.207
    c36.752-38,159,20,98.851,67C297.423,120.643,238.23,204.821,205.254,179.176z;

    M90.72,175.919
    c-55.178,19.285-115.488-41.725-53.895-65.88c-65.323-12.787-10.907-82.788,48.762-69.814
    c0.641-31.206,156.551-12.623,127.037,26.648c79.56-15.428,80.186,98.593,3.851,85.554
    C245.988,194.152,97.778,210.631,90.72,175.919z;

    M47.013,165.738
    c-52.501-16.871-37.225-129,11-116c0-43.084,110-49.738,134-9c29.231-28.426,105.832,56.274,51,74c64.265,35.76-32.06,120.03-68,60
    C153.013,220.738,46.013,202.738,47.013,165.738z;

    M47.43,73.458
    c-27.5-37.281,59.5-78.029,93.945-36.414C159.609-7.091,259.43,29.675,240.93,69.99c44.5,0.433,18,105.773-38,85.832
    c22,53.754-140.593,54.177-122,2.602C21.43,178.364-2.07,78.227,47.43,73.458z;

    M105.42,28.169
    C115.013,12,212.013,15.571,214.013,54.738c42.794-18.885,77.734,79.958,37.435,96c28.872,29.477-84.834,76.648-107.615,26
    c-27.82,51-143.833-6-108.82-63C-17.929,88.663,60.013,12,105.42,28.169z;

    M190.986,40.122
    c55.688-19.871,116.554,42.993,54.393,67.882c65.926,13.175,11.007,85.303-49.212,71.935
    c-0.647,32.154-157.996,13.006-128.21-27.458c-80.294,15.897-80.926-101.588-3.887-88.153
    C34.285,21.335,183.863,4.355,190.986,40.122z;

    M236.013,80.738
    c46.55,18.449,40.876,101.678-13,83c-12,35.231-130,41.669-139,13c-30,28-91-69.5-40-85c-40-41,51-85,81.693-61.14
    C141.513,3.738,277.013,52.738,236.013,80.738z;

    M236.5,140.163
    c27.5,37.281-59.5,78.029-93.945,36.414C124.321,220.712,24.5,183.946,43,143.631c-44.5-0.433-18-105.773,38-85.832
    C59,4.045,221.593,3.622,203,55.197C262.5,35.257,286,135.394,236.5,140.163z" />

  </path>
</svg>
6
  • Dei run e não funcionou... Commented 3/02/2016 às 16:18
  • Ups, só testei no Firefox e no Safari!
    – helderk
    Commented 3/02/2016 às 16:22
  • De facto no chrome não funciona! vou ver porque!
    – helderk
    Commented 3/02/2016 às 16:23
  • Ok, ha um bug no Chrome que afecta o parâmetro 'keyTimes' mas podemos suprir o comando e neste caso não afecta a animação jsfiddle.net/khnsoynh
    – helderk
    Commented 3/02/2016 às 16:39
  • @helderk por mais que o seu exemplo funcione, não utilize apenas o link para demonstrar o resultado. Elabore melhor sua resposta e explique a solução diretamente em sua resposta. Se o link sair do ar ou for removido, sua resposta será invalidada. Commented 4/02/2016 às 9:57
2

Eu vou dar um pouco mais de base teórica por experiência própria, talvez isso te ajude, vamos lá.

Pelo que entendi, você não quer exatamente converter uma animação que está sendo renderizada em um <canvas> para svg, você quer criar a animação via JavaScript, dando saída para SVG certo?

Indo direto ao ponto, existem duas libs bem conhecidas para esse propósito, detalhe é que ambas são do mesmo autor.

raphaël.js

snap svg

Porque vale a pena usar Snap.svg/Raphaël.js?

Ambas fazem basicamente a mesma coisa, você escreve javascript, e elas vão dar saída em SVG.

Raphaëljs, funciona a partir do IE6 e Snap.svg a partir do IE9, ou seja, você vai ter uma cobertura de marketshare bem alto mesmo usando Snap.

Entre as duas, recomendo Snap porque é mais moderna, aborda mais recursos novos, é simples de usar, tem suporte a animação, está documentada e tem exemplos de como usa-la. Você também pode carregar um svg externo ou fazer o parsing de um svg já carregado na página, pra dentro do Snap e usa-lo para manipular o svg, o que te da a vantagem de importar vetores do illustrator por exemplo, em vez de desenha-los via javascript.

Bom espero que isso possa te ajudar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .