W jaki sposób powstały livicony?

Question

http://livicons.com/

Zastanawiam się, czy ktoś może dać mi podstawowe wyjaśnienie, w jaki sposób te ikony zostały wykonane. Widzę, że są SVG i animowane z Raphaelem, ale czy każda ikona jest rysowana na płótnie? Czy są to ikony rzeczywistego pliku SVG, które są po prostu animowane niezależnie przez raphael.js?

Mam ikonę, której chcę użyć i zobaczyć, czy mogę ją animować na swój sposób, podobny do tych ikon. Czy ktoś ma pomysł lub samouczek dotyczący tej techniki? Czytałem raphael js, ale wygląda na to, że jest to głównie do rysowania SVG, a następnie animowania go, więc nie jestem w 100%.

Próbowałam czytać przez inspektora, jak również, ale nie mogę zrozumieć, co każdy robi animacji (jak to wiedzieć, która część ikonę, aby manipulować itp?)

Thanks ktoś!

Answer 1

jestem Dee, autor LivIcons. Właśnie widziałem ruch z Stackoverflow na statystyki mojej strony :)

Odpowiedź jest udzielona, ​​ale mimo to postaram się podać krótkie wyjaśnienie, w jaki sposób stworzyłem LivIcons.

Cała magia znajduje się w Raphael js lib (specjalne podziękowania dla Dmitrija Baranovskiego).

1. Te ikony nie zawsze są SVG, są VML w IE6-IE8.
2. Pierwszym krokiem jest utworzenie pliku SVG ze ścieżkami (ścieżkami) dla każdego kształtu ikony w dowolnym oprogramowaniu wektorowym, np. Ex. Adobe Illustrator.
3. Jeśli animacja nie będzie prosta (np. Obracanie, przesuwanie lub skalowanie), należy utworzyć dodatkowe ścieżki dla każdej klatki. Tak więc twoja animacja przejdzie przez te ramki od początku do końca.
4. Następnie przyjmujemy wartości tych ścieżek dla skryptu.
5. Przy pomocy Raphaeljs w jednej funkcji tworzysz stan początkowy dla ikony - Paper.path ([pathString]) i animujesz te ścieżki za pomocą metody Element.animate (...). Ta funkcja powoduje również przechwytywanie zdarzeń na hover lub click i zmianę koloru po najechaniu myszą.

To jest bardzo krótki przewodnik. Pracowałem nad pierwszymi 303 ikonami przez 4 miesiące. Jeśli masz czas i aspiracje, możesz spróbować.

Najlepsze życzenia i powodzenia!

Dee

Answer 2

Są animacji SVG (wektor) elementy przy użyciu JavaScript i unoszą zdarzenie .. przeczytać o tym here

przykład:

<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>