首页 > Mac下载 > 软件教程 > “不误正业”的sketch-2 动画GIF
编辑：守望者    发布日期：2020-10-28 00:00:00

又是sketch的“不误正业”系列，上一篇我们介绍了用sketch画插画，包括一键转手绘效果，渐变优化等，感兴趣的小伙伴可以通过传送门直达《“不误正业”的sketch-1 插画绘制》

今天我们来讲怎么在sketch里做简单的动画，包括：

1.一键导出并压缩切图

2.导出GIF

3.制作位移动画

4.制作路径动画

同样，文中用到的所有插件，文末我为大家准备了资源包，小伙伴们需要的请自取哦~

 

1.一键导出并压缩切图

插件：
Sketch Image Compressor→压缩JPG\PNG
插件：
SVGO Compressor→压缩SVG
☆技能点：sketch一键导出切图并压缩！
通常因为网速和资源的限制，我们切好图后，还需要压缩一下才能交付给开发，之前我都是用tinypng。就是这个熊猫崽崽的网站，相信大家都很熟悉吧。
但是这个网站免费版只支持最多20张图，且不能超过5MB，当我们需要压缩很多图片的时候，就只能分批上传了。现在有了这两个插件，在切图导出的时候，不需要其他选择和操作，就会自动压缩了哦，是不是很方便呢。
在文档下方可以看到一个toast提示，是压缩的进程和大小数据。
终于不用在一次次分批上传和解压了，效率提升嗖嗖哒！赶紧使用起来吧。自从有了这个插件，我就告别了其他压缩软件，有需要压缩的图都直接拖到sketch里压缩~
 

2.导出GIF

插件：Export More
☆技能点：sketch直接导出GIF图
有了Export More，sketch也能做GIF图啦，只需我们把每帧的画板按序列命名（如xx01、xx02、xx03……）然后全选画板，运行插件，选择导出GIF，就存好啦。
弹出的对话框中，可以选择是否循环播放，以及是否延迟。
学会这个技能，从此再也不用担心前端小哥哥要求提供GIF了~ 当然你也有可能走上自制表情包的道路（不务正业实锤）……
 

3.制作位移动画

插件：Diya
☆技能点：位移动画、页面跳转
一般如果不用Diya，正常流程的话是把文件导入principle里再做动画。
Diya和principle相比有两点优势：
  1. 不用导入导出，不用整理文件Diya直接在sketch源文件完成动画，
  2. 可以导出HTML，和Json文件
  Diya导出的HTML，方便我们分享带交互的动画原型，而且直接在在浏览器中查看，查看人不需要额外下载安装软件。
使用起来也很容易上手，和principle的操作界面基本相似，除了导出HTML，同样也支持动画录制，而且它还有一个独家的慢放功能，方便我们仔细查看动画过程。一般简单的动画我都直接在sketch里直接用Diya做了，懒人福音。
 

4.小拓展-路径动画

插件：Diya（没错还是它）
☆技能点：位移动画、页面跳转
什么！sketch里还能做路径动画↓↓↓
其实很简单，只需要把第一个圆的路径设置成虚线，间隔加大到只能看到一个点，然后和上面一样创建动画，预览的时候就能生成路径动画啦，是不是很简单呢~
继上篇sketch插画绘制后，这次sketch又能做动画啦。大家都用sketch做过什么“不误正业”的事情呢，欢迎小伙伴们留言分享哦~不被传统定义所限，一起来发现更多可能吧！
上篇传送门：《“不误正业”的sketch-1 插画绘制》
 

划重点

这次的重点依然是链接！
【压缩&导出gif&动画-插件】
链接：
提取码: invf 
 
 
 
Sketch Mac版
Sketch Mac版 SketchMac版是Mac上一个创新和新的眼光看待矢量绘图软件。SketchMac版以简约的设计是基于无限的规模和层次的绘图空间，免费调色板，面板，菜单，窗口和控件。虽然使用简单，它提供了功能强大的矢量绘图和文字工具;您可以免费下载。 简体 · 53.00 MBM ·

热点资讯

