全国免费咨询热线:

400-611-9921

 
动效设计基础,运动曲线与缓动

2016-07-01

1437

为什么要动效?动效是元素的位移、姿态、大小和可见度等随时间的变化。这里我们以位移为例来学习下动效。为什么需要动效呢?比如这里,我希望让方块到右边的位置上,如果没有动效,我可以把它“传送”过去,就像这样...

为什么要动效?

动效是元素的位移、姿态、大小和可见度等随时间的变化。这里我们以位移为例来学习下动效。为什么需要动效呢?比如这里,我希望让方块到右边的位置上,如果没有动效,我可以把它“传送”过去,就像这样:

nw2016063019

显然,这样的技术在现实生活中是不存在的(也许有一天能实现),所以看起来会很不自然。这就需要有一个运动的过程,动效设计就是在设计这个过程:

nw2016063020

这样就好多了。但这样的动效该如何表达呢?做过开发的同学都知道,可以用公式,绝大部分的动效用牛顿运动方程都是可以表达的。当然运动方程也可以做成图表,这里我们就用图表的方式来表达运动,这就是运动曲线。最常用的曲线是“位移 – 时间”曲线:横轴表示时间,纵轴表示在一个方向上的位移。(出于简化考虑,这里我们只考虑在一个维度上的运动,在三维空间中的运动可以分解成单个维度)。 我们先看最简单的运动,匀速直线运动:

nw2016063021

它的运动曲线其实就是条直线,线的斜率(目标位置 / 运动时间)就是它的运动速度:

nw2016063022

在现实生活中,如果物体在传送带上,我们就可以看成是匀速直线运动:

nw2016063023

不过这样的例子并不多,物体很少会自己突然获得速度,运动一段距离后又突然停止。在静止和运动两种状态之间,物体的速度往往会发生变化。这就是缓动(Easing)。

缓动-减速运动(Ease out)

在缓动过程中,物体的运动速度会由于外力而发生变化。常见的缓动有三种:减速运动、加速运动、先加速后减速。我们先看减速运动:

nw2016063024

减速运动的曲线是:

nw2016063025

我们发现,物体有一个初始速度,随着时间的推移,它的速度,也就是曲线的斜率在由大变小到0。什么样的物体会这样运动呢?比如这样:

nw2016063026

缓动-加速运动(Ease in)

加速运动和减速运动的速度变化相反:

nw2016063027

曲线也是对称的:

nw2016063028

加速运动可以看作这样:

nw2016063029

在界面设计中,减速和加速动效往往是成对使用的。通常元素飞入时用减速运动,飞出时用加速运动。例如iPhone App Store中的分类列表:

nw201606302

缓动-先加速后减速(Ease In and Out)

可能大部分物体是这样运动的:

nw2016063030

从曲线中,我们看到,物体的速度(曲线的斜率)由0开始增加,在中点达到最大值,然后又减小到0:

nw2016063031

我们可以看成这个物体在依靠自己的动力运动:

nw2016063032

很多起点和终点都在界面内的运动都使用这种缓动形式,比如iOS天气App的城市切换动画:

nw201606301

缓动的组合

将上面三种最基本的缓动形式组合,可以表现出更多的运动形式,例如:

nw2016063033

这就像用一个弹弓把物体弹射出去:

nw2016063034

它运动曲线分为两段,物体先向反方向运动,再在正向以很高的速度开始减速运动:

nw2016063035

采用不同的缓动形式不仅能帮助用户建立方向感,还能表现出物体的材质和“性格”,比如iOS的锁屏界面落下时:

nw2016063036

这体现出锁屏界面本身是一种弹性材质,而下方的相机是坚硬的材质。它会让用户感觉到锁屏很“轻盈”、易使用。如果我们希望下落的物体感觉起来很重,就可以这样:

nw2016063037

或者是个很高科技的方块:

nw2016063038

或者是个UFO?

nw2016063039

如果是个给小朋友用的app,也可以很有趣:

nw2016063040

感兴趣的同学可以画下上面这些动效的运动曲线纵天,手机建站,企业网站建设,广州响应式网站


关注我们:在查找公众号中搜索:zomsky1688,或者扫描下方二维码快速关注。
广州市纵天信息科技有限公司公众号

本文来自广州品牌网站建设网站设计制作公司-纵天 

关键词:纵天,手机建站,企业网站建设,广州响应式网站

热门标签
钢铁网站开发宝裕网站药品网站搭建医药网站房地产网站建设汇景网站建设汇景网站开发汇景控股新能源网站开发新能源网站制作奥动新能源网站建设奥动官网网站改版石油公司网站建设广州网站搭建广州市网站制作生物网站建设珠海方正官网建设方正官网建设日本YKK官网建设骏丰频谱官网建设斯帝罗兰官网建设高新兴官网建设三盟科技官网建设赛立信官网建设福美控股官网建设德国商会官网建设皇朝家具官网建设皇朝定制官网建设百利官网建设广芯微官网建设物联网网站建设芯片网站建设网站开发日本YKK官网百利网站建设办公家具网站建设广州建站公司广州做网站营销型网站建设柏洪集团网站集团网站建设新元素网站教育网站德胜教育集团德国商会网站建设品牌网站建设赛立信网站建设智能家居网站运动网站建设贸易网站建设玩具网站建设化工网站建设日化网站建设家电网站建设音响网站建设物流网站建设旅游网站建设酒店网站建母婴网站建设珠宝网站建设钟表网站建设培训网站建设教育网站建设建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设皮具网站建设五金网站建设仪器网站建设照明网站建设水电网站建设咨询网站建设法律网站建设家具网站建设家居网站建设服装网站建设服务网站建设食品网站建设金融网站建设餐饮网站建设环保网站建设政府网站建设科技网站建设地产网站建设医药网站建设数码网站建设营销型网站广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站定制网站广州网站建设中服装网站设计服装网站制作防火板网站大数据网站科技网站制作物联网网站人工智能网站防火板网站制作家居网站制作枕头网站电器网站制作电器网站家具网站家居网站网站建设公司​手机网站建设响应式网站企业官方网站网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设费用网站建设广州企业网站建设企业建站官网建设广州建站广州网站建设纵天科技
点击展开
关于纵天
广州市纵天信息科技有限公司成立于2008年,是中国领先的整合式互联网应用服务商。12年专业历程,坚持以科技创新为先导的网络服务,服务超过8000+知名品牌与创新客户,涉及网站设计、APP应用开发、微信开发、平面设计、视频拍摄、互联网整合营销等多个领域。
微信咨询
官方微信
联系方式

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com

电话咨询 在线咨询 QQ咨询 官方微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