>

liner控制动画过程不同时刻的速度

- 编辑:正版管家婆马报彩图 -

liner控制动画过程不同时刻的速度

jQuery效果函数(slideUp()、fadeIn()等)和animation()函数都收到另贰个用来支配动画进程的快慢的参数,那就是缓动(easing),它规定了动画进度差别随时的速度。举个例子,将四个因素移过页面包车型大巴时候,大概让这些成分缓慢地起头运动,然后变得急迅,最终随着动画的成功再度慢下来。给动画增添缓动,使得动画在视觉上更有趣且更有动态感。

jQuery只满含了多个缓动方法:swing和linear。linear方法提供了一个平稳的动画片,以使得动画的种种步骤都是一模二样的(举个例子,借使要让三个因素以渐渐转换的措施通过显示器,每一步的偏离和前一步都以均等的)。swing要特别动态一些,随着动画的上马变得越发速局地,然后再慢下来。swing是多少个常用设置,因而,若无一点名其余缓动,jQuery会使用swing方法。

对于其余jQuery效果来讲,缓动方法是其第3个参数,由此,要动用linear方法将一个要素滑出视界,能够如此编写代码:

复制代码 代码如下:

$('#element'). slideUp(1000,'linear');

当使用animate()函数的时候,缓动方法是第多少个参数,第贰个参数是七个对象直接量,满含了笔者们想要达成动画的CSS属性;第2个参数是卡通的全体进程。比如,要对动画片代码应用linear缓动方法,能够像上边这样编写代码:

复制代码 代码如下:

$('#message').animate(
{
left:'650px',
opacity:.5,
fontSize:'24px'
},
1500,
'linear'
);

但是,并不只限于使用jQuery所提供的五个缓动方法。使用jQuery插件能够加多一层层的其余的缓动方法。

...

本文由web前端发布,转载请注明来源:liner控制动画过程不同时刻的速度