最近学习 Material Design 文档的时候，发现里面有很多酷炫的交互动画。比如：
新田网站制作公司哪家好，找
创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。
创新互联成立于2013年到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选
创新互联。
Material casts shadows
于是 Google 了一下做交互动画的方法，最酷炫的是 Adobe After Effects. 感觉各种高大上，好想学，但觉的现在还用不上这么专业的软件[不能效率化]，就接着搜有没有便捷的方法。功夫不负有心人，正好发现了 Medium 上的一篇好文 《Design in Sketch Then Animate in Keynote》.
于是模仿做了一遍，下面将经验分享如下：
最终效果Animation gif
前期准备你需要拥有以下设备和软件：
1.Mac
2.Keynote
3.Sketch ($99)
Sketch 画图试着在脑海中想象你的交互动画不同阶段的画面：
触发前（静止时的页面） 触发中（过渡的动画效果） 触发后（文字，按钮，图形的样式变化）
Sketch 制作界面时，Icon 可以从 Material Icons下载，节约时间。
由于页面比较简单，就没有重做了，直接使用的原作者的文档，结果如下。
Sketch File
Keynote 做动效新建一个文档
Create a new document
将 Keynote 画布设置成 Sketch 画布大小
Change the size of artboard
将 Sketch 中所有不同元素[合并同类项，因为 Keynote 可以使元素产生各种变化]复制至 Keynote 中，结果如下：
Copy & Paste all elements
Tips: Sketch 中选中元素按住 Alt 键可以查看元素距离其他元素的间距，记住间距便于精确重现元素位置于 Keynote 中。
控制按钮先大后小，形成启动感。
Size the button
消除 Email 图标
Dissolve email icon
放大并移动 Button 形成背景
Scale & Move button
显示内容
Show the content
缩小并移动文字，同时显示装饰线条
Scale & Move words while show decorated line
隐藏所有文字和线条
Paste_Image.png
缩小并移动按钮至原样
Scale & Move the button to original state
按钮放大再缩小，形成停止感
Size the button
显示完成图标
Paste_Image.png
Done, you made it, congratulations!
经验动效的 Duration, 小动效在 0.2s-0.35s 之间，大动效在 0.55s-0.75之间。 反复调整，直到满意。 动效间的Delay。需要吸引人注意力的地方加点延迟。同类元素的动效之间加点延迟。元素消失后的动效加点延迟。反复调整，直到满意。 运动类动效启动时采用 ease-in, 停止时采用 ease-out，限制时采用 ease-both. 符合人对运动的感觉，起跑时先慢后快，结束时先快后慢。
不足不会命名 Keynote 元素，从 Sketch 拷贝过来的元素都是一个名字。元素多了以后很难辨认，请会的朋友教我下。
Keynote 动效多了以后，反复添加很麻烦[不知道有没有类似格式刷的功能]，给已有动效的元素再添加动效也麻烦[show->add->move]，还需要调整其 order [默认 order 是紧挨在原有动效之下].
文件下载Sketch File [Passcode:v5s1]
Keynote File [Passcode:3bd7]
分享名称：还在用AE做动效?Keynote才是真的动效神器
网站路径：
http://cdkjz.cn/article/chdspd.html
