什么是宽松功能？

Question

什么是在动画的上下文中缓动函数。似乎dojo，jquery，silverlight，flex和其他UI系统都具有缓和功能的概念。我找不到缓和功能的好解释？任何人都可以解释缓和功能的概念，或指出它们的一个很好的解释，我感兴趣的概念不在框架的具体细节中？

缓和是严格用于位置还是一般的，可以应用于对象的任何属性？

Answer 1

缓动函数通常是一个函数，它描述给定完整性百分比的属性值。不同的框架使用稍微不同的变体，但是一旦你理解了这个概念就容易掌握，但最好看一些例子。

首先让我们看看我们所有的缓动函数都将遵循的接口。

我们的缓动函数将有几个参数：

percentComplete :( 0.0到1.0）。
elaspedTime：动画运行的毫秒数
startValue：要开始的值（或完成百分比为0％时的值）
endValue：结束时的值（或完成百分比为100％时的值）
totalDuration：动画的所需总长度（以毫秒为单位）

并将返回一个数字，表示属性应设置的值。

注意：这与jQuery用于缓动函数的签名相同，我将借用它们作为示例。

最容易理解的是线性简易：

var linear = function(percent,elapsed,start,end,total) {
    return start+(end-start)*percent;
}

现在来使用它：

假设我们有一个动画将持续1000毫秒，并且应该从0开始并以50结束。将这些值传递到我们的缓动函数中应该告诉我们实际值应该是多少：

linear(0, 0, 0,50, 1000)        // 0
linear(0.25, 250, 0, 50, 1000)  // 12.5
linear(0.5, 500, 0, 50, 1000)   // 25
linear(0.75, 750, 0, 50, 1000)  // 37.5
linear(1.0, 1000, 0, 50, 1000)  // 50

这是非常直接的（没有双关语）补间。这是一个简单的线性插值。如果你是图表值与时间，它将是一条直线：

让我们来看看更复杂的缓动功能，二次方便：

var easeInQuad = function (x, t, b, c, d) {
    return c*(t/=d)*t + b;
}

让我们使用与以前相同的输入来查看相同的结果：

easeInQuad(0, 0, 0, 50, 1000)      // 0
easeInQuad(0.25, 250, 0, 50, 1000) // 3.125
easeInQuad(0.5, 500, 0, 50, 1000)  // 12.5
easeInQuad(0.75, 750, 0, 50, 1000) // 28.125
easeInQuad(1, 1000, 0, 50, 1000)   // 50

请注意，这些值与我们的线性简易性非常不同。它开始很慢，然后加速到它的结束点。在动画完成50％时，它只使其达到12.5，这是我们指定的start和end值之间实际距离的四分之一。

如果我们要绘制这个函数的图形，它看起来像这样：

现在让我们来看看基本的缓出：

var easeOutQuad = function (x, t, b, c, d) {
    return -c *(t/=d)*(t-2) + b;
};

这基本上是一个轻松的“相反”加速曲线。它开始快速然后减速到它的结束值：

然后有一些功能可以轻松进出：

var easeInOutQuad = function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
};

此功能将开始缓慢且结束缓慢，在中间达到其最大速度。

你可以使用一堆缓动/插值：线性，二次，立方，夸脱，Quint，正弦。还有一些特殊的缓和功能，如Bounce和elastic，它们都有自己的功能。

例如，弹性容易：

var easeInElastic = function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},

也许其他人可以解释插值背后的实际数学部分，因为说实话，我不是数学专家。但这是宽松功能本身的基本原则。

启动补间/动画时，动画引擎会记住所需的开始值和结束值。然后每次更新时，其数字都会显示已经过了多长时间。它使用值调用提供的缓动函数来计算属性应设置的值。只要所有缓动函数都实现相同的签名，就可以轻松地将它们换出，并且核心动画引擎不必知道差异。（这使得关注点非常出色）。

