数极客首页

让界面动画更自然

让界面动画更自然

随着软硬件技术的展开

,界面动画在我们的日常生活中随处可见。桌面软件、移动

应用、云效劳
此刻回想

周围

我置信
你一定能发现他们。

在产品中动画一定
越多越好,也一定
越炫越好。不同的产品类型对动画的央求

也不同。常见的动画主要承担

向用户解释界面与界面之间的关系,元素与元素间的关系以及特定元素的强化。

假定

你关注过界面动画,你可能见过以下这些动画曲线。摘自 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硬件上试了一下。大家能够

看一下视频。我以为渐显、渐隐的动画的是这个样的:
让界面动画更自然

其实应该是这样的:
让界面动画更自然

其他

除了在动画变化过程中对客观规律的描画

外,关于
用户场景的恢复

也能增加自然感。
比如

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

选择。

让界面动画更自然

或者这样删除

让界面动画更自然

更多效果,能够

访问动态checkbox

写在最终
的小工具

假定

运用
Mac 的小同伴
,Apple 提供了一个绘制函数图像的利器 Grapher。本文的函数均由此工具绘制。感兴味
的同窗
能够

尝试用一下。

 

原文来自腾讯ISUX 

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章