交互学堂
专注分享专业知识

用户界面缓解曲线

1-zCF7Jk2R6I3OSBeAQHk6pw

由于采用扁平设计,动画的质量是创造伟大的界面更是必不可少的因素。通过动作设计,可以影响产品的整体体验,并从市场上把它分开。动画可以使复杂的相互作用简单,把好设计成令人难忘的用户体验。但是,我们如何创造品质的动画?缓和曲线是许多核心部件,需要一个体面的动画,使得它梦幻般的之一!

问题是,如何理解缓和曲线的工作有可能是个困难。而且人们知道想如何缓和曲线的工作,以及如何设计自己的更好的理解。一个缓和曲线是定义在图上的加速度方式的线。缓和曲线由许多其他的名字,如运动曲线,定时功能,贝塞尔曲线或只是曲线通常所说。一个缓和曲线的不同形状也有像缓解关键字,缓出,或缓解。

如何缓解工作曲线

缓和曲线通过X,Y轴创建。的X和Y的含义可以变化从应用到应用。在发展中,X和Y状态的含义保持相当一致。其被定义为动画(Y)的百分比随时间的变化(Ⅹ)。

1-yrj0VOEk_rciKIDglyvF-A

这缓和曲线时的样子付诸实践?这就是时间和间隔的概念开始发挥作用。

时间和间隔

时间是持续时间为一个动画来完成。间距是每个“帧”之间的空间,但在我们的情况下,它是动画的各个百分比之间的空间。下面,我已经展示了如何间距涉及缓动曲线。想想垂直=快速和水平=缓慢。

设计一个缓动曲线

设计一个缓动曲线人们总是问我,“我什么时候用缓动曲线?”我的回答-这真的取决于具体的方案。没有一个对绝对的工作缓动曲线。起草这些曲线设计是运动的重要组成部分。缓和曲线出现在现实世界中的物理范围内后,通常设计的,但并不总是遵循这些规则。现实世界是一个伟大的地方对于获得灵感动画。例如,在现实世界中没有对象开始在全速度并立即停止-就像一个线性缓和曲线一样。对象总是有某种加速或减速。这只是众多迪士尼概念在概述了1 动画的12条原则,这在很大程度上是基于物理学和物理学的夸张。

当起草一封缓动曲线记住,纵是快速和水平是缓慢的。您创建的曲线应该是取决于你的交互设计。您可以创建许多不同类型的(X,Y)网格内的曲线。

宽松的发展曲线之内

在宽松的发展曲线被称为“定时功能”,这是创建一个定义在图形加速模式的贝塞尔曲线的数学方程。这通常在开发中使用的函数是立方贝塞尔。

1-vWeVRPeCyo8Ul6G7CPibLA

在大多数编程语言,有喜欢易用性的,容易出一些预定义宽松的曲线,并易于在出。一定要检查的文件,看看哪些曲线是预定义的。下面我列出了在被预先定义的CSS的缓和曲线。

  • 易用性在=立方贝塞尔(0.42,0,1,1)
  • 缓解-OUT =立方贝塞尔(0,0,0.58,1)
  • 缓解-IN-OUT =立方贝塞尔(0.42,0,0.58,1)

 

在CSS中有可以在对象类中定义的“全球”放心,这也适用同样的易用性,以每一个关键帧。例如,如果你有一个反弹,动画将反弹在每个关键帧。

您可以通过关键帧中定义他们获得更精确与例。重要的是要记住,缓和曲线的百分比值定义是很重要的你想轻松自如地发生。

@keyframes动画名称{ 
  0%{ 
    动画定时功能:立方贝塞尔(1,0.01,0.91,0.46); 
  } 
  25%{ 
    动画定时功能:线性; 
  } 
  50%{ 
    动画定时-功能:立方贝塞尔(0,.02,0,1.01); 
  } 
  75%{ 
    动画定时功能:线性; 
  } 
  100%{ 
    动画定时功能:线性; 
  } 
}

缓和曲线的概念并不仅仅适用于一个单一的动画,但可以适用于延迟!它可以使当屏幕有动画时的许多元素很有趣。这里是一个正弦波延迟的一个例子。我通过创建萨斯循环使用指南针数学佣工来计算正弦创造了这个。

@for $ I从1到7 { 
  &:第n个孩子(#{$ I}){ 
     动画延迟:(#{罪(0.4)*($ I)} S); 
}

赞(0) 打赏
未经允许不得转载:IAMUE » 用户界面缓解曲线

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