PaintCode工具

PaintCode工具

Posted by WTJ on March 20, 2018

前言

PaintCode是个非常棒又小而美的mac程序,主要用途是可以将你的矢量图轻松地转换成CoreGraphics代码,可以很轻松的把代码放在你的iOS app里。

对于移动端来讲,给用户良好的用户体验,动画效果是非常必不可少的,loading加载动画,过场动画,提示动画等等,都是我们增加用户体验的手段,但是如果我们通过编写代码去提供动画效果,那必然是一个恶果,所以大多数初创团队,在开发APP的时候,时间比较仓促,需要短时间内出效果,通常用图片来提供。

PaintCod此时的出现,能帮我们减轻计算的繁琐,节省用代码开发动画的时间, 降低了图片的使用率,app容量大大减小,而且做动效也容易了很多。是不是感觉太幸福了!!!

那接下来一起走进PaintCod吧!

SVG

在运用PaintCode之前呢,我们需要先获取一张SVG格式的文件。

SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C("World Wide Web ConSortium" 即 " 国际互联网标准组织")在2000年8月制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。

1、如果按照UI的设计作图,你就找你的UI出一个SVG文件,可以像PaintCode让Logo飞出屏幕中讲的通过Sketch自己导出一张SVG格式的图片,一般公司都支持Sketch导图,非常方便!

2、如果你只想玩玩快速看一下成果你可以到iconfount自己搜索然后自己下载下来!

3、你也可以像PaintCode 教程:矢量图轻松转换成CoreGraphics代码中讲的自己直接用PaintCode构建类图。

PaintCode

当然你要先到这里PaintCode下载,不过你可能要先翻墙一下,然后可以免费试用5天玩玩。

PaintCode的用法很简单,直接将上面保存的SVG图片扔给他就好了,他会自动生成代码,包括swift和oc,直接将生成的代码复制即可。图片如下:

看到没,直接生成代码哎,而且是直接可以用的哦,还可以直接导出文件,OC代码生成.h和.m两个文件。然后你在你新建View,倒入.h文件,直接在 -(void)drawRect:(CGRect)rect方法里调用.h文件的Class方法就可以了。

是不是感觉突然幸福了很多,是不是突然感觉自己的逼格升上来了!然后你就拿着这两个文件浪起来吧!

如果感觉不错的话,那你就开始掏钱199美元购买吧!哈哈哈!

感谢:

​ 1、PaintCode 教程:矢量图轻松转换成CoreGraphics代码

​ 2、PaintCode让Logo飞出屏幕

​ 3、iconfount

​ 4、PaintCode