jQuery缓动图表

3

我刚刚找到了jQuery Easing插件的图解(图形化),链接在这里:http://james.padolsey.com/demos/jquery/easing/

这些图形到底代表什么意思。

我曾经尝试过多次使用/分析Easing插件,但我从未真正理解它的功能。

是否有人能够解释一下如何弄清楚它的工作原理?

3个回答

4

这样想...

  • 盒子的左下角是动画的起点。
  • 右侧是动画的终点,越靠上,距离起点越远。
  • 底部(或顶部)的长度显示了总动画时间的流逝程度。
  • 缓动函数确定如何在两个点之间的设定动画时间内或者说是距离/时间的速率内,在距离范围内对元素进行动画处理。

因此,如果你看到一个水平线或曲线接近水平线,那么就不会有任何动画(或最小动画),因为随着时间的推移,距离没有改变。

而线条越陡峭(向上或向下),元素就越快地穿过距离。


1

这是动画的初始速度、中间速度和最终速度。


0

阅读这段文字 - 它解释了图表代表的内容。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接