http://livicons.com/
我想知道是否有人可以给我一个基本的细分这些图标是如何制作的.我看到它们是SVG并使用Raphael js动画,但画布上是否绘制了每个图标？或者是图标实际的svg文件,每个只用raphael.js独立动画？
我有一个我想要使用自己的图标,看看我是否可以按照自己的方式设置动画,类似于那些图标.有没有人有关于这种技术的想法或教程？我一直在阅读raphael js,但看起来它主要用于绘制SVG然后制作动画,所以我不是100％.
我一直试图通过检查员阅读,但我无法真正理解每个动画的作用(它如何知道图标的哪个部分要操纵等？)
谢谢任何人！
解决方法
我是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个图标.如果你有时间和愿望,你也可以尝试.
祝你好运！
迪伊
