什么是宽松功能？

Question

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

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

Answer 1

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

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

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

• percentComplete :( 0.0to 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;
};

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

还有一堆缓解/插值可以使用的:直线,二次型,立方,夸脱,昆特,正弦波.还有一些特殊的缓和功能,如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坐标,颜色或对象的透明度.

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

这是一个非常酷的例子(使用略微不同的签名,但是是相同的原则)来理解缓和与位置的关系.

编辑

这里有一个小jsFiddle我在一起演示javascript中的一些基本用法.请注意,该top属性是使用bounce进行补间的,并且该left属性是使用quad进行补间的.使用滑块模拟渲染循环.

由于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(no-easing) 开始。它会产生与上面相同的动画，但方法不同。这一次，我们不会直接修改位置变量。我们要修改的是时间。

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

首先，让我们谈谈参数。

• time: 经过的时间
• begin：属性的初始值（宽度、左、边距、不透明度等）
• change：位移，（结束值 - 开始值）
• duration: 动画所需的总时间

time并且duration有直接关系。如果你有一个 2 秒的动画，你增加time并将它传递给 easing 函数linear。该函数将返回一个位置，该位置指示框在给定时间应位于该位置。

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

linear(0.7, 0, 100, 2);

这将返回35。动画开始后 700 毫秒，框的位置将在 35px。让我们看看它的实际效果。

JSFiddle

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

linear(0.7, 0, 100, 2);

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;
}

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

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

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);
    // ...