深度解析界面设计中的动效原理【UI设计】.docx

文档介绍：深度解析界面设计中的动效原理【UI设计】
深度解析界面设计中的动效原理【UI设计】
作者: 一网学   最后更新时间：2015-08-24 10:55:48
这篇文章是关于变速过渡效果的，看似简单，但真正想让动画自然流畅，
深度解析界面设计中的动效原理【UI设计】
深度解析界面设计中的动效原理【UI设计】
作者: 一网学   最后更新时间：2015-08-24 10:55:48
这篇文章是关于变速过渡效果的，看似简单，但真正想让动画自然流畅，还需要深入了解动画的基本原理。今天我们将会逐步学****基本概念、探讨加速减速，拆解缓冲曲线，最终学会运用到界面设计中。
你认为这两个球在做什么？
绿球弹跳很明显，但是红球在怎样运动？当然，它像绿球一样上下运动，落下和弹起所用的时间和绿球一样。然而，红球感觉很机械，而绿球让人感觉它确实在弹跳。为什么我们会有这种感受上的差异呢？
答案是变速过渡效果（Easing）。
1、时间和空间位移（Timing and Spacing）
首先，我们需要理解两个重要的概念——时间和空间，二者是紧密相关、密不可分的。为了使动画更有可读性，他们至关重要。
听众会不自觉地把动画和他们已知的东西关联起来。如果动画让人联想到周围的世界，它会看上去很自然。如果它让人联想到机器人，它会感觉很机械。如果它让人联想不到任何东西，就意味着动画看上去“很奇怪”。
2、渐快与渐慢（Ease-in and Ease-out）
现在你知道我们为什么为跳跃的球设置不均匀的间距了。这种不均匀间距的技术术语叫做变速过渡效果。根据你将它用于动画开始还是结束，它被称为渐快或渐慢。
渐快
当球以慢速开始并积累速度时，这一过程被称为渐快。
渐慢
当球以快速开始并降低速度时，这一过程被称为渐慢。
为了理解缓冲这一词的定义，我们已经查找了大量理论！
注意：这一术语有可能与其它术语混淆。如果你正在阅读传统的卡通书，例如迪斯尼的《生命的幻象》或《动画师的生存工具》，那么这些书会告诉你，当一个物体开始减速然后加速时，这一过程被称为渐慢（ease-out），因为它的姿态在“缓慢输出”。但是，在软件产业（CSS动画，Adobe Edge等），这一过程被称为渐快（ease in）！我不确定这一不同之处是怎么来的，但是不幸的是，这就是它的形成过程。所以，当你在阅读一篇文章时，而这篇文
章把它们把“渐快”称为“渐慢”，那么不要觉得困惑。看一眼你所在的网站你就懂了:D。
阅读变速过渡的曲线图
你会注意到，当你打开软件包的时候，渐进的功能不会为你展示像上图那样线性的层次。相反，你会得到这样的曲线：
那么，这一曲线与我们到目前为止谈论的一切事情有什么关系呢？让我们将曲线画在图表上，然后看看我们最终画出了什么。这只是基础数学而已——我们（应该）在学校里已经学过了。
这是我们的图表——我们将要沿着x轴绘制时间，y轴绘制球的位置。为了方便起见，我们选择了4个单位x轴，，选择1个单位y轴表示球在垂直运动中的10个像素。（图6）
我测量了红球的运动，。这里是记录的值：
时间 Y轴的位置（秒） : （像素）—————- : : 34
: