用Sketch和SVG制作动态图标 | Animate icons with Sketch and SVG

原文链接

Animated icons can bring your app or site to life. Peter Nowell shows you how to design them using Sketch, SVG and CSS.

动态图标可以让你的app或网站生动有趣。Peter Nowell将向你展示如何使用Sketch、SVG以及CSS设计动态图标。

The digital world is increasingly dynamic, reactive and animated — from the whole layout of a webpage to the smallest icon in an app. In this tutorial, we’re going to use Sketch to build an icon representing a collection of files for a download button on a website. We’ll then export our icon as an SVG and animate it using CSS.

数字世界正朝着动态化、响应化和动画化的方向发展,从网页的整体布局到App中的小小图标莫不如此。本教程会教你使用Sketch给下载按钮制作一个图标,其表示一组文件。随后将图标导出为SVG文件并使用CSS添加动态效果。

Even the most simple animated icon requires numerous technical considerations, so each step of this tutorial is designed to prepare you for far more complex projects. To follow along, readers should have a basic understanding of how to use Sketch, as well as CodePen, HTML and CSS transforms and transitions. No previous experience with SVG is necessary.

哪怕是最简单的动态图标也涉及到许多技术,所以本教程的每一步的安排都是让你能够做好准备面对更复杂的项目。要跟上我们的教程,你得熟悉Sketch和CodePen的基本操作并对HTML和CSS变换和过渡有所了解。不需要有SVG的相关经验。

I’ve been blown away by how enthusiastic developers are about adopting Sketch — and it makes sense considering the software has been built specifically for screen-based design and development. Its simple UI and easy-to-use tools betray its considerable power under the hood.

我已经被开发者使用Sketch的热情深深折服了,考虑到这个软件是为屏幕设计与开发专门开发的,这完全可以理解。Sketch既有简洁的用户界面又有易用的工具,其强大能力可见一斑。

And because everything created in Sketch uses vector shapes, it’s the perfect tool for exporting designs as SVGs.

此外Sketch使用的是矢量图形,它简直就是将设计导出成SVG文件的完美工具。

If you’ve been holding off on using SVG, wait no longer. The format is rock-solid, extremely well supported by browsers, and entirely vector-based (granting infinite resolution to graphics). What’s more, each layer in an SVG can be manipulated with CSS or JavaScript, just like anything else in the DOM. Seriously — what more could you ask for?

如果你还迟迟没有使用SVG的话,不要再等待了。SVG格式非常可靠,完全基于矢量(所以图形拥有无上限的分辨率)。此外,SVG的每一层都可以用CSS或JavaScript控制,就跟DOM中的其他元素一样。认真地说,你还有什么可犹豫的?


Step 01 第一步

新建60px * 60px艺术板
Start by firing up Sketch and creating a new project with a 60px by 60px artboard. This will contain the icon we’re going to create.

第一步,打开Sketch,新建项目,新建60px 60px的艺术板。我们就在这里制作图标。

Step 02 第二步

图标的基本组成图形
Our icon represents a collection of files for someone to download. It includes three objects — two photos and a document, all of which derive their shape from rectangles. First, insert rectangles for each of the objects using the R keyboard shortcut. Then give the shapes a fill colour of white and a 1px blue border.

我们的图标表示可供用户下载的一组文件。它包括三个对象,两个照片和一个文档,都是长方形的。首先,为每个对象插入一个长方形,可以使用快捷键R。然后用白色进行填充再加上1px的蓝色边框。

The border should be centred as opposed to inside or outside the shape, as the current version of SVG only supports centered borders (or ‘strokes’ as they’re called). In the future, SVG 2 will support all three border types.

边框应该居中,不要放在图形的内部或外部,因为SVG的最新版本只支持居中边框(也可以叫“笔画”)。将来SVG2会支持所有三种边框。

Step 03 第三步

添加细节
To create the triangular fold in the corner of the document, insert another rectangle (12px square) with the same blue border, but no fill colour. After positioning it at the top-right corner of the large document rectangle, enter Edit mode to reveal the vector points. Click on the upper-right vector point, then hit delete to remove it.