更多
英特尔正与台积电接洽，虑将部分芯片生产外包给台积电
英特尔正与台积电接洽，虑将部分芯片生产外包给台积电 外媒报道称，英特尔正在与全球最大的芯片制造商台积电（TSMC）接洽，准备将自己的芯片制造业务外包出去。
苹果iPhone 12国行上季度热卖：拿下20%份额 销量达1800万
苹果iPhone 12国行上季度热卖：拿下20%份额 销量达1800万 根据外媒报道，上季度中国大陆地区iPhone 12销量达到1800万，苹果拿下20%智能手机市场份额。
高通斥资约90亿收购芯片公司NUVIA 前苹果芯片架构大神加盟
高通斥资约90亿收购芯片公司NUVIA 前苹果芯片架构大神加盟 据外媒报道，高通公司1月13日以14亿美元收购芯片初创公司Nuvia。
大公司晨读：B站计划3月港股上市；苹果斥资1亿美元力促种族平等
大公司晨读：B站计划3月港股上市；苹果斥资1亿美元力促种族平等 B站确定已在港提交上市申请；英特尔CEO 斯旺将于2月15日辞职。

相关教程

更多
Sketch一键导入AE工具–AEUX
Sketch一键导入AE工具–AEUX 发现了一款非常好用的插件，它的前身是Sketch2AE，花了一点时间研究了它的使用方法，好东西当然要大家一起分享！目前没找到汉化版，不过功能也不是特别复杂，分享出来是希望能提高大家平时在设计中的效率，如果有说的不对的地方还请帮我指正一下，谢谢~~   先简单看一下基本功能   一、基本功能 （一）一键复制所有图层到AE 1.装好插件后，打开sketch，选择 插件>AEUX，打开插件面板，再启
超全面的sketch基础知识汇总，带你入门
超全面的sketch基础知识汇总，带你入门 刚接触sketch这款软件的时候，针对最基础的知识点做了非常全面的笔记，方便日后查看，今天拿出来分享给大家，希望能够给刚接触这款软件的设计师朋友些许的帮助！ 这是我在刚接触sketch的时候做的超全面的笔记，今天分享大家。（公众号“UI充能站”出品，搜索i-lifeway进站）   目录 · Sketch中画布的概念 · sketch中的快捷键 · view基础操作 · 形状之间的布尔运算 · 设置页面元素放大缩小
【神器推荐】教你Sketch一键转成PSD!
【神器推荐】教你Sketch一键转成PSD! 现在大部分的UI设计师们都是在用sketch设计页面，它的轻量、插件、组件是能够极大提升我们的设计效率。但是，有一个致命问题就是，sketch和adobe爸爸家的软件不兼容，因此，不同软件的文件如何转换就是问题了……   神器网址 这里推荐一个神奇的网站：https://www.photopea.com/ 这个网站可以帮助我们把sketch转PSD。 之前用过的朋友会发现：当我们直接使用它转换时，中文字体会直接变成口口口（
sketch秘技：如何利用symbol一秒更换配色
sketch秘技：如何利用symbol一秒更换配色 首先看个见者伤心闻者落泪的例子：假设这个是你们公司的产品，从0到1，历经千辛万苦！你终于把所有页面都做完了！   你很高兴：终于做完了~算一算调休假年假，休息一波走起！ 就在这时……，产品/老板跟你说：我们产品不用这个红色了，太俗气！换成蓝色！ 你数了数自己的83张界面……，你痛苦的摸摸自己那不再浓密的头发……，你开始一张张的改啊改啊改啊改啊...... 而隔壁公司的小明说：老板，给我1秒种，你看是不是

相关软件

更多
  • Birdfont Mac版
    Birdfont Mac版
    英文. 29.00 MBM · BirdfontMac版是Macos平台上的一款可以制作自己专有字体的软件，这款软件可以制作出自己独有风格的字体，这是一款免费的软件，你可以在这款软件上发挥出自 ...
  • Plant Mac版
    Plant Mac版
    英文. 22.00 MBM · PlantMac版是Mac电脑上的一款适用于Sketch的简单而强大的版本控制插件。PlantMac版可以帮助用户更简单、更智能地管理Sketch文件，它支持保 ...
  • Crash Course Mac版
    Crash Course Mac版
    英文. 3.00 MBM · CrashCourseMac版是Mac电脑上的一款AdobePhotoshop视频教学软件。CrashCourseMac版内含超过440个AdobePhotos ...
  • Screenshot Designer Mac版
    Screenshot Designer Mac版
    英文. 17.00 MBM · ScreenshotDesignerMac版是Mac电脑上的一款设计软件。ScreenshotDesignerMac版可以为应用开发者们创建引人入胜的AppSt ...