恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
动效开发——100%还原运动曲线
0.0°
2017-01-08 原创文章 教程 举报 7850 232 146 26

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


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


于是,许多设计师和开发者之间开始创造属于自己的交流方式,我就见过不少动效参数输出文档,里面包括了时间、运动距离,缩放、透明度、运动曲线等等,尤其是运动曲线。对动效来说,运动曲线说是生命线也毫不为过。尽管开发者的编辑器提供了相当多的基本运动曲线,但要想高度还原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左右,我没有上传,有需要的同学可以私聊我要。


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

更新:2017-01-08

下载
收藏

232人已收藏

Tlaloc

我觉得这个不是我想呆的

  • 1

    作品

  • 72

    粉丝

  • 4

    关注

    猜你喜欢

      2017-01-08 原创文章 教程 举报 7850 232 146 26

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

      0.0°

      你确定要举报动效开发——100%还原运动曲线

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年01月07日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      146
      232
      26

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录