为了账号安全,请及时绑定邮箱和手机立即绑定

如何把AE的动效DEMO准确表达给软件工程师?

/ 猿问

如何把AE的动效DEMO准确表达给软件工程师?

叮当猫咪 2018-09-19 11:07:12

如何把AE的动效DEMO准确表达给软件工程师


查看完整描述

1 回答

?
SMILET

首先介绍最重要的两个概念:

动画(Animation)
某个界面控件在一段时间内的变化即产生动画。产生动画的维度可以是它的形状、位置、大小、颜色、透明度等,抑或是它们的叠加。

过渡(Transition)
那这个控件在两个状态之间是如何变化的呢?定义这个变化的概念即是过渡。不同的过渡曲线会产生截然不同的效果。通常被提到的有ease in、ease out、bounce等,当然Axure也提供这些效果。以位置为例,一个矩形由下至上移动300px,不同的运动曲线所对应的动效之间有非常明显的区别。
<img src="https://pic1.zhimg.com/7c4119f490e2d95bb7505096fb74bef8_b.jpg" data-rawwidth="620" data-rawheight="453" class="origin_image zh-lightbox-thumb" width="620" data-original="https://pic1.zhimg.com/7c4119f490e2d95bb7505096fb74bef8_r.jpg">Source:缓动函数速查表 点击链接可比对不同运动曲线产生的效果差异

过渡曲线可以通过数学公式精确表达出来,通常使用贝塞尔曲线(bezier),是不是有点耳熟?对,Photoshop里的钢笔工具靠的就是它。

由于Android系统自带动画的运动曲线在5.0之前基本接近线性(linear),给人的直观感受非常僵硬。而2013年中发布的iOS7大幅优化了动效的过渡曲线,尤其是上下级界面左右切换时的缓动效果令人印象深刻。所以我在Android某个项目的Demo中模拟了iOS动效的Transiton,并且完整的由工程师实现出来,那是一次非常畅快的合作。那么问题来了,如何向工程师准确描述动效?

向工程师给出准确的动效描述
通过上面的两个概念可以知道,3个参数即可准确描述动效:控件变化的维度、变化的时间、过渡曲线公式。

查看完整回答
反对 回复 2018-10-09
  • 1 回答
  • 0 关注
  • 434 浏览
我要回答

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信