很棒的Sketch动画教程

 

就像别人可以用PPT做动画，而你只会用它做演示，别人可以拿ps做gif，你却只会用它p照片。软件就是这样，我们使用大多数的软件也就是了解的程度，很难算得上精通。(后面补充了小教程，想看干货的直接看后面就行～）

而Sketch也是一样。

对于Sketch中线的应用，我一直只停留在会画虚线，会改变边缘形状的程度，自以为这就算掌握了。

大神是这样做的：

AE神马的根本不用打开就实现了这类的小动画啊！太聪明了呀！

想了一下原理之后我自己还原了一下。如下图：

 

补充教程：

［准备物料］：1.一枚录屏软件（因为你要把你位图的变化过程录下来以便生成动图啊～）我用的mac自带的QuickTime Player

                       2.一枚gif生成软件（要把视频加快生成自然的gif动图呀～） 我用的GifBrewery     

                       3.Sketch

［创作思路］：准备工作做好了，我们来梳理一下要怎么实现。

其实思路就是利用线的虚线功能，如果是直线，我们可以把它按照“每段多长，每段之间的间隔距离多少”去自定义虚线，这很好理解，但是如果是圆的话，它是一个闭路，如果我们规定每段线之间的距离大于圆的周长，它就只能显示一段线，在这基础上，我们不断递增每段线的长度，看起来就是圆中的一小段线再不断加长啊！然后我们把线增长的过程录下来，加快一下不就好了吗～～

所以我的步骤是这样的：

第一步：在画板上画一个圆，我画的是一个268x268的圆

第二步：把圆加粗，我用的34像素，你们随意。

第三步：调一下渐变～我吸的大神图里的色～（我用的Sip～推荐大家吸颜色用）

第4步：打开虚线工具，然后把线的末端调圆乎点～把虚线的间隔调成比圆的周长还要大！（这步就是全部的关键所在）然后我们调节每段虚线的长度从10开始。

第5步：然后我们打开QuickTime Player新建屏幕录制，在点击开始之前请确保你的“虚线工具”在打开状态，输入框停留在修改虚线长度的部分。

第6步：接下来，你就可以调节虚线的长度慢慢递增，这里你可以观察一下，递增到多长的时候圆会变成闭合的状态。没错，你可以打开计算器用“圆的直径x3.14”大致算一下周长，是不是调节到临近圆的周长的时候它就闭合了呢（之所以是邻近周长就闭合了是因为我们选择的线的末端是“圆角“那种模式，你可以把线的末端改成默认的那种“直角”模式，就比较精确到周长了哦～）

第7步：圆闭合了之后，点击QuickTime Player的结束按钮，保存视频文件，拖到GIFBrewery里，编辑一下，导出gif文件就大功告成啦！

原帖：http://www.ui.cn/detail/58749.html