要给“文档”图形的右上角加一个三角折角,得先插入一个12px的正方形,用同样的蓝色边框,但是没有填充颜色。然后将正方形放在“文档”图形的右上角。选择编辑模式这样就可以看到矢量点。点击右上角的矢量点,再按删除键把它删掉。

Step 04 第四步

折个角
We’ll do a similar thing on the large rectangle now. Select that shape and enter Edit mode, then make sure ‘Round to Full Pixel Edges’ has been selected in the Inspector. Add a vector point on the top and right sides of the shape by clicking on the borderlines.

下面对“文档”图形做相同的操作。选择图形并进入编辑模式,在检查器中勾选’Round to Full Pixel Edges’。点击边框线给图形的上边和右边添加矢量点。

All points should be straight (not one of the curved options with Bézier handles). Position these new points 12px from the top-right corner, so they line up with the triangular fold. Delete the top-right corner point.

所有的点应该排成直线(贝塞尔曲线柄除外)。新矢量点要距离右上角12px,这样就可以和三角折角在一条线上。最后删除右上角的矢量点。

Step 05 第五步

使用剪刀工具
Click on the triangular fold shape, then use the Scissors tool (Layer > Paths > Scissors) to remove the 45-degree angled side. For more on the Scissors tool, see this article.

点击三角折角图形,使用剪刀工具(图层 > 路径 > 剪刀)移除45度角的斜边。若要进一步了解剪刀工具,请参阅这篇文章

Step 06 第六步

给文档加几行字
Insert several 1px-tall rectangles to represent lines of text on the document. I used varying widths to mimic the look of left-justified text.

在“文档”图形上插入几个1px高(纵向)的长方形来表示文档中的文字。这些长方形的宽度(横向)不一,可以模拟左对齐文本的样子。

Step 07 第七步

处理边框
Notice how in the final icon design each object has some white space around it? Normally we could achieve that by adding a thick white border below the blue one on each object’s base shape.

不知你注意到没有,最终的图标成品中每个对象周围都有留白。通常我们给每个对象的基本图形的蓝色边框下面再加个厚点儿的白色边框就成了。

However, SVG only supports a single border per layer (until SVG 2), so instead we’ll duplicate each object’s base shape, then change the border on the bottom-most shapes to 4px white. Group each photo layer with its white background, and group all document layers together.

但是最新版的SVG只允许每个图层有一个边框(SVG2没有此限),所以我们要把每个对象的基本图形复制一遍,然后将最底层的图形修改成4px的白色边框。将每个照片的图层及其白色背景分为一组,再将所有的文档的图层分为一组。

Step 08 第八步

给图层起名字
Title all of your layers. This is actually an important step, as it affects the SVG we’re going to export. Sketch will use the name of each layer to give it an ID, and therefore each layer requires a unique name, and ideally one using hyphens instead of spaces (or in camelCase).

给所有图层都起个名字。这一步至关重要,因为会影响我们要导出的SVG文件。Sketch会用每个图层的名字来分配ID,所以每个图层都要有唯一的名字,而且最好用连字符代替空格(要么就采用驼峰风格)。

Step 09 第九步

摆放并旋转图形组
Position and rotate the groups to your liking. Then use Sketch’s ‘Show Pixels’ feature (ctrl+P) to assess the clarity of the icon. Because we’re rotating shapes with such thin borders, they’ll never align perfectly with the pixel grid, but I like to fiddle with the positioning values in the Inspector so that the rotated shapes appear as crisp as possible. Full integers or half-pixel X and Y values are a great place to start.

按照自己喜好摆放并旋转图形组。用Sketch的“显示像素”功能(快捷键ctrl+P)来评估图标的清晰度。因为我们旋转了边框非常细的图形,所以它们不可能完美对应到像素格上。我喜欢用检查器微调定位值,让被旋转的图形尽可能的清晰。不妨从整数或者半个像素的X和Y值开始尝试。

Step 10 第十步

为悬浮状态定义外观
To design how the icon will appear during a hover state, simply duplicate the icon’s artboard and arrange the objects so they are closer together and have slightly different rotations. Write down each object’s rotation values for the normal (inactive) state and its hover state — we’ll need those later.

