首页 > 教程 > 关键词  > 界面设计最新资讯  > 正文

技术干货文!深聊界面设计中的动画原理

2015-08-24 13:39 · 稿源: 百度MUX

你认为这两个球在做什么?

绿球弹跳很明显,但是红球在怎样运动?当然,它像绿球一样上下运动,落下和弹起所用的时间和绿球一样。然而,红球感觉很机械,而绿球让人感觉它确实在弹跳。为什么我们会有这种感受上的差异呢?

答案是变速过渡效果(Easing)。

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。

  • 相关推荐
  • 大家在看
  • 京东关联公司投资成立新公司,经营范围含电脑动画设计

    【TechWeb】企查查APP显示,9月29日,融信云(北京)数字科技有限公司成立,法定代表人为燕志珍,注册资本500万元人民币,经营范围包含:电脑动画设计;会议服务;策划创意服务;销售电子产品等。企查查股权穿透显示,该公司由神州数码融信云技术服务有限公司、上海江腾企业管理合伙企业(有限合伙)共同持股,前者大股东为京东关联公司上海君信宜知网络科技有限公司。

  • 深圳餐饮品牌设计/餐厅设计品牌新鲜出炉

    餐饮策划设计行业“ 2021年中国策划设计公司十大品牌”榜单如下:1. 陈林设计事务所山水组合建筑装饰设计有限公司成立于杭州,陈林为设计总监。从事多年设计工作,专注高档商业餐饮、娱乐空间设计见长。出版作品集《摩登中式》在国内外各大书店热销。主要作品有杭州玉玲珑、五十七度湘、水货店、南京小厨娘等。2.花万里全案策划设计花万里全案策划设计公司(原香港花万里设计事务所)成立于深圳,张成为设计总监,餐饮策划设计专家。?

  • 特斯拉陶琳谈产品设计:智能汽车设计越“白痴”越好

    9月27日消息,日前,2021世界互联网大会正在乌镇举行,在今天的大会中,特斯拉副总裁陶琳在谈及如何帮助特定人群消除数字鸿沟时表示,特斯拉一直坚持通过技术手段来提升用户的数字素养。对于智能汽车的产品设计,应该越白痴”傻瓜”越好。陶琳认为,对于特斯拉用户来说,满足安全的驾驶需求只是基础,与此同时用户更希望智能产品能够带来更多的数字化体验。值得注意的是,在前不久的特斯拉车主维权风波中,陶琳曾表示,后续还需要?

  • 住小帮设计师大赛杭州站宣讲会落地,孙建亚开讲“设计的本质”

    随着触媒方式日益多元化,家居设计的线上化决策路径进一步缩短,平台成为连接用户与设计师的重要端口。作为一站式家装家居服务平台,住小帮于今年首度举办Z-Design Award 2021住小帮设计师大赛,旨在以“空间态度”为主题的专业、权威赛事,提升设计师整体线上获客能力,深度激发家居设计的价值和潜能。自7月起,大赛已面向北京、西南地区的设计师群体举办了宣讲会。近日,住小帮设计师大赛杭州站宣讲会正式开讲。住小帮设计师运营

  • Skype推出新的经过大修的用户界面

    在最新的博客文章中,Skype刚刚概述了即将出现的一项重大UI改革,重点是"通话阶段"或通话参与者可以看到彼此的屏幕。聊天可以根据主题进行定制,并通过颜色渐变进行强调Skype说它"设计了世界上最漂亮的呼叫台",有新的布局、主题和功能。Skype旨在使Skype的外观和感觉现代化,同时使其长期用户仍然熟悉Skype。它还谈到让用户在通话阶段更具包容性Skype还允许用户在不共享视频时自定义互动程序。"不再有灰色"瓷砖。仅音频参与者的化

  • 设计主管Jony Ive离职后苹果公司的设计更倾向于功能性

    本周还有新的14英寸和16英寸MacBook Pro机型发布,其特点是苹果在2016年取消的几个接口的回归,包括一个HDMI端口,一个SD卡插槽和备受喜爱的MagSafe磁吸充电口。功能大于形式在这里当然适用,因为新的MacBook Pro机型比上一代机型略厚且重,但获得了许多专业用户喜欢的扩展连接。

  • Flash中心版本再更新,界面布局调整

    Flash中心是Flash Player国内运营方重橙网络推出的PC端软件产品,该产品由Flash Player软件化升级而来,并于6 月10 日正式上线。除插件版Adobe Flash Player 的完整功能外,Flash中心新增swf文件播放、安全更新、问题修复及 Flash 游戏推荐等功能,使用更便捷,综合性更强。近期,Flash中心进行了版本更新,调整了产品原有结构布局,对游戏记录页面的大型游戏和小游戏的记录做了分栏目管理,新增功能栏游戏记录删除功能。Flash中心

  • 苹果前设计主管Jony Ive的「LoveFrom」设计公司推出官方网站

    据MacRumors报道,由苹果公司前设计主管Jony Ive和同为设计师的Marc Newson于2019年共同创立的设计公司LoveFrom,本周上线了其官方网站LoveFrom.com。

  • 支付宝测试关闭首页栏目功能 界面清爽多了

    据网友爆料,支付宝正面向部分用户测试关闭首页栏目功能。在10.2.36版本下,点击“我的”—>“右上角设置”—>“功能管理”—>“首页栏目卡片”,就可以看到所有的服务项开关,并可以手动关闭。

  • 曝蔚来导航界面弹广告 当事车主再发声

    智能手机,系统可能有广告;智能电视,系统可能也有广告;如今,智能汽车竟然也要看广告了。10月13日,有网友在微博发文直指蔚来。所谓的用户型企业就这?缺这点钱吗?真是够贴心的呢。导航界面弹窗广告,让你不用看地图了”。从该车主放出的图片来看,车机导航界面弹出巨大广告弹窗,遮挡了大部分导航屏幕。该广告弹窗所展示的是蔚来NIO Life旗下的全新时尚环保品牌BLUE SKY LAB,上海时装周首发,10月15日20:10全球首播。消息被

这篇文章对你有价值吗?

  • 热门标签

热文

  • 3 天
  • 7天