Question

http://livicons.com/

我想知道是否有人可以给我一个关于如何制作这些图标的基本细分。我看到它们是SVG并使用Raphael js动画，但画布上是否绘制了每个图标？或者是用raphael.js独立动画的图标实际的svg文件？

我有一个我想要使用自己的图标，看看我是否可以按照自己的方式设置动画，类似于这些图标。有没有人有关于这种技术的想法或教程？我一直在阅读raphael js，但看起来它主要用于绘制SVG然后制作动画，所以我不是100％。

我一直在尝试阅读检查员，但我无法真正理解每个动画的作用（它如何知道图标的哪个部分可以操作？）

谢谢任何人！

Answer 1

我是LivIcons的作者Dee。刚看到Stackoverflow在我网站上的统计数据：）

给出了答案，但不过，我将尝试简要说明我是如何创建LivIcons的。

所有魔法都在Raphael js lib（特别感谢Dmitry Baranovskiy）。

这些图标并不总是SVG，它们是IE6-IE8中的VML。
第一步是为任何矢量软件中的每个图标形状创建带有路径的SVG文件，例如ex。 Adobe Illustrator。
如果动画不简单（如旋转，移动或缩放），则需要为每个帧创建其他路径。所以你的动画将从头到尾经过这些帧。
之后，您将为脚本获取这些路径的值。
在Raphaeljs的帮助下，您可以在一个函数中为图标创建初始状态 - Paper.path（[pathString]）方法，并使用Element.animate（...）方法为这些路径设置动画。此功能还可以捕捉悬停或点击事件并在悬停时更改颜色。

所以这是一个非常简短的指南。我在4个月内一直在制作前303个图标。如果你有时间和愿望，你也可以尝试。

迪

Answer 2

他们使用javascript和悬停事件为SVG（矢量）元素设置动画..阅读它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>

livicons是如何制作的？

2 个答案: