jQuery缓动动画

发表于 | 分类于 |

我们很多前端初学者在刚接触 jQuery 的时候都会使用 jQuery 的 animate()方法来做一些动画效果。但是 jQuery animate()方法默认的动画在有的时候看起来会比较生硬，过度效果不那么好。那该怎么办呢？

首先，animate()方法可选的第二个参数中可以传入 duration 和 complete 属性，分别代表动画持续时间和动画完成的回调函数，如：

1
$(selector).animate({...},{duration:time,complete:callback});		//duration的也可以为'fast','slow'

不用担心，jQuery 中已经考虑到了这种情况，因此，jQuery 引入了一个“缓动函数”，来产生一个基于时间的完成百分比映射到动画效果的百分比。jQuery 会在调用缓动函数时传入一个基于时间的 01 的值，缓动函数就会根据返回另一个 01 的值，然后根据返回值计算 css 的属性。

缓动函数会在传入 0 时返回 0，在传入 1 时返回 1.当然，在 0~1 之间的缓动函数可以是各种形式的，这可以让动画更生动。

jQuery 的默认缓动动画是正弦函数，开始很慢，接着加速，然后再缓慢“缓动”变化到终值。jQuery 中的缓动动画都有名字，默认的缓动函数名为“swing”，还有一个线性的缓动动画“linear”，当然你也可以自定义缓动函数到 jQuery.easing 对象上，如：

1
jQuery.easing["squareroot"] = Math.sqrt;

当然，这仅仅是不够的。jQuery UI 类库中，有一个 jQuery 缓动插件，它定义了一套更复杂的缓动函数。

使用之前，先引入 jQuery 和 easeing.js，然后再调用 animate 的时候加上 duration 参数，其中 duration 为动画时间，easing 为动画函数，complete 为回调函数。

1.jQuery 默认动画，支持 toggle()、slideUp()、slideDown()、show()、hide()、等 jQuery 内置动画，如：

1
2
3
4
5
$(selector).toggle({
	duration: time,
	easing: method,
	complete: callback,
});

2.使用 jQuery 自定义函数 animate()

1
2
3
4
5
6
7
$(selector).animate({
	...
	},{
	easeing: method,
	duration: time,
	complete: callback
});

easeing.js 中提供了多种效果，点击查看 easing 的各种动画效果。

[越努力，越幸运！]