6

http://livicons.com/

我想知道是否有人可以对这些图标的制作方式进行基本分解。我看到它们是 SVG 并使用 Raphael js 进行动画处理，但是每个图标都绘制在画布上吗？或者这些图标是实际的 svg 文件，每个都使用 raphael.js 独立动画？

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

我也一直在尝试通读检查器，但我无法真正理解每个动画在做什么（它如何知道要操作图标的哪个部分等？）

谢谢任何人！

4

2 回答 2

10

我是 Dee，LivIcons 的作者。刚刚在我网站的统计信息中看到了来自 Stackoverflow 的流量 :)

答案已经给出，但是，我将尝试简要解释我是如何创建 LivIcons 的。

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

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

所以这是一个非常简短的指南。我在 4 个月内一直在研究前 303 个图标。如果你有时间和志向，你也可以试试。

最良好的祝愿和好运！

迪

于 2013-07-26T19:39:01.470 回答
4

他们正在使用 javascript 和悬停事件为 SVG（矢量）元素设置动画..在这里阅读

例子：

<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>
于 2013-07-26T17:44:21.420 回答