去年年初给自己立下一个目标，希望自己能在新的一年做一些新的动效。作为一名热爱动效的攻城狮，每次看到 Dribbble 上的大神上传了很酷很炫的动画，就不由羡慕起来。虽然自己也有很多想法，但受限于自己的技术和时间，最开始只能从 Dribbble 上已有的动画寻找灵感。

第一个激发我灵感的大概是当时 Path 的 Menu 动效。而真正开始做的时候，是看到这篇教授如何转变三明治按钮动画的 Blog 。这篇 Blog 主要讲了如何实现Dribbble上的三明治开关按钮。博主写的很详细，从描述按钮的线条变换开始，到如何使用 Sketch ，再到用 PaintCode 绘制线条，最后到具体的实现过程。即使如此，但作为攻城狮，要在画图工具上画出漂亮的线条，还是需要很多技巧。不过还是完成了 Dribbble 上另一个类似的动画，po到我的 Instagram 上了。

15年算是向设计和交互迈出了一小步，在几个项目里也和客户交流了怎样加入动画让 App 更流畅更易用，不单是美观性和艺术性。希望在2016步子再迈大一点。

进入正题，今年看了一些 Apple WWDC 的老视频。WWDC2014年的视频里介绍了App设计中的动画效果。大概分三部分：

什么是动画

1. 随时间而改变。

2. 不是屏幕层级和结构的替代。

3. 实用性

1*JH_Rrc5vI54o8oIUf2dxQw.gif

FeNO值表格 for 医疗项目肺乐

4. 艺术性

1*vLoxplmr3NTlzqaqavAASg.gif

流动的试管 for 医疗项目肺乐

为什么使用动画

1. 直观地引起注意

1*Ocoy-qOlpQMDcnCUrqQFsg.gif

类似 Tumblr 的添加按钮

添加新任务或问题 for 云介理财项目

2. 面向用户

3. 连接用户的行为

1*El6OZ2NPnUxcM6T19rc-Mw.gif

下拉加载效果 for 公司社交平台项目

怎样制作交互原型

制作(Make)展示(Show)改进(Learn)循环 1->31*kiqT1h5nDoTqLo4Uc8OEGg.gif

两周年纪念动画 for 风起科技