App动效设计案例解析2(Pixate教程)

      动效能使应用增色不少,动效的设计要有意义。它就像编排一组舞蹈,好的动效优雅高效,每一个动作和变化都有意义。有序的进场,整齐划一的退场。动效设计的软件很多,其中Pixate是初学者很好的选择,它功能简单,理解起来很容易,上手极快。上一篇案例是其官网的一个案例,有详细的介绍和完整的素材,大家可以试试。

        好了,废话少说,这次是实际项目中的一个小案例给大家分享一下。先上最后的效果,感觉还是不错的:


最终效果

整个界面中刚开始的时候只有一个按钮,有点像Metarial Desgin中Float Action Button。通过点击这个按钮调出菜单,展现出其他针对当前界面的操作。这样设计的目的是节约移动端界面的空间,让用户更加专注于内容本身而不被其他元素打扰。

第一步先把素材制作好,整个动效包含的素材并不多:六个图标(menu,infor,grid_view,thumb_up,switch),两个背景(按钮的背景,菜单面板的背景)。

第二步把素材导入到pixate软件后理清思路。整个动效的大概过程是点击按钮后展开菜单面板,其他图标按顺时针依次出场;再次点击按钮其他图标依次消失后收起面板。就是这么简单,然后调节动画的数值,在手机上预览效果。

Pixate软件的原理是每一个图层(layer)可以赋予动作(action)和动画(animation);动画是由某个图层的动作触发的。这次依然放出动效的拆解图,方便大家学习理解。

华丽的进场


优雅的退场


附件下载(制作本案例需要的素材和一个成品文件)

感觉有点帮助就点个赞,给点鼓励。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 【说明:本文是从Principle官网翻译过来的,因个人能力和水平有限,部分术语可能不准确,对软件功能的理解也可能...
    shea阅读 43,115评论 23 117
  • 迷于设计,沉于动效。由于笔者对动效交互很感兴趣,遂著此文。希望能对大家有一点帮助。动图较多,建议 Wifi 下浏览...
    求愚阅读 8,907评论 0 29
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,575评论 25 709
  • 一、工作区和工作流程 1.工作区和面板 保存、删除、重置工作区停靠、编组、浮动面板 2.首选项 常规、预览、导入、...
    朱细细阅读 12,423评论 0 52
  • 本以为离开了校园,父母的嘴边可以再也不用提及“别人家的小孩”。 但其实,多了个“别人家的女儿”。 “你为什么还没对...
    四月和猫咪阅读 4,132评论 7 1

友情链接更多精彩内容