你会注意到我已经明确地避免谈论x和y的立场，因为宽松与位置本身没有任何关系。缓动函数仅定义起始值和结束值之间的过渡。这些可能是x坐标，或颜色，或对象的透明度。

事实上，理论上，您可以应用不同的缓动函数来插入不同的属性。希望这有助于阐明基本理念。

这里有一个真正的cool example（使用略微不同的签名，但是是相同的原则）来理解缓和与位置的关系。

编辑

这里有一个小jsFiddle我一起来展示javascript中的一些基本用法。请注意，top属性使用bounce进行补间，left属性使用quad进行补间。使用滑块模拟渲染循环。

由于easing对象中的所有函数都具有相同的签名，因此您可以将它们中的任何一个交换出来。现在大多数这些东西都是硬编码的（比如开始和结束值，使用的补间函数和动画的长度），但是在动画助手的真实示例中，你会希望通过在以下属性中：

要更改的属性
起始值（或者如果离开undefined则使用其当前值）
最终价值
动画的长度
对要使用的补间函数的引用。

动画引擎将在动画持续时间内跟踪这些设置，并且在每个更新周期期间，它将使用补间参数来计算属性新值。

Answer 2

缓动函数是一种控制动画速度以产生所需效果（弹跳，放大和慢速等）的算法。

查看MSDN has to say about them的更多细节。

Answer 3

我想回答这个老问题，即使它已经接受了答案。 32bitkid做了必要的解释。我将添加的是基本的实际实现，因为我找不到一个（我也发布了一个关于它的question）。

以这个简单的线性动画为例。我怀疑它需要任何解释，因为代码是不言自明的。我们计算一个不随时间变化的恒定增量值，在每次迭代时，我们增加了盒子的位置。我们直接修改位置变量然后将其应用到框中。

JSFiddle

var box = document.getElementById("box");

var fps           = 60;
var duration	  = 2;                                   // seconds
var iterations	  = fps * duration;                      // 120 frames
var startPosition = 0;                                   // left end of the screen
var endPosition	  = window.innerWidth - box.clientWidth; // right end of the screen
var distance	  = endPosition - startPosition;         // total distance
var posIncrement  = distance / iterations;               // change per frame
var position	  = startPosition;                       // current position

function move() {
  position += posIncrement;              // increase position
  if (position >= endPosition) {         // check if reached endPosition
    clearInterval(handler);              // if so, stop interval
    box.style.left = endPosition + "px"; // jump to endPosition
    return;                              // exit function
  }
  box.style.left = position + "px";      // move to the new position
}

var handler = setInterval(move, 1000/fps); // run move() every 16~ millisecond

body {
	background: gainsboro;
}
#box {
	width: 100px;
	height: 100px;
	background: white;
	box-shadow: 1px 1px 1px rgba(0,0,0,.2);
	position: absolute;
	left: 0;
}

<div id="box"></div>

现在，让我们添加缓和。我们通过使用linear（无缓和）开始简单。这将导致上面的相同动画，但方法是不同的。这次，我们不会直接修改位置变量。我们要修改的是时间。

function linear(time, begin, change, duration) {
    return change * (time / duration) + start;
}

首先，我们来谈谈这些参数。

time：经过的时间
begin：属性的初始值（宽度，左边距，边距，不透明度等）
change：排量，（结束值 - 起始值）
duration：动画的总时间

time和duration直接相关。如果您有2秒动画，则增加time并将其传递给缓动函数linear。该函数将返回一个位置，指示该框应该在给定时间处于该位置。

假设我在2秒内将一个盒子从0移动到100。如果我想得到盒子的位置，比如700毫秒，我会用以下方式调用linear函数：

linear(0.7, 0, 100, 2);

这将返回35。动画开始后700毫秒，框的位置将为35px。让我们看看这个在行动。

JSFiddle

var box = document.getElementById("box");

