什么是宽松的功能？什么是宽松的功能？(What is an easing function?)

什么是动画的背景下缓动函数的意思。 看来，道场，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;
};

此功能会开始时慢，结束慢，到达中间的最大速度。

还有一堆缓解/插值可以使用的：直线，二次型，立方，夸脱，昆特，正弦波。 并有专业宽松的功能，如弹跳和弹性，它有自己的。

例如，弹性便于：

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坐标，或一个颜色，或对象的透明度。

而事实上，在理论上，你可以将不同的缓动函数插值为不同的属性。 希望这有助于阐明基本思想的一些情况。

这里是一个非常酷例子 （使用一个稍微不同的签名，但原理是一样的），用得到的宽松政策是如何与位置的想法玩。

---

编辑

这里是一个小的jsfiddle我扔在一起，显示出一定的JavaScript中的基本用法。 请注意， top属性使用补间反弹，并left财产使用四补间。 使用滑块来模拟渲染循环。

由于在所有的功能easing对象具有相同的签名，可以换任何人了对方。 现在，这些东西大部分都是硬编码（之类的东西开始和结束值，所使用的补间功能和动画的长度），但在动画助手的一个真实世界的例子，你想要通过在以下属性：

• 该物业被改变
• 开始值（或放置undefined然后用其当前价值）
• 终值
• 长度动画应
• 你想使用的补间函数的引用。

动画引擎将跟踪这些设置动画的持续时间和每一个更新周期中，它将使用渐变参数计算性能的新价值。

Answer 2:

的缓和功能是控制一个动画，得到所期望的效果的速度（弹跳，放大和慢等）的算法。

查看一下MSDN有对他们说的更详细一点。

Answer 3:

我想我的答案张贴到，即使它有一个公认的答案这个老问题。 32bitkid已经做了必要的解释。 我要补充的是基本的实际执行情况，因为我无法找到一个（我也贴一个问题这件事）。

采取这种简单的线性动画，例如。 我怀疑它要求任何解释，因为代码是不言自明的。 我们计算一个恒定的增值不随时间而改变，并在每次迭代中，我们增加了框的位置。 我们直接修改位置变量，然后将它包装盒上。

的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 。 该函数将返回表示该箱应该是在给定的时间位置的位置。

比方说，我是从0在2秒钟内移动框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> 

---

需要在此代码关注的是PARTH：

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用户界面所提供的宽松函数的一些整洁的小图。

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

Answer 5:

认为在现实生活中不工作像电脑。 认为不从开到关和从关闭到马上就像你不能假装你的女朋友会立刻爱你。 因此，科学家和电脑的人（谁不知道你女朋友的任何东西），发明了缓解作用。 这就像申请或即时切换的方式类似的东西动画没有。 所以，如果你移动一个矩形从左边到它的不动像机器人一样的权利：“开始，以恒定的速度移动，并立即停止”，但“开始，encrease恒定速度，降低速度不断，最后停止”。 因此，缓解就像让一些动画，函数，对象或东西，表现得像在现实生活中的东西。 每放心效应定义的行为，这就是为什么我们有“弹性”，“反弹”效应缓解等。

文章来源: What is an easing function?