什么是宽松的功能？ [英] What is an easing function?

问题描述

什么是动画的背景下缓动函数的意思。看来，道场，JQuery的，Silverlight中，Flex和其他UI系统有缓解作用的概念。我无法找到缓和功能一个很好的解释？谁能解释缓动函数的概念，或者它们指向一个很好的解释，我感兴趣的是这个概念没有一个框架的具体内容？

What is meant by easing function in the context of animation. It seems that dojo, jquery, silverlight, flex and other UI systems have the notion of easing function. I could not locate a good explanation of easing functions? Can anyone explain the concept of easing functions, or point a good explanation of them, I am interested in the concept not in the specific details of a framework?

缓和严格用于位置或者是它一般可以应用到一个对象的任何属性？

Is easing strictly used for location or is it general and can be applied to any property of an object?

推荐答案

这是宽松的功能通常是描述特定完整性百分比的属性值的函数。不同的框架使用略有不同的变化，但概念是容易掌握，一旦你的想法，但它可能是最好看的几个例子。

An easing function is usually a function that describes the value of a property given a percentage of completeness. Different frameworks use slightly different variations, but the concept is easy to grasp once you get the idea, but it's probably best to look a few examples.

首先让我们来看一下，我们所有的缓动函数，将恪守接口。

First lets look at the interface that all our easing functions will abide by.

我们的宽松政策的功能将需要几个参数：

Our easing functions will take several arguments:

• PERCENTCOMPLETE：（ 0.0 到 1.0 ）


• elaspedTime：毫秒数动画已经运行


• 在startValue：值在启动（或值时，完成百分比为0％）


• endValue值：值在末尾（或值时，完成百分比为100％）


• totalDuration：以毫秒为单位动画的总所需长度

和将返回一个数从而重新presents的属性应该被设置为值

And will return a number which represents the value the property should be set to.

请注意：这是jQuery使用其宽松的功能，这是我会被借贷的例子相同的签名

Note: this is the same signature that jQuery uses for its easing functions, which I"ll be borrowing for examples.

最容易理解的是线性轻松：

The easiest to understand is a linear ease:

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

而现在把这个使用方法：

And now to put this to use:

假设我们有这样的打算去1000毫秒的动画应该从0开始，并在50结束这些值传递到我们的缓动函数应该告诉我们的实际价值应该是什么：

Lets say we had an animation that was going to go for 1000 milliseconds and was supposed to start at 0 and end at 50. Passing those values into our easing function should tell us what the actual value should be:

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

这是一个pretty直截了当（没有双关语意）补间。它是一个简单的线性内插。如果你要绘制值与时间，这将是一条直线：

This is a pretty straight forward (no pun intended) tween. It is a simple linear interpolation. If you were to graph value vs time, it would be a straight line:

让我们来看一个比较复杂一点宽松的功能，二次型便于：

Lets take a look at a bit more complicated easing function, a quadradic ease in:

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

和让我们看看相同的结果，使用相同的输入和以前一样：

And lets look at the same results, using the same inputs as before:

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的价值，这是启动和端之间的实际距离的四分之一我们指定的值。

如果我们要绘制这个函数会是这个样子：

If we were to graph this function it would look something like this:

现在让我们来看看一个基本的易用性了：

Now lets take a look at a basic ease-out:

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

这本质上是做一个轻松的对立加速度曲线在它快开始了，然后减速到其结束值：

This essentially does the "opposite" acceleration curve of an ease in. It starts out fast and then decelerates to its ending value:

然后有函数，缓解在国内外享有很高：

And then there are function that ease both in and out:

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

此功能将启动出慢和结束慢，在中间达到其最大速度。

This function will start out slow and end slow, reaching its maximum velocity in the middle.

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

There are a bunch of easing/interpolations that you can use: Linear, Quadradic, Cubic, Quart, Quint, Sine. And there are speciality easing functions like Bounce and elastic, which have their own.

例如，一个松紧自如的：

For example, a elastic ease in:

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

也许别人可以解释插值背后的实际数学的部分，因为老实说，我不是一个数学奇才。但是，这在宽松的基本功能主要自己。

Perhaps somebody else can explain the actual math part behind the interpolation, because honestly I'm not a math wiz. But that's the basic principal of the easing functions themselves.

当你开始补间/动画，动画引擎记住你想要的开始和结束值。然后每次它更新，其数字选自多少时间已经过去了。它调用的价值观所提供的缓动函数计算出属性应设置的值。只要所有的缓动函数实现相同的签名，就可以很容易地换出，芯动画引擎不必知道差。 （这使得关注一个优秀的分离）。

When you start a tween/animation, the animation engine remembers the start and end values you want. Then each time it updates, its figures out of how much time has passed. It call the supplied easing function with the values to figure out the value the property should be set to. As long as all of the easing functions implement the same signature, they can be swapped out with ease, and the core animation engine doesn't have to know difference. (Which makes for an excellent separation of concerns).

您会发现，我已经避免了谈论 X 和是位置明确，因为没有按缓和吨有任何具体的做位置的本身的。缓动函数只定义起始和结束值之间的过渡。这些可能是 X 坐标，或颜色，或对象的透明度。

You'll notice that I've avoided talking about x and y positions explicitly, because easing doesn't have anything specifically to do with position per se. An easing function just defines a transition between a start and end values. Those could be x coordinates, or a color, or the transparency of an object.

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

And in fact, in theory, you could apply different easing function to interpolate for different properties. Hopefully this helps shed some light on the basic idea.

这是一个非常酷例如（使用一个稍微不同的签名，但都是一样的委托人）与得到发挥这个想法的宽松政策是如何与地位。

And here is a really cool example (that uses a slightly different signature, but is the same principal) to play with to get the idea of how easing relates to position.

修改

下面是一个小的jsfiddle 我扔共同演示一些JavaScript中的基本用法。注意：顶属性使用补间反弹，而离开属性使用四补间。使用滑块来模拟渲染循环。

Here is a little jsFiddle I threw together to demonstrate some of the basic usages in javascript. Notice that the top property is tweened using bounce, and the left property is tweened using a quad. Use the slider to simulate the render loop.

由于在所有功能宽松对象具有相同的签名，可以换任何一个出了对方。现在，这些东西大部分都是硬codeD（之类的东西开始和结束值，所使用的补间功能和动画的长度），但在动画帮手一个真实世界的例子，你会要在以下性能来传递：

Since all the functions in the easing object have the same signature, you can swap any of them out for each other. Right now most of these things are all hard-coded (things like start and end values, the tween functions that are used and the length of the animation), but in a real-world example of a animation helper, you would want to pass in the following properties:

• 的属性进行更改


• 起始值（或如果离开未定义然后用它的当前值）


• 结束值


• 长度动画应该是


• 要您要使用的补间函数的参考。

• The property to be changed
• The start value (or if left undefined then use its current value)
• The end value
• The length the animation should be
• The reference to the tweening function you want to use.

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

The animation engine would keep track of these settings for the duration of the animation and during every update cycle, it would use the tweening argument to calculate the properties new value.

这篇关于什么是宽松的功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！