要设计图标在悬浮状态下的外观,只需要复制图标的艺术板,然后重新布局一下对象让它们挨得更紧一点,旋转角度稍微变化一点就好了。记下每个对象在正常(未激活)状态和在悬浮状态下的旋转值,留备后用。

Step 11 第十一步

准备导出图标
We’ve designed the icon, now it’s time to prep it for export. Start by duplicating both the inactive and hover state artboards, then selecting each group and resetting the rotation values to 0 degrees. We’re going to recreate those rotations with CSS later, using the values we wrote down.

设计完图标后就要准备将其导出了。首先将正常状态和悬浮状态的艺术板各自复制一份,然后选中每一个图形组,将其旋转值设为0度。我们稍后会用CSS做出旋转来。就用上一步最后记下的旋转值。

Step 12 第十二步

记录X和Y值
Looking at the X and Y values in the Inspector, calculate the difference between each object’s inactive and hover state X, Y positions (how far the group moves in the X and Y directions between the two states). Write those numbers down.

用检查器看下X值和Y值,计算一下每个对象在正常状态和悬浮状态下X坐标和Y坐标的差值(也就是图形组在两种状态下X和Y方向上的移动值)。记下这些值。

Step 13 第十三步

取消分组
Of the two artboards with 0-degree rotation layers, duplicate the inactive state artboard. Select each group in the Layers list and ungroup them. We’ll re-create those groups using SVG markup in a far more lightweight way than Sketch defaults to.

在有零旋转度的图层的两个艺术板中,复制正常状态下的那个。在图层列表中选中所有的图形组,然后取消分组。我们稍后会用SVG标记(markup)重建分组,这种分组方法比Sketch默认的方法要轻盈许多。

Step 14 第十四步

导出文件
Click on the artboard’s title in the Canvas or Layers list, and click the ‘Make Exportable’ button in the lower-right corner of the Inspector. Select ‘SVG’ and export the file.

在画布或图层列表点击艺术板的标题,然后在检查器右侧偏下方角落找到“准备导出”按钮并点击。旋转“SVG”然后导出文件。

Step 15 第十五步

清理文件
Now it’s time to clean up our SVG file. Under the hood, SVG uses the same kind of markup as HTML, so any web developer will be right at home. Opening the SVG in your preferred code editor, you’ll notice a lot of extraneous markup. I often remove the <g> containers associated with the Sketch file’s page and artboard, shorten long decimal values to the hundredth place, and remove Sketch’s custom attributes.

是时候清理SVG文件了。SVG背后使用的标记语言和HTML相同,这对web开发者并不陌生。用文本编辑器打开SVG就会发现许多无关的标记。我通常会删除和Sketch文件的页面及艺术板相关的<g>容器,将过长的十进制值截断到百位,然后删除Sketch自定义的属性。

I suggest copying/pasting all of the SVG markup into a CodePen as HTML, so you can remove superfluous attributes and elements while being sure the result doesn’t change. How much you clean up the markup is up to you, but the more you do, the easier it will be to read, and the smaller the file size will be.

我建议把所有的SVG标记当成HTML复制粘贴到CodePen,这样可以方便的删除多于的属性和元素而不必担心对结果造成影响。清理到什么程度看你的习惯,但是清理得越彻底,SVG就更易读,而且文件大小会更小。

Step 16 第十六步

给对象重建分组
Now we’ll recreate the groups for each object (photo-1, photo-2, document) by wrapping the appropriate elements with <g>…</g> tags, just as you’re used to doing with <div>…</div> in HTML. Assign a class to each of the groups, for example: <g class=”document-container”>.

现在我们为每个对象(照片-1号,照片-2号,文档)重建分组,方法很简单,将合适的元素用<g>和</g>标签括住就好了,就像在HTML中使用<div>和</div>一样。给每个分组都指定一个类,比如:<g class=”document-container”>。

Step 17 第十七步

创建CSS声明
Enough prep work; it’s time to bring the icon to life! Use the classes you assigned to each group to create a declaration in CSS. Referencing the inactive state rotation values you wrote down, recreate the rotation on each group using transform: rotate(__deg) and transform-origin: center center;.

