用Sketch和PaintCode快速得到绘制代码

作者：codeGlider 授权本站转载。

在我的上一篇文章中 swift10分钟实现炫酷的导航控制器跳转动画,有一个swift logo的形状



上一篇文章的动画

我说的就是中间用来做遮罩的形状。

它不是图片是用一段代码绘制而成的:

看起来很可怕是不是，但是其实你并不需要写任何一行代码，这些代码都是自动生成的！听起来很酷对不对？那么接下来我就教你怎么去做，然后怎么将它在ios程序中显示出来

准备工作

首先你需要下载两个软件

Sketch

一个轻量级的UI矢量设计软件，可以说是当今最热门的UI设计软件，界面简洁，工具不多但是可以完成大部分的UI设计工作，可以说是苹果开发者必备的工具。

推荐一个Sketch的学习网站:

Sketch中文网

还有学习UI设计的网站:

UI中国

下载地址:

官方试用版下载

Paincode2

一个可以将矢量图形转换为OC/swift绘制代码的软件,当然它还有许多神奇的用法比如变量、动态颜色之类的，但是这个软件目前国内教程非常少，今后我可能会写关于它的文章。

官方试用版下载

由于只有2小时的试用时长，比较坑，所以我还是提供一下破解版的下载地址:

破解版下载地址

然后你还需要一张swift的图标来作为临摹对象:



绘制swift矢量图形

首先打开刚才下载的Sketch



欢迎界面

点击ok创建一个新的文件。



步骤1

将事先准备好的logo拖进文件,选择vector工具(其实这个工具类似于ps里的钢笔工具)



步骤2

用鼠标逐个点击各个顶点，最后连成成一个完整的形状



步骤3

点击顶点之间的部分，增加锚点，通过点击+拖拽形成曲线，然后调整锚点的两个把手，使得曲线尽量贴合图形。



步骤4

选中曲线,确保Size中间的锁保持锁定状态,将曲线缩放到100见方的大小,不需要很精确



步骤4

将曲线导出为svg文件

现在Sketch的工作就已经完成了

导出图形的绘制代码

轮到我们的Paintcode干活了~

新建文件，选择导出swift代码，将刚才导出的svg文件拖进窗口中，然后代码就自动生成出来~



步骤5

我们需要的代码就是最后选中的那些代码

在ios程序中显示出swiftlogo

打开Xcode，File/New/Project...，就选择最简单的Single View Application就可以了，名字随便起。

新建之后新建一个空的swift文件（File/New/File/Swift File）,写下如下代码，创建一个类：

添加刚才生成的代码，替换注释内容:

将图层的形状变成代码所绘制的形状

确定图层的大小,下面这个函数会把我们的形状用一个矩形起来，这个矩形就是图层的大小

打开ViewController.swift

添加一个图层常量，调用刚才创建的类中的方法

在viewDidLoad()方法中添加以下代码:

将背景设置为灰色

将logo图层居中

修改logo填充色为白色

将logo图层添加到主视图的图层中

如果没有任何错误，点击运行

应该会出现如下图所示效果:



运行结果

该教程所有的资源都在我的github上面，包括用来临摹的logo，Sketch文件，导出的svg文件，还有最后的ios demo~

github托管地址

转自http://www.cocoachina.com/ios/20150901/13155.html