var fps           = 60;
var duration	  = 2;                                   // seconds
var iterations	  = fps * duration;                      // 120 frames
var startPosition = 0;                                   // left end of the screen
var endPosition	  = window.innerWidth - box.clientWidth; // right end of the screen
var distance      = endPosition - startPosition;         // total distance
var timeIncrement = duration / iterations;
var position      = 0;
var time          = 0;

function move() {
	time += timeIncrement;
	position = linear(time, startPosition, distance, duration);
	if (position >= endPosition) {
		clearInterval(handler);
		box.style.left = endPosition + "px";
		return;
	}
	box.style.left = position + "px";
}

var handler = setInterval(move, 1000/fps);

function linear(time, begin, change, duration) {
	return change * (time / duration) + begin;
}

body {
	background: gainsboro;
}
#box {
	width: 100px;
	height: 100px;
	background: white;
	box-shadow: 1px 1px 1px rgba(0,0,0,.2);
	position: absolute;
	left: 0;
}

<div id="box"></div>

此代码中需要注意的部分是：

var timeIncrement = duration / iterations;
var time = 0;

function move() {
    time += timeIncrement;
    position = linear(time, startPosition, distance, duration);
    // ...

在第一个动画中，我们直接修改了位置变量。我们需要一个恒定的位置增量值。我们计算的方式是posIncrement = distance / iterations。通过缓动，我们不再修改位置变量，而是修改时间变量。所以我们需要一个时间增量值。我们以与位置增量相同的方式计算它，只是这次我们将duration除以iterations。我们用时间增量增加时间并将时间传递给缓动函数，缓动函数返回框应该占用的下一个位置。

total distance / iterations (frames) = position change per frame
total duration / iterations (frames) = time change per frame

这是一些眼睛的图表。

最后，一个easeInOutQuad示例。

JSFiddle

var box = document.getElementById("box");

var fps           = 60;
var duration      = 2;                                   // seconds
var iterations    = fps * duration;                      // 120 frames
var startPosition = 0;                                   // left end of the screen
var endPosition   = window.innerWidth - box.clientWidth; // right end of the screen
var distance      = endPosition - startPosition;         // total distance
var timeIncrement = duration / iterations;
var time          = 0;
var position      = 0;

function move() {
  time += timeIncrement;
  position = easeInOutQuad(time, startPosition, distance, duration);
  if (position >= endPosition) {
    clearInterval(handler);
    box.style.left = endPosition + "px";
    return;
  }
  box.style.left = position + "px";
}

var handler = setInterval(move, 1000 / fps);

function easeInOutQuad(t, b, c, d) {
  if ((t /= d / 2) < 1) {
    return c / 2 * t * t + b;
  } else {
    return -c / 2 * ((--t) * (t - 2) - 1) + b;
  }
}

body {
	background: gainsboro;
}
#box {
	width: 100px;
	height: 100px;
	background: white;
	box-shadow: 1px 1px 1px rgba(0,0,0,.2);
	position: absolute;
	left: 0;
}

<div id="box"></div>

Answer 4

它是从一个州到另一个州的属性（大小，形状，位置）过渡。

下面是一些描述jquery ui提供的缓动函数的简洁小图。

http://jqueryui.com/demos/effect/easing.html

Answer 5

在现实生活中思考不像电脑那样工作。认为不要立即从开关切换到关闭再开启，就像你不能假装你的女朋友会立刻爱你一样。因此，科学家和计算机人员（对你的女朋友一无所知）发明了缓和功能。这就像是不能立即应用或切换动画之类的东西。因此，如果你从左到右移动一个矩形，它就不像机器人一样移动：“开始，以恒定速度移动并立即停止”，但是“开始，不断提高速度，不断降低速度并最终停止”。因此，放松就像让一些动画，功能，对象或东西在现实生活中表现得像。每个缓和效果都定义了一种行为，这就是为什么我们有“弹性”，“弹跳”缓和效果等等。

什么是宽松功能？

问题描述投票：42回答：5

5个回答

最新问题

什么是宽松功能？

问题描述 投票：42回答：5

5个回答

最新问题

问题描述投票：42回答：5