O2O解决方案>>

社区物业O2O
连锁电商O2O
上门维修O2O
农村电商O2O
多用户商城

行业平台类

汽车服务平台
家居服务平台
综合电商平台
家政服务平台
多门店商城系统

网站解决方案

全能型企业站
营销型网站
高端定制网站
品牌设计站
HTML5网站

APP解决方案

生鲜APP开发
物流APP开发
家居服务APP
汽车金融APP
多用户商城APP

定制开发类

APP开发
微信开发
小程序开发
网站建设
平台合作
返回列表
界面设计中的动画原理可理解的变速过渡效果-深入研究加速和减速,毅耘科技
安徽毅耘科技有限公司,安徽app开发,合肥APP开发,界面设计中的动画原理可理解的变速过渡效果-深入研究加速和减速2018-02-17毅耘科技3440

界面设计中的动画原理可理解的变速过渡效果-深入研究加速和减速

界面设计中的动画原理可理解的变速过渡效果-深入研究加速和减速【毅耘科技】

你认为这两个球在做什么

界面设计中的动画原理可理解的变速过渡效果-深入研究加速和减速

绿球弹跳很显明,但是红球在怎样运动?当然,它像绿球一样上下运动,落下和弹起所用的时间和绿球一样。然而,红球感觉很机械,而绿球让人感觉它确实在弹跳。为什么我们会有这种感受上的差异呢?
答案是变速过渡效果(Easing)。
这篇文章就是关于变速过渡效果的,貌似这是显而易见的,但要了解真正发生的事情,还需要深入了解动画的基本原理。文章中,我们将会逐步学习:基本概念、探讨加速减速,拆解缓冲曲线,最终学习到这一切是如何应用于UI设计的。

1时间和空间位移(Timing and Spacing)
首先,我们需要理解两个主要的概念——时间和空间,二者是紧密相关、密不可分的。为了使动画更有可读性,他们至关主要。

注:“可读性”是说动画绘制者如何定义动画的精准度,用来清晰而容易地理解正在发生的事情。例如:不可读=不清楚发生的事情很易读=它特别很是清楚,马上能懂

时间
在案例中,两个球在统一顶端同时落下,0.5秒到达地面, 1秒回到原位。这是球的时间?-?完成一个动作所用的时间耗时。两个球耗时相同,但是,等等……两个球都是1秒的动画,为什么感觉如此不同呢?

空间位移
这是使两个动画完全不同的关键区别。让我们把第一个0.5秒的动画分解为较小的时间单位,这样我们可以更清楚地观察发生了什么。假如我们把每0.1秒球的位置进行标记,我们可以得到这张图:

界面设计中的动画原理可理解的变速过渡效果-深入研究加速和减速

看到两个时间单元之间的距离了嘛?这就是空间位移。很容易的东西,对吗?时间是耗时,空间是位移!
让我们来看红球的间距?,特别很是均匀。每经过0.1秒,它就移动完全相同的距离。在运动中完全没有任何转变。然而,绿球每0.1秒都有不同的间隔。在第一个0.1s,它只移动特别很是小的间距,当它掉下来,间距变得越来越大,直到它终于打到地面。事实上,它耗费了0.4秒来完成前半程,仅用了0.1秒完成后半程!
所以,问题来了,为什么要用这样的体例加长每秒的间距呢?

观察显示世界
观察弹跳一个球时会发生什么。自己尝试一下或者观察一些YouTube上的相关视频。我发现两个问题:慢放的弹跳球和网球弹跳球

弹跳背后的物理理论:球刚开始被摊开的时候,它有一个相对缓慢的速度。在重力的作用下,球的速度持续增加,直到接触地面的那一刻速度达到最大。地面给球反作用力,使它以几乎相同的速度反弹回去。当球移动时,两种力量作用正在球上?-?反弹的力、想把它拉下来的重力。反弹的力量正在慢慢释放,这使得球随着升高逐渐减低速度,直到它耗费掉所有的反作用力,最终到达反弹的最高点。它在顶部停留一微秒,直到重力把它拉下来,使它像之前一样加速下降。我用言语来描述这句话是有原因的。我们试着将一种天然行为分解为具体的步骤,这样我们就可以重新创造它。

