
在用Sketch做UI界面过程中,我们用的图片一般都是png、jpg、svg等静态图片,偶尔把gif图放入界面中,也会被软件当成jpg图片来展示。
想象一下,在Sketch中显示动态gif图会是什么样呢?

今天就教大家这个值得炫耀的技能。以后就可以直接在Sketch源文件中展示动态效果了。
看完本文你将解决以下问题
- 在Sketch中显示gif动图
Homebrew
首先我们需要安装Homebrew这个东西。Homebrew是以最简单,最灵活的方式来安装苹果公司在MacOS中不包含的UNIX工具——出自官方解释。 超出我们理解范围了,先安装吧。
安装步骤1-打开终端
就是这个程序

安装步骤2-安装Homebrew
复制以下代码-粘贴-回车
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
之后需要输入自己的电脑密码。注意,输入密码,终端是不会有任何显示的,这是电脑的保密措施不用在意,然后就会自动开始下载,时间根据网络而定,如果无法下载,可能需要翻墙了,一般国内网络就可以。当出现Installation successful! 时即为安装成功。

安装步骤3-安装ffmpeg
继续复制以下代码到终端中回车,完成最后的组件安装。
很多同学最后无法显示动图就是因为没有这一步。
brew install ffmpeg

下载和安装Gif.me插件
接下来就很简单了,点击下载最新版的插件,然后安装即可。
https://github.com/kannonboy/sketch-gifme-plugin/releases
插入动图
先下载一个gif图,然后在Sketch中画一个形状,选中,点击Gif.me插件,选择刚下载的gif图,ok,图片在Sketch中动起来了!

总结
这个技能在实际工作中用的不多,但有时候想要看动图在界面中的效果,还是可以试一试的。
《 “让设计稿动起来,Sketch显示gif动图” 》 有 5 条评论
没有mac表示很伤心。
😐 装个虚拟机吧,后面我会写个简单的虚拟机教程,不过是专门给设计师看的,你是专业人士,这个对你来说很简单的 ❗
我的虚拟机运行比较慢 还是想买台苹果笔记本 配置能推荐下吗?
我安装的虚拟机运行不是很快,我也想买台苹果笔记本电脑,配置有啥推荐吗?
你用的是PC安装Mac的虚拟机吧,如果买MacBook的话,配置需要根据你的需求来定。
如果资金不充足的话,可以考虑下面的配置:
1、不用买最新版的,也不用买带touchbar的,用老款的Macbook Pro 视网膜屏就足够了。
2、硬盘建议用128G的,没必要太大,为了降低成本,可以买个好点的固态移动硬盘。
3、Apple官网都是最新的,没必要,可以到京东天猫销售最多的店买。
如果你不介意二手的话,可以用二手的Macbook,尺寸可以是15寸的。
当然,如果你不差钱,就直接买最贵的~ 😛