Come sono stati fatti i livicons?

Question

http://livicons.com/

Mi chiedo se qualcuno possa darmi un'analisi di base su come sono state realizzate queste icone. Vedo che sono SVG e animati con Raphael js, ma ogni icona è disegnata sulla tela? O le icone sono effettivamente dei file svg che sono animate in modo indipendente con raphael.js?

Ho un'icona che voglio usare di mia iniziativa e vedere se riesco ad animarla a modo mio simile a quelle icone. Qualcuno ha un'idea o un tutorial su questa tecnica? Ho letto raphael js ma sembra che sia principalmente per disegnare un SVG e poi animarlo, quindi non sono al 100%.

Ho cercato di leggere attraverso l'ispettore pure, ma non posso davvero capire che cosa ogni animazione sta facendo (come fa a sapere quale parte del icona per manipolare, ecc?)

Grazie nessuno!

Answer 1

Sono Dee, autore dei LivIcons'. Appena visto il traffico da Stackoverflow sulle statistiche del mio sito :)

La risposta è data, ma tuttavia, proverò a dare una breve spiegazione su come ho creato LivIcons.

Tutta la magia è in Raphael js lib (Un ringraziamento speciale a Dmitry Baranovskiy).

1. Queste icone non sono sempre SVG, sono VML in IE6-IE8.
2. Il primo passo è la creazione di file SVG con percorsi (s) in esso per ogni forma di un'icona in qualsiasi software di vettore come ad esempio. Adobe Illustrator.
3. Se l'animazione non sarà semplice (come ruotare, spostare o ridimensionare) è necessario creare percorsi aggiuntivi per ogni fotogramma. Quindi la tua animazione passerà attraverso questi fotogrammi dall'inizio alla fine.
4. Dopo questo, si prendono i valori di questi percorsi per lo script.
5. Con l'aiuto di Raphaeljs in una funzione si crea lo stato iniziale per un'icona - metodo Paper.path ([pathString]) e si animano questi percorsi con il metodo Element.animate (...). Questa funzione cattura anche hover o fai clic sugli eventi e cambia colore al passaggio del mouse.

Quindi questa è una guida molto breve. Ho lavorato sulle prime 303 icone per 4 mesi. Se hai tempo e desideri puoi anche provare.

I migliori auguri e buona fortuna!

Dee

Answer 2

stanno animando elementi SVG (vettore) utilizzando javascript e si librano evento .. leggere su di esso here

esempio:

<svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.5px;"> 
    <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc> 
    <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs> 
    <path fill="#000000" stroke="none" d="M25.59,13.368C25.814,13.598,26,13.52,26,13.197V6.584C26,6.262,25.738,6,25.416,6H18.803C18.481,6,18.403000000000002,6.186,18.633,6.41L21.227,9.004L15.999,14.231L10.774000000000001,9.006L13.369000000000002,6.41C13.598,6.185,13.52,6,13.198,6H6.584C6.262,6,6,6.262,6,6.584V13.198C6,13.519,6.185,13.597000000000001,6.411,13.369L9.007,10.774L14.232,15.998999999999999L9.004999999999999,21.226999999999997L6.41,18.633C6.186,18.402,6,18.48,6,18.803V25.416C6,25.738,6.262,26,6.584,26H13.197C13.518999999999998,26,13.597,25.816,13.367999999999999,25.59L10.771999999999998,22.994L15.998999999999999,17.766L21.226999999999997,22.994L18.632999999999996,25.59C18.402999999999995,25.815,18.480999999999995,26,18.802999999999997,26H25.415999999999997C25.738,26,26,25.738,26,25.416V18.803C26,18.481,25.814,18.403000000000002,25.59,18.633L22.994,21.227L17.766,15.999L22.994,10.772L25.59,13.368Z" stroke-width="0" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> 
    <rect x="0" y="0" width="32" height="32" r="0" rx="0" ry="0" fill="#ffffff" stroke="none" stroke-width="0" opacity="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"></rect> 
</svg>