安装


下载并解压 Anima Tookit.zip
下载地址:https://pan.baidu.com/s/16AHHBpfA1qt7jse2jDtkvg


使用


1.执行 Plugins > Anima Tookit > Show/Hide Panel 或使用快捷键 command ⌘ + control ⌃ + A 开启面板(Anima Tookit 安装后重启 Sketch 默认自动开启面板)
2.选择面板最右侧 Timeline 模块
3.选择一个画板或组,点击 Animate Selection 创建关键帧动画,新用户提供 14 天试用

timeline-1@2x.jpg


什么是 Timeline?


直接在 Sketch 中创建漂亮基于时间轴的动画 GIF 和视频


timeline-2.gif



关键帧


关键帧是包含所有图层的画布。
关键帧可以从 Sketch 画板 或 组 创建
存在于其中的所有图层 初始关键帧 将存在于其它图层 关键帧 中
不能在两者之间添加或删除图层 关键帧,但可以显示和隐藏图层
可以有任意数量的 关键帧,但是要创建一个动画至少需要一个 初始关键帧



初始化关键帧


初始关键帧 是动画的起点,意味着所有图层都位于 Sketch 文档中
无法更改 初始关键帧 图层的大小,位置或其它所有属性
要设置图层动画或调整大小,必须创建另一个 关键帧


timeline-3.jpg


timeline-4.jpg



关键帧边栏


关键帧边栏 是所有 关键帧 的列表
在每个 关键帧 可以查看和选择的所有子图层和组 关键帧
所有 关键帧 包含完全相同的图层
这与 Sketch 文档中存在的相同
在每个 关键帧 (除了 初始关键帧)可以显示 / 隐藏图层并更改它们的属性,这将影响动画效果


timeline-5.jpg


timeline-6.jpg



转场


转场 是两个动画之间的过渡 关键帧
每个转场都包含一个或多个包含不同层的小动画 关键帧


timeline-7.jpg




图层


输入时间轴时 Sketch 画板或组中的每个图层都将转换为图像
图像的格式可以是 PNG,JPG 或 SVG,如在 Sketch 的可输出的面板中选择(默认 PNG)
每层 关键帧(除 初始关键帧)都可以移动图层、调整大小、旋转、隐藏或显示图层


timeline-8.jpg



位置


timeline-9.gif




调整大小


timeline-10.gif



旋转


timeline-11.gif



不透明度


timeline-12.gif



时间线


每一个层都可以有自己的 时间线
要 Timeline 为图层创建一个 时间线,只需改变画板内图层的属性,屏幕底部就会出现一条蓝线
通过移动和拉伸 时间线 可确定特定动画的延迟、持续时间和曲线


timeline-13.jpg


延迟


timeline-14.gif



持续时间


timeline-15.gif


曲线


timeline-16.gif


式例


timeline-17.gif



基本信息

收录版本 0.14.2
更新时间 2018-5-17
更新内容 适配 Sketch 50.x

edfa7d0b8bb39bbc94af729561bbda23.png


亲!小编正在上传资源中,请稍等。

文章来源:UI酷设计

关注UI酷设计公众号

领取100+交互体验pdf电子书