有些关键的注重事项:
1、当球在顶部,它是缓慢的。随着下降,它的速度随之增添。
2、在弹回来的时候,开始时球的速度很快。到达顶点时,速度就慢下来了。
3、在统一时间内,当球速很快时,位移会很长,当球速变慢时,位移就少得多。

最后那句话听起来多余,但这正是我们感爱好的:一个速度快的物体在一个单位时间内移动了很长的距离,而慢的物体在相同时间内覆盖较短的距离。

应用我们观察到的结论
让我们把这个概念应用到动画中。再看一下位移图。在顶部间距小,每0.1s逐渐增添间距,最后,在底部达到最大间距。这正是我们在之前的研究中所看到的。我们简单地把这一原则“复制”到绿球,返回的时候进行逆向应用,瞧?,这是个?弹跳的球!

注:不要羞于“照搬”大天然。你的观众会更快地与动画关联起来,从而更容易读懂动画。

让我们再看一次红球,为什么一点儿不觉得红球在弹跳?在理解了一个弹跳球的物理原理后,这个问题就变得很清楚。每0.1秒内红球移动了相同的距离,但是从研究中我们知道:一个跳跃的球不会像那样移动。因为,它没有像弹跳球一样运动,看上去也感觉不像弹跳球。
那么,能有什么会像红球以同样如此精准的时间、正确的间距进行运动呢?当然,机械机器人!红球在“复制”机械机器人的间距。换句话说,因为它像机器人一样运动,它就让人感觉很机械。道理真的很简单!

小结
听众会不自发地把动画和他们已知的东西关联起来。假如动画让人联想到周围的世界,它会看上去很天然。假如它让人联想到机器人,它会感觉很机械。假如它让人联想不到任何东西,就意味着动画看上去“很新鲜”。

2渐快与渐慢(Ease-in and Ease-out)
现在你知道我们为什么为跳跃的球设置不均匀的间距了。这种不均匀间距的技术术语叫做变速过渡效果。根据你将它用于动画开始照旧结束,它被称为渐快或渐慢。

渐快
当球以慢速开始并积累速度时,这一过程被称为渐快。

界面设计中的动画原理可理解的变速过渡效果-深入研究加速和减速

渐慢
当球以快速开始并降低速度时,这一过程被称为渐慢。

界面设计中的动画原理可理解的变速过渡效果-深入研究加速和减速

为了理解缓冲这一词的定义,我们已经查找了大量理论!

注重:这一术语有可能与其它术语混淆。假如你正在阅读传统的卡通书,例如迪斯尼的《生命的幻象》或《动画师的生存工具》,那么这些书会告诉你,当一个物体开始减速然后加速时,这一过程被称为渐慢(ease-out),因为它的姿态在“缓慢输出”。但是,在软件产业(CSS动画,Adobe Edge等),这一过程被称为渐快(ease in)!我不确定这一不同之处是怎么来的,但是不幸的是,这就是它的形成过程。所以,当你在阅读一篇文章时,而这篇文章把它们把“渐快”称为“渐慢”,那么不要觉得疑心。看一眼你所在的网站你就懂了:D。

阅读变速过渡的曲线图
你会注重到,当你打开软件包的时候,渐进的功能不会为你展示像上图那样线性的条理。相反,你会得到这样的曲线:

界面设计中的动画原理可理解的变速过渡效果-深入研究加速和减速

那么,这一曲线与我们到目前为止谈论的一切事情有什么关系呢?让我们将曲线画在图表上,然后看看我们最终画出了什么。这只是基础数学而已——我们(应该)在黉舍里已经学过了。
这是我们的图表——我们将要沿着x轴绘制时间,y轴绘制球的位置。为了方便起见,我们选择了4个单位x轴,透露表现0.1秒,选择1个单位y轴透露表现球在垂直运动中的10个像素。(图6)
我测量了红球的运动,并记录了每经过0.1秒时y的位置。这里是记录的值:

时间?? ?Y轴的位置(秒) : (像素)—————-0.0? :?? 00.1? :? 34
0.2? :? 68
0.3? : 102
0.4? : 136
0.5? : 170

我们注重到,每经过0.1秒,红球正好移动了34个像素。假如我们把这一过程绘制在图表上,并连点成线,我们就会得到一条直线。我们倏忽发现,这就是你在大多数软件中看到的线性渐变图形。

