动效能使应用增色不少，动效的设计要有意义。它就像编排一组舞蹈，好的动效优雅高效，每一个动作和变化都有意义。有序的进场，整齐划一的退场。动效设计的软件很多，其中Pixate是初学者很好的选择，它功能简单，理解起来很容易，上手极快。上一篇案例是其官网的一个案例，有详细的介绍和完整的素材，大家可以试试。
好了，废话少说，这次是实际项目中的一个小案例给大家分享一下。先上最后的效果，感觉还是不错的：
最终效果
整个界面中刚开始的时候只有一个按钮，有点像Metarial Desgin中Float Action Button。通过点击这个按钮调出菜单，展现出其他针对当前界面的操作。这样设计的目的是节约移动端界面的空间，让用户更加专注于内容本身而不被其他元素打扰。
第一步先把素材制作好,整个动效包含的素材并不多：六个图标（menu,infor,grid_view,thumb_up,switch）,两个背景（按钮的背景，菜单面板的背景）。
第二步把素材导入到pixate软件后理清思路。整个动效的大概过程是点击按钮后展开菜单面板，其他图标按顺时针依次出场；再次点击按钮其他图标依次消失后收起面板。就是这么简单，然后调节动画的数值，在手机上预览效果。
Pixate软件的原理是每一个图层(layer)可以赋予动作（action）和动画(animation);动画是由某个图层的动作触发的。这次依然放出动效的拆解图，方便大家学习理解。
华丽的进场
优雅的退场
附件下载（制作本案例需要的素材和一个成品文件）
感觉有点帮助就点个赞，给点鼓励。
网友评论