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

问题描述

在动画的上下文中放宽功能是什么意思。看来dojo，jquery，silverlight，flex等UI系统都有放松功能的概念。我找不到缓解功能的一个很好的解释？任何人都可以解释宽松功能的概念，还是指出一个很好的解释，我对这个概念不感兴趣，在框架的具体细节上呢？

是否放宽了对位置的严格使用，还是通用的，可以应用于对象的任何属性？

解决方案

一个缓动函数通常是一个描述属性值的函数，给出了完整性的百分比。不同的框架使用略有不同的变体，但是一旦你得到这个想法，这个概念很容易掌握，但最好先看几个例子。

首先让我们看看我们的缓动功能将会遵循。

我们的缓动功能将会有几个参数：

• percentComplete：（ 0.0 to 1.0 ）。


• elaspedTime：动画运行的毫秒数


• startValue：开始的值（或完成百分比为0％时的值）


• endValue：要结束的值（或完成百分比为100％时的值）


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

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

注意：是jQuery用于其缓动功能的相同签名，我将会借用它g的例子。

最容易理解的是线性方便：

  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 
线性（1.0，1000，0，50，1000）// 50 
  

这是一个很直接的（没有双关意图）补间。这是一个简单的线性插值。如果您要绘制图形值与时间，那将是一条直线：

让我们来看看一个更复杂的宽松功能，一个四分法的容易：

  var easeInQuad = function（x，t，b，c，d）{
 return c *（t / = d）* t + b; 
} 
  

让我们看看相同的结果，使用与以前相同的输入： / p>

  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，这是开始和结束之间的实际距离的四分之一

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

现在让我们来看看一个基本的缓解：

  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，Sine。而且还有一些特殊的宽松功能，如Bounce和弹性，有自己的。

例如，弹性容易：

  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中的基本用法。请注意，顶部属性使用反弹进行补间，而左属性将使用四进制进行补间。使用滑块来模拟渲染循环。

由于 easing 对象中的所有功能都具有相同的签名，你可以互相交换任何一个。现在大多数这些东西都是硬编码的（例如开始和结束值，使用的补间函数和动画的长度），但是在一个动画助手的现实世界中，你想传递在以下属性中：

• 要更改的属性


• 起始值 c code然后使用当前值）


• 结束值


• 动画的长度


• 引用要使用的补间函数。

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

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 to 1.0).
• elaspedTime: The number of milliseconds the animation has been running
• startValue: the value to start at (or the value when the percent complete is 0%)
• endValue: the value to end at (or the value when the percent complete is 100%)
• totalDuration: The total desired length of the animation in milliseconds

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

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:

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

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

Notice the values a very different than our linear ease. It starts out very slow, then accelerates to its ending point. At 50% completion of the animation it has only made it to a value of 12.5, which is one quarter of the actual distance between the start and end values we have specified.

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

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.

---

Edit

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.

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屋！