看一下jQuery源代码,如何在伪代码中实现这个缓动函数?

时间:2014-08-08 22:07:39

标签: javascript jquery algorithm

jQuery有一个名为swing的缓动函数,用于动画对象的移动。我试图在精神上解析源代码,但我并不擅长阅读此代码。我要求有人用伪代码或C编写算法,甚至没有所有OO原型的javascript。

以下是提及缓动功能的文档: http://api.jquery.com/animate/

这是源代码:
文件1)https://github.com/jquery/jquery/blob/master/src/effects.js
文件2)https://github.com/jquery/jquery/blob/master/src/effects/Tween.js

它看起来像在第107行的文件二中实现的那样令人困惑,因为该函数有一个参数p,我猜测它是百分比。然后看起来好像在第35行使用五个参数调用该函数:

percent, this.options.duration * percent, 0, 1, this.options.duration

我认为缓和功能肯定需要将持续时间纳入算法。那么这里发生了什么?

由于

1 个答案:

答案 0 :(得分:1)

TL;博士

它根据动画的完成百分比确定属性值的距离。 swing开始和结束都很慢,linear是一个恒定的速度。

长版

假设您想要将元素的高度从100px更改为200px,超过1秒。我们可以将高度从100改为200然后再等一秒,但这看起来真的很糟糕。我们真正想要的是一种方法,将持续时间缩短为一堆,然后在任何给定的时间点确定应该的高度。

要解决第一个问题(分块时间),我们只需定义一个任意速率,就像每秒50个块一样。要解决第二个问题(一段时间后的高度是多少?),我们将定义一个数学函数:currentHeight = (timeSinceStart / duration) * 100 + 100

现在我们可以开始计算数据块,运行数字,并平滑地改变高度。 102px,104px,106px,108px ......这是线性缓动,因为随着时间的推移,值会线性变化,看起来非常好!

但是,我们可以做得更好。真实物体具有重量和惯性,这使得它们更难以启动和停止,但更容易保持移动。他们没有开始全速前进,我们不得不放慢速度让他们停下来。模拟这种情况的一种方法是使用全能三角法来调整缓动/定时功能,得到如下结果:currentHeight = (0.5 - cos((timeSinceStart / duration) * pi) / 2) * 100 + 100

jQuery称之为 swing easing ,因为该值似乎像钟摆一样摆动。原生CSS转换计时功能简称为ease-in-out。有趣的是,当您开始精心编排动画并编写自定义计时功能以暗示特定重量或摩擦到您的界面元素时。大事物往往很重,微小的东西惯性很小,危险的开关故意难以翻转。