码迷,mamicode.com
首页 > 其他好文 > 详细

很棒的Sketch动画教程

时间:2015-09-01 10:22:53      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:

 

就像别人可以用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

很棒的Sketch动画教程

标签:

原文地址:http://www.cnblogs.com/tttry/p/4774941.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!