成为懂技术的设计师!教你如何让界面动画自然流畅 - 优设-UISDC

成为懂技术的设计师!教你如何让界面动画自然流畅

2014/08/24 14557评论区

成为懂技术的设计师!教你如何让界面动画自然流畅

编者按:扁平化让界面动画越来越流行,但想要做出自然流畅的动效,懂软件还不行,你得学点函数。(哎喂,先别跑!)腾讯的史蒂夫同学直接从产品出发,聊聊如何用科学的方法地让动画更自然。语言浅显易懂,文末附动效小惊喜,学习下。

随着软硬件技术的发展,界面动画在我们的日常生活中随处可见。桌面软件、移动应用、云服务等,此刻环顾四周,我相信你一定能发现他们。

成为懂技术的设计师!教你如何让界面动画自然流畅

在产品中动画未必越多越好,也未必越炫越好。不同的产品类型对动画的要求也不同。常见的动画主要承担向用户解释界面与界面之间的关系,元素与元素间的关系以及特定元素的强化。

如果你关注过界面动画,你可能见过以下这些动画曲线。摘自 http://easings.net/

成为懂技术的设计师!教你如何让界面动画自然流畅

他们表述了动画变化的程度与时间的关系。通过合理利用这些动画曲线背后的原理,可以让动画看起来更加真实。

这里说到我们要让界面动画更自然。如何做到自然?只要遵循客观物理规律以及人得视觉经验,动画就会看上去真实自然。

为什么要讲动画函数?相信很多设计师看到下面的文章会的觉得太枯燥。

那我们回到产品研发过程,在产品里,常见的动画实现有这么几种:

1. 设计师逐帧绘制;开发同学实现循序/循环播放逻辑。

2. 设计师提供动画资源文件如(视频、flash、gif);开发同学将资源嵌入产品。

3. 设计师提供动画形式、参数与元素;开发同学完成动画实现,如:html5/CSS动画。

文本想针对第三种形式,帮助设计师了解动画背后的科学知识,可以有具体的参数与开发同学沟通。

如果你熟悉物理课本里的运动公式,请跳过第一部分。

运动动画

我们先从最简单的运动动画说起。我们客观物理规律还是得从牛顿第二定律说起。F=ma,如果大家不明白这个公式,没关系。

请允许我不那么讲究术语的严谨性。通俗点来说,就是运动动画响应变化情况与执行动画的物体本身有关。如果你想表现的物体是一个沉甸甸的,那么他们的起始动画响应/参数的变化会比较慢。反之,物体是轻巧的,那么其起始动画响应/参数的变化会比较快。

成为懂技术的设计师!教你如何让界面动画自然流畅

从图上可以看到如果是相同的操作且移动相同的距离,轻巧的所花的时间越短。

阻尼动画

提到阻尼,需要介绍三个概念:临界阻尼、过阻尼、欠阻尼。

临界阻尼

生活中一些高档的门或橱柜。他们在开合的过程中为了不造成太大的声响,他们的机械结构阻尼会尽量设计接近临界阻尼。这个过程最容易让人接受,不会感觉有外界干扰。过阻尼和欠阻尼,通常能让你感觉到有一只隐形的手,阻碍或促进运动。

过阻尼

从字面上会容易理解,就是阻尼很大,阻碍运动的发展。有些自动门或电梯门在闭合的过程中,在最后段里往往需要更长的时间。另外,记忆枕的恢复的过程也是过阻尼。

欠阻尼

阻尼不够,继而形成了振荡的特征。生活中的一些弹簧门,在关闭的过程中,会多次摆动,最终趋于闭合。

成为懂技术的设计师!教你如何让界面动画自然流畅

做一个比较细腻的界面动画时候,如果追求理性一些,可以把动画的成果拆解成三个阶段。启动、运行、收尾。设计师需要花更多的时间去考虑启动与收尾过程。

成为懂技术的设计师!教你如何让界面动画自然流畅

· 启动阶段:体现力质量、环境,可以表现材质的轻盈与厚重。