界面设计中的动画原理可理解的变速过渡效果-深入研究加速和减速

现在,让我们对绿球做相同处理。

时间?? ?Y轴的位置(秒) : (像素)—————-0.0? :?? 00.1? :?? 2
0.2? :? 10
0.3? :? 36
0.4? : ?87
0.5? : 170

我得到的值是:每0.1秒,球在垂直位置的转变量都会不同。开始时,它的转变很小(只有2个像素),然后缓慢增添。在最后0.1秒,它增添了高达83个像素。在图表上绘制这些点,我们得到了这条曲线。

界面设计中的动画原理可理解的变速过渡效果-深入研究加速和减速

现在这幅图看起来熟悉吗?这就是那些图标的由来。它们透露表现转变率,或者我们现在已经了解的间隔。

注重:你会在软件中看到更多用于设置缓冲的选项,例如二次的、三次的、四次的等等。它们只是缓和程度更高的选择,但是概念是相同的。只需记住——缓和的程度越高,你就会得到更多的缓和度。

3变速过渡效果应用在UI设计中
最后,让我们看看这些怎么用在UI设计中。
并不是规则,只是工具(There are no rules. Only tools)- Glenn Vilppu
我并不十分建议在你的app设计中应用渐慢、渐快的许多规则。但我可以提供一些它是如何被应用在当下时髦App里的常见的例子。
在移动App中,你能看到的最常见的运用是菜单滑动。假如App没有运用这些变速过渡的效果,就会像是一下的例子:

界面设计中的动画原理可理解的变速过渡效果-深入研究加速和减速

有些乏味,难道不是吗?让我们应用一些变速过渡的效果,看一看会发生什么?

界面设计中的动画原理可理解的变速过渡效果-深入研究加速和减速

恩~好多了!屏幕向外滑动时我们应用了渐快效果,当向内滑动时我们应用了渐慢的效果。
但是,为什么不能在屏幕向外滑动时应用渐慢的效果呢?
从技术上说你是可以的,但这样你会发现:当用户点击一个按钮时,固定的屏幕就会移动。
当画面回滚的时候,屏幕就像一辆从制动到休止前进的汽车。它开始时很快,然后减速到休止——这是一个渐慢过程。所以,假如你在解决一个特殊元素运动方面存在问题,可以尝试将其与物理行为关联。这样,对于如何使用户界面元素运动的问题就会迎刃而解。

更新:
我获得了一些关于使用渐慢菜单滑动的反馈。与菜单不同,它们用于屏幕互换、显示邮件附件、显示动作表和其它更多东西。在iPhone上解锁屏幕时、打开/关闭一个应用程序时、滑动通知时……几乎在许多操作中,你都可以看见渐慢菜单。你可以注重一下,在使用手机导航时,这些行为是多么天然啊。
现在你知道了这些动态效果为什么会感觉很天然,你可以在App中去达到同样的感觉效果。很喜悦看到你把这些观念应用到你的设计中。
这篇文章比我最初打算的要长一些,希望它能帮助你更好的理解变速过渡效果。很愿意听到你们的意见—可以在这里给我留言或者找我。

本文来自MUX
英文原文medium



本文标题:界面设计中的动画原理可理解的变速过渡效果-深入研究加速和减速

本文网址:http://www.yiyuncloud.com/index/index/news_detail/id/842.html

原创网址:合肥APP开发公司<毅耘科技> 版权所有,转载标明出去,并以链接形式链接网址:www.yiyuncloud.com

文章标签:合肥APP开发 合肥软件开发 合肥o2o社区 合肥商城开发 合肥B2B2C商城开发

毅耘科技(www.yiyuncloud.com)是一家拥有新型网站建设与程序开发经验的公司,致力于解决企业网络服务问题,紧跟着网络变化的步伐,为企业提供网络科技服务。平台服务:品牌网站建设 、网站开发、微信开发、APP开发、软件开发、网校系统开发、多用户商城开发、分销商城开发、微商城、一元云购系统开发、O2O系统开发、商标注册、网络营销等项目。是专业为企业提升价值的公司。

分享到:

相关文章

友情链接:
安徽毅耘科技有限公司 版权所有 Copyright © 2017 All Rights Reserved 法律声明 皖ICP备17006053号