还在用AE做动效?Keynote才是真的动效神器

最近学习 Material Design 文档的时候，发现里面有很多酷炫的交互动画。比如：

于是 Google 了一下做交互动画的方法，最酷炫的是 Adobe After Effects. 感觉各种高大上，好想学，但觉的现在还用不上这么专业的软件[不能效率最大化]，就接着搜有没有便捷的方法。功夫不负有心人，正好发现了 Medium 上的一篇好文 《Design in Sketch Then Animate in Keynote》.

于是模仿做了一遍，下面将经验分享如下：

你需要拥有以下设备和软件：

1.Mac

2.Keynote

3.Sketch ($99)

试着在脑海中想象你的交互动画不同阶段的画面：

Sketch 制作界面时，Icon 可以从 Material Icons下载，节约时间。

由于页面比较简单，就没有重做了，直接使用的原作者的文档，结果如下。

新建一个文档

将 Keynote 画布设置成 Sketch 画布大小

将 Sketch 中所有不同元素[合并同类项，因为 Keynote 可以使元素产生各种变化]复制至 Keynote 中，结果如下：

Tips: Sketch 中选中元素按住 Alt 键可以查看元素距离其他元素的间距，记住间距便于精确重现元素位置于 Keynote 中。

控制按钮先大后小，形成启动感。

消除 Email 图标

放大并移动 Button 形成背景

显示内容

缩小并移动文字，同时显示装饰线条

隐藏所有文字和线条

缩小并移动按钮至原样

按钮放大再缩小，形成停止感

显示完成图标

Done, you made it, congratulations!

不会命名 Keynote 元素，从 Sketch 拷贝过来的元素都是一个名字。元素多了以后很难辨认，请会的朋友教我下。

Keynote 动效多了以后，反复添加很麻烦[不知道有没有类似格式刷的功能]，给已有动效的元素再添加动效也麻烦[show->add->move]，还需要调整其 order [默认 order 是紧挨在原有动效之下].

Sketch File [Passcode:v5s1]

Keynote File [Passcode:3bd7]

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!