用 Sketch 做一个动画：AnimateMate

Sketch 可以方便处理日常的设计工作，那么能不能在 Sketch 中将做好的设计，做出动画效果呢？今天介绍的这个 Sketch Plugin 就可以帮我们在 Sketch 中做出动画。

安装

1. 下载并解压：AnimateMate-master.zip
   
2. 双击 AnimateMate.sketchplugin 完成安装
   

PS，也可以使用第三方 Plugin 管理工具安装，安装方法可以参考 从 Sketch 45 版本发布，聊一聊 Plugin 的管理。

使用方法

1. 在 Sketch 中创建 Artboard 并绘制想要进行动画的元素
   
2. 选中要设置动画的图层后执行「Plugins - AnimateMate - Creat Animation」或者使用快捷键 ⌃Control - ⌥Option - ⌘Command - K
   
3. 在弹出的对话框中对动画属性进行设置
   
4. 动画设置完成后，执行「Plugins - AnimateMate - Export Animation」或者使用快捷键 ⌃Control - ⌥Option - ⌘Command - A 将动画导出
   

 示例

创建基础动画

1. 新建一个 Artboard，并绘制一个方形。

2. 选中该圆形，执行「Plugins - AnimateMate - Creat Animation」或者使用快捷键 ⌃Control - ⌥Option - ⌘Command - K，在弹出的对话框中，设置 Keyframe Number（关键帧序号）和 Easing Type（动画曲线类型）。

3. 改变图形属性，例如大小，位置，旋转等，再次执行「Plugins - AnimateMate - Creat Animation」或者使用快捷键 ⌃Control - ⌥Option - ⌘Command - K，设置新的  Keyframe Number 和 Easing Type。

4. 都创建完成后，选中 Artboard，执行「Plugins - AnimateMate - Export Animation」或者使用快捷键 ⌃Control - ⌥Option - ⌘Command - A，在弹出的对话框中，设置导出配置，将动画导出即可。

通过导出的 Gif 文件，我们就可以看到我们刚才在 Sketch 中完成的动画效果了。

创建延迟动画

除了刚才的基础动画，我们还可以将我们所设置的动画效果进行延迟处理，可以做出不同元素依次进行动画的效果。

1. 新建一个 Artboard，并绘制一排圆形

2. 选中所有圆形，然后执行「Plugins - AnimateMate - Creat Animation」或者使用快捷键 ⌃Control - ⌥Option - ⌘Command - K，设置动画。

3. 将圆形移动位置，然后执行「Plugins - AnimateMate - Creat Animation」或者使用快捷键 ⌃Control - ⌥Option - ⌘Command - K，设置动画。

4. 将圆形移动到初始位置，然后再次执行「Plugins - AnimateMate - Creat Animation」或者使用快捷键 ⌃Control - ⌥Option - ⌘Command - K，设置动画。

5. 选中所有圆形，然后执行「Plugins - AnimateMate - Offset Animation」或者使用快捷键 ⌃Control - ⌥Option - ⌘Command - O，在弹出的对话框中，设置动画的延迟属性。

 6. 选中 Artboard，执行「Plugins - AnimateMate - Export Animation」或者使用快捷键 ⌃Control - ⌥Option - ⌘Command - A，将动画导出。

总结

通过这个 Plugin 我们就可以在 Sketch 中制作动画了，但是目前这个 Plugin 的功能还不够完善，并不能完成图形颜色、形状的属性的动画制作，希望在以后的版本中，能够提供更加完善的动画制作功能。

（题图使用 AnimateMate 设计而成）