livicons是如何制作的？

Question

http://livicons.com/

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

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

我一直试图通过检查员阅读,但我无法真正理解每个动画的作用(它如何知道图标的哪个部分要操纵等？)

谢谢任何人!

Answer 1

我是LivIcons的作者Dee.刚看到Stackoverflow在我网站上的统计信息:)

给出了答案,但是,我将尝试简要解释我是如何创建LivIcons的.

所有的魔力都在Raphael js lib(特别感谢Dmitry Baranovskiy).

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

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

祝你好运!

迪伊