什么是宽松功能?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了什么是宽松功能?相关的知识,希望对你有一定的参考价值。
什么是在动画的上下文中缓动函数。似乎dojo,jquery,silverlight,flex和其他UI系统都具有缓和功能的概念。我找不到缓和功能的好解释?任何人都可以解释缓和功能的概念,或指出它们的一个很好的解释,我感兴趣的概念不在框架的具体细节中?
缓和是严格用于位置还是一般的,可以应用于对象的任何属性?
缓动函数通常是一个函数,它描述给定完整性百分比的属性值。不同的框架使用稍微不同的变体,但是一旦你理解了这个概念就容易掌握,但最好看一些例子。
首先让我们看看我们所有的缓动函数都将遵循的接口。
我们的缓动函数将有几个参数:
- 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
则使用其当前值) - 最终价值
- 动画的长度
- 对要使用的补间函数的引用。
动画引擎将在动画持续时间内跟踪这些设置,并且在每个更新周期期间,它将使用补间参数来计算属性新值。
缓动函数是一种控制动画速度以产生所需效果(弹跳,放大和慢速等)的算法。
查看MSDN has to say about them的更多细节。
我想回答这个老问题,即使它已经接受了答案。 32bitkid做了必要的解释。我将添加的是基本的实际实现,因为我找不到一个(我也发布了一个关于它的question)。
以这个简单的线性动画为例。我怀疑它需要任何解释,因为代码是不言自明的。我们计算一个不随时间变化的恒定增量值,在每次迭代时,我们增加了盒子的位置。我们直接修改位置变量然后将其应用到框中。
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>
它是从一个州到另一个州的属性(大小,形状,位置)过渡。
下面是一些描述jquery ui提供的缓动函数的简洁小图。
http://jqueryui.com/demos/effect/easing.html
在现实生活中思考不像电脑那样工作。认为不要立即从开关切换到关闭再开启,就像你不能假装你的女朋友会立刻爱你一样。因此,科学家和计算机人员(对你的女朋友一无所知)发明了缓和功能。这就像是不能立即应用或切换动画之类的东西。因此,如果你从左到右移动一个矩形,它就不像机器人一样移动:“开始,以恒定速度移动并立即停止”,但是“开始,不断提高速度,不断降低速度并最终停止”。因此,放松就像让一些动画,功能,对象或东西在现实生活中表现得像。每个缓和效果都定义了一种行为,这就是为什么我们有“弹性”,“弹跳”缓和效果等等。
以上是关于什么是宽松功能?的主要内容,如果未能解决你的问题,请参考以下文章