动效开发——100%还原运动曲线

原创文章 分类: 教程 版权:
5844 202 131 26
2017-01-07
68.3
首页推荐

相信大家在和开发人员一起还原动效的过程中都会遇到不少困难,本文就其中一个困难——输出运动曲线,为大家介绍一个方法。


作为一名动效设计师,每天最操心的事,莫过于跟开发者一起实现动效。还记得刚接触这一行时,以为只要输出高保真原型就算任务结束,后来才明白,我的工作只是刚起了头。不管对于开发者,还是动效设计师来说,还原动效为什么如此痛苦?套用《交互设计精髓》里的一句话,“当前开发过程的主要问题之一是,大家各司其职,分工过度专业化:研究者只负责研究,设计者只负责设计。”导致的结果是,开发和动效之间,并没有一套可以交流的“语言”。


于是,许多设计师和开发者之间开始创造属于自己的交流方式,我就见过不少动效参数输出文档,里面包括了时间、运动距离,缩放、透明度、运动曲线等等,尤其是运动曲线。对动效来说,运动曲线说是生命线也毫不为过。尽管开发者的编辑器提供了相当多的基本运动曲线,但要想高度还原Demo中的流畅度,最终还是要依靠自定义曲线,也就是由自己赋予参数。


Image title

Image title


相信这些表格对各位来说都不陌生,我就不一一解释。通常的做法是,在AE中设计好动效后,进入贝塞尔曲线编辑器“拉出”差不多的曲线交给开发人员。然而这其中依然有不可调和的因素,手工“拉出来”的曲线,只能无限接近Demo中的运动曲线。下面就跟大家推荐一款神器——Flow,这个脚本可以在AE中直接得到贝塞尔曲线的参数。

Image title

图3

真是一目了然的界面是吧,可能大家一看就知道咋用了。我就不厌其烦再简单介绍一下:

Read Key Values(读取关键帧数值):个人而言最实用的功能,只要你选中关键帧,再轻轻一按这个图标,图表正下方的数值就会变成当前曲线数值。


Apply to Key(应用到关键帧):这个必须和它右边显示着“A”图标的功能一起讲。这个是把曲线应用到关键帧,而“A”则是把曲线应用到表达式,两者是双胞胎关系。


Default Curves(默认曲线):其实就是等于一个仓库,里面全是默认曲线。

右边的Save&User Library也很好理解,分别是保存预设和个人库,跟AE中保存特效是一个意思。


具体应该怎么用呢,我举个简单的栗子。啊?真的要举栗啊,已经很清晰了。这个玩意我找了很久才找到,而且花了15块大洋才下载回来。我就在这里分享给大家,有win和mac版本,内附安装教程。另外有一套使用教程,40M左右,我没有上传,有需要的同学可以私聊我要。


再稍微总结一下。我觉得开发动效,或者说任何工作,只要是团队作业,就应该参与到所有环节中,积极寻找提高团队效率的方法。上面所提到的,也许只是整个工作流程中非常微不足道的一环,但是能提高一丢丢,就要提高一丢丢。

Tlaloc

勤精不退,一念通天。

68粉丝/2关注

动效意义之我见一些过年主题动效练习

Tlaloc

Tlaloc

勤精不退,一念通天。

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2017 UI.CN