准备工作做得差不多了,下面该让图标动起来了!用上一步给每个分组指定的类来创建CSS声明。利用刚才记下的正常状态下的旋转值,用CSS变换重建每个分组的旋转:rotate(__deg)和transform-origin: center center;。

Normally the transform and transition properties require vendor prefixes, but when playing around in CodePen, you can lean on one of the automatic vendor prefixing options accessible through the pen’s settings.

通常变换和过渡属性都需要浏览器引擎前缀(Vendor Prefix),但是你可以在CodePen的设置中打开自动设置浏览器引擎前缀的选项,从而省去这个麻烦。

Note: Firefox does not support the transform- origin property on SVG elements, so rotations always revolve around the element’s top-left corner. You may consider designing a different animation without rotation transforms, specifically for Firefox.

说明:Firefox不支持SVG元素的transform- origin属性,所以旋转总是以元素的左上角为轴。或许得考虑给Firefox专门设计一种不需要旋转变换的动画效果。

Step 18 第十八步

添加过渡属性
Add a transition property to each object’s declaration (for example: transition: all .4s ease;). This allows the objects to animate when we change their styling on hover.

给每个对象的声明都添加过渡属性,比如:transition: all .4s ease;。这样对象可以在我们改变其悬浮风格时产生动画效果。

Step 19 第十九步

声明悬浮状态
Now let’s create the CSS declarations for each object in its hover state. If you’re adding this icon to a larger button — as I have in the example CodePen — you’ll want the :hover pseudo-selector to be attached to the button rather than the icon.

接下来为每个对象的悬浮状态创建CSS声明。若要将这个图标放在一个更大的按钮上,比如 这个链接 中的例子,就要把:hover pseudo-selector附在按钮上,而不是图标。

If you’re constructing the icon independently, attach the :hover to the SVG icon itself. Your declaration should look something like: .attachments- button:hover .document-icon {} or .attachments-icon:hover .document-icon {}.

如果要单独构建图标,就把:hover附在SVG图标上。声明应该写成:.attachments- button:hover .document-icon {}或者.attachments-icon:hover .document-icon {}.

Step 20 第二十步

拼起来
This is when the magic happens. Referencing the values you wrote down for how much the objects move and rotate in their hover state, recreate those using CSS transforms like we did before with the inactive states. The transform property can accept multiple functions (separated by a space), so we’ll use translate(x,y) to move the groups and rotate(_deg) to rotate them. There are some important considerations as you write the CSS.

下面是见证奇迹的时刻。参考刚才记下的对象在变换到悬浮状态时的移动值,用CSS变换将其重现。变换属性可以接受多个函数(用空格分隔),也就可以同时使用translate(x,y)和rotate(_deg)实现移动和旋转。在写CSS时有几个要点需要考虑。

First, don’t forget to write px after your X and Y values. Second, the order of transform functions will affect the result — here translate must come before rotate. Third, the differences in each group’s X and Y positions (which you wrote down) may need to become positive or negative when using the translate function. Negative X values will move it left, and negative Y values will move it up. Lastly, you will need to tweak the rotation values you wrote down — negative rotate values in Sketch become positive when using CSS transforms, and vice versa.

第一,不要忘了在X,Y值后面写上px。第二,变换函数的顺序会影响到最终结果。第三,使用变换函数时每个图形组的X和Y坐标的差值(之前记下的)需要写成正数或负数的形式。负X值将图形组左移而负Y值将图形组上移。第四,要对旋转值稍作修改,Sketch中的负旋转值在使用CSS变换时应该写成正的,反之亦然。

After you’re finished tweaking the transform values, you’re finished! The icon is ready to delight visitors on your website.

修改完变换值就大功告成了!你设计的图标已经准备好给访客惊喜了。

Words: Peter Nowell

文字:Peter Nowell

Peter Nowell designs apps, websites, books, brand identities and more. He’s based in San Francisco. This article originally appeared in issue 270 of net magazine.

Peter Nowell设计App、网站、图书和商标标识等等。他生活在旧金山。本文最初发表在net杂志第270期。

Like what you read? Give kissofeternal a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.