jquery.easing.1.3.js这个插件有什么作用功能么?

JavaScript021

jquery.easing.1.3.js这个插件有什么作用功能么?,第1张

jquery.easing.js 1.3 是一个配合jquery实现完美动画效果的扩展插件,比如我们在使用jquery制作一幅图片滚动或图片渐变,使用本插件可扩展或增强jquery性能,生成完美无缺兼容性更好的jquery动画来,它不仅可以用于图像特效,像一些基础的层操作也可以使用。

easing.js中有以下效果

jswing

def

easeInQuad easeOutQuad easeInOutQuad

easeInCubic easeOutCubic easeInOutCubic

easeInQuart easeOutQuart easeInOutQuart

easeInQuint easeOutQuint easeInOutQuint

easeInSineeaseOutSineeaseInOutSine

easeInExpo easeOutExpo easeInOutExpo

easeInCirceaseOutCirc easeInOutCirc

easeInElasticeaseOutElastic easeInOutElastic

easeInBack easeOutBackeaseInOutBack

easeInBounce easeOutBounceeaseInOutBounce

具体每一个效果是做什么的 楼主可以慢慢试

从上面的可以看出 每一种 都分为 In OutInOut

In:是指动画开始的时候 具有这个效果

Out:是指动画结束的时候具有这个效果

InOut:是指动画开始和结束的时候都具有这个效果

Elastic:就是具有弹簧效果的(easeInElastic[开始时弹簧]、easeOutElastic[结束时弹簧]、easeInOutElastic[开始和结束都弹簧])

使用方法:

<script type="text/javascript" language="javascript" src="JS/jquery.js"></script>

<script type="text/javascript" language="javascript" src="JS/easing.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function(){

$("#xxxx").stop(true,false).animate({left : -320},1500,'easeOutElastic')

})

</script>

easeInOutBack中的方程(其中c=1, b=0),要分成两段,

前半段:c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b

后半段:c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b

这两个方程模式均为,只是t的范围和系数不同:

f(t) = at^3+bt^2

easeInOutBack中的常数1.70158 = b,其中的 a = 1.525*b + 1。

至于1.525怎么来的,简单的说,在对接两个分段函数时,需要一系列的函数变换(拉伸、对称变换),然后一步步推算出来,计算过程比较复杂。。。

//---------看错提问了,补充答案---------

x 总时间进度,即x = t/d

t 当前动画执行时间(毫秒)

b 常数0

c 常数1

d 动画总的持续时间

s 自定义的参数