· 收尾阶段:体现质量速度环境。阻尼通常在这个阶段体现。

举个例子

请大家关注启动与收尾阶段。

成为懂技术的设计师!教你如何让界面动画自然流畅

成为懂技术的设计师!教你如何让界面动画自然流畅

动画曲线仅作示意感受,可能与实际动画有所出入。

呼吸动画

呼吸动画,常用于界面元素的提醒。

对于这个动画,设计师最直观的印象就是闪烁。在实施的过程中,对于闪烁一词会被赋予不同的理解。

· 设计师眼中的闪烁:“渐显 -> 渐隐 -> 渐显 -> 渐隐”;

· 工程师眼中的闪烁:“显示 -> 隐藏 -> 显示 -> 隐藏”;

如何把动画做得更细腻,就在于如何将渐显与渐隐的过程如何描述得更加仔细。

对于最早的渐显、渐隐动画,我首先想到了三角函数。

成为懂技术的设计师!教你如何让界面动画自然流畅

仔细观察这个函数,可以发现他的特点是在一个周期里是启动渐增、收尾减缓的过程。适合开发利用简单代码实现的动画效果。

有兴趣的同学可以用原型感受一下。做闪烁动画,用到三角函数其实就可以满足大部分场景。

我在尝试的动画的时候,把他作为呼吸函数来看,总觉得哪里还是不太自然。看起来“呼吸比较急促”。

我们来分析一下呼吸函数。

为什么看起来呼吸局促呢?请各位看官现在试试深呼吸,体会一下。你会发现在我们的在吸气的阶段,很快会就达到肺撑满的状态,然后吐气的阶段可以持续很久。大体上比例分布是这样的。

成为懂技术的设计师!教你如何让界面动画自然流畅

融合入三角函数,将起始的渐增与收尾的减缓引入。感谢Don同学提供了一个完整的函数。

这个函数的周期为6,峰值出现在2。整个变化起始与收尾都是渐变过渡。

成为懂技术的设计师!教你如何让界面动画自然流畅

成为懂技术的设计师!教你如何让界面动画自然流畅

k=1/3,t=6, n={1,2,3,…}

大家感受一下

之前我利用了些业余时间,在Arduino硬件上试了一下。大家可以看一下视频。我以为渐显、渐隐的动画的是这个样的:

视频地址:简单三角函数的呼吸灯

成为懂技术的设计师!教你如何让界面动画自然流畅

其实应该是这样的:

视频地址:使用呼吸函数的呼吸灯

成为懂技术的设计师!教你如何让界面动画自然流畅

除此之外,使用CSS3制作自然流畅界面一样棒棒哒!看这篇《这个比较高端了!CSS3动画帧数科学计算法》
see-more-CSS3

其他

除了在动画变化过程中对客观规律的描述外,对于用户场景的还原也能增加自然感。

比如这个站点的checkbox。我们在日常生活中,面对纸质的选项,我们会选择涂抹的方式来进行选择。

成为懂技术的设计师!教你如何让界面动画自然流畅

或者这样删除

成为懂技术的设计师!教你如何让界面动画自然流畅

更多效果,可以访问 → 动态checkbox

写在最后的小工具

如果使用 Mac 的小伙伴,Apple 提供了一个绘制函数图像的利器 Grapher。本文的函数均由此工具绘制。感兴趣的同学可以尝试用一下。

动效设计好文合集!

教你快速保存动效!
《经验分享:如何快速保存APP动效?》

手把手教你设计动态界面!
《PS高手教程!教你打造流畅酷炫的动态演示》

腾讯出品的动效设计指南!
《超赞!高大上的动效设计方法及流程总结》

原文地址:腾讯ISUX

AD6-keep

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量76万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/ui-animation-factor

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch UI 转场动效 界面设计 平面设计 设计师 交互设计师 扁平化设计 排版布局 职场 设计师专访 素材下载 设计流程 用户体验设计 视觉设计 配色 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 动效设计 设计趋势 psd下载 产品设计 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里