Как были сделаны живики?

Question

http://livicons.com/

Мне интересно, может ли кто-нибудь дать мне базовую информацию о том, как были сделаны эти значки. Я вижу, что они SVG и анимированы с Raphael js, но каждый значок нарисован на холсте? Или файлы фактических файлов svg, которые каждый анимируется независимо с помощью raphael.js?

У меня есть значок, который я хочу использовать самостоятельно, и посмотреть, смогу ли я его анимировать по-своему, похожим на эти значки. Есть ли у кого-нибудь идеи или учения об этой технике? Я читал raphael js, но похоже, что это в основном для рисования SVG, а затем для анимации, поэтому я не на 100%.

Я пытался читать через инспектор, как хорошо, но я не могу понять, что делает каждая анимация (как это знать, какая часть иконки для манипулирования и т.д.?)

Спасибо кто угодно!

Answer 1

Я Ди, автор LivIcons. Просто посмотрел трафик из Stackoverflow на статистику моего сайта :)

Ответ дан, но тем не менее я попытаюсь дать краткое объяснение, как я создал LivIcons.

Вся магия в Рафаэле js lib (Особая благодарность Дмитрию Барановскому).

1. Эти значки не всегда являются SVG, они являются VML в IE6-IE8.
2. Первый шаг - создание SVG-файла с путями в нем для каждой формы значка в любом векторном программном обеспечении, например, для ex. Adobe Illustrator.
3. Если анимация будет не простой (например, вращать, перемещать или масштабировать), вам нужно создать дополнительные пути для каждого кадра. Таким образом, ваша анимация будет проходить через эти кадры от начала и до конца.
4. После этого вы берете значения этих путей для своего скрипта.
5. С помощью Raphaeljs в одной функции вы создаете начальное состояние для метода icon - Paper.path ([pathString]) и анимируете эти пути с помощью метода Element.animate (...). Эта функция также захватывает или нажимает события и меняет цвет при наведении.

Так что это очень короткий путеводитель. Я работаю над первыми 303 значками в течение 4 месяцев. Если у вас есть время и устремление, вы также можете попробовать.

С наилучшими пожеланиями и удачи!

Dee

Answer 2

Они анимации SVG (вектор) элементов с помощью JavaScript и парить событие .. читать об этом here

Например:

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