网站建设中前端常用的jQuery+easing缓动的动画

网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错!

下载该插件:jquery.easing.1.3.js jquery.easing.compatibility.js

该插件美化排版后是130行左右,压缩后更小。这个插件弥补了jquery里面的动画效果的不足,是其动画效果更加强悍。

X轴表示时间,Y轴表示的是动画效果的变化。查看这些曲线变化,更利于掌握这个插件的效果。

插件支持站:http://gsgd.co.uk/sandbox/jquery/easing/

效果演示站点:http://james.padolsey.com/demos/jquery/easing/

我们可以通过效果演示站点查看具体运行效果,也可以通过坐标标注的直观效果来了解其运行具体轨迹。例如下图:

技术分享

 

常用参数:

  • linear
  • swing
  • jswing
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce

 

方法介绍:

  • def:默认方式设置
  • swing:默认方式加载
  • Quad:二次方缓动(t)
  • Cubic:三次方缓动
  • Quart:四次方缓动
  • Quint:五次方缓动
  • Sine:正弦曲线缓动
  • Expo:指数曲线缓动
  • Circ:圆形曲线的缓动
  • Elastic:指数衰减的正弦曲线缓动
  • Back:超过范围的三次方缓动
  • Bounce:指数衰减的反弹缓动

关于In、Out、Inout的说明:

  • easeIn:加速度缓动;
  • easeOut:减速度缓动;
  • easeInOut:先加速度至50%,再减速度完成动画。

如何应用:

slideUp|slideDown|slideToggle|fadeIn|fadeOut|fadeToggle

$(element).slideUp(duration,easing,[callback]);

fadeTo

$(element).fadeTo(duration,opacity,easing,[callback]);

animate

$(element).animate({properties},duration,easing,callback);

jQuery1.4+版本更可以:

$(element).animate({left:[100,‘swing‘],top:[100,‘easeOutBounce‘]});

或者

jQuery(myElement).animate({left:100,top:100},{specialEasing:{left: ‘swing‘,top:‘easeOutBounce‘}});

具体可参阅jquery1.4+的API。

简单实例:

 

  1. <script type="text/javascript" language="javascript" src="JS/jquery.js"></script
  2. <script type="text/javascript" language="javascript" src="JS/easing.js"></script
  3. <script language="javascript" type="text/javascript"
  4. $(document).ready(function(){ 
  5. $("#xxxx").stop(true,false).animate({left : -320},1500,‘easeOutElastic‘); 
  6. }) 
  7. </script

 

 

开始使用jQuery Easing

方法1、设置jQuery默认动画效果

 

  1. jQuery.easing.def = “method”;//如:easeOutExpo 

 

方法2、jQuery默认动画

支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果

如以下代码:

 

  1. $(element).slideUp({ 
  2.  
  3.     duration: 1000,  
  4.  
  5.     easing: method,  
  6.  
  7.     complete: callback}); 

 

方法3、使用jQuery自定义动画函数.animate()

jQuery 的.animate()是自定义动画的函数,如上面所说,有四个参数,而其中easing的参数就是我们进行动画效果扩展的方法名称(如easeOutExpo)。网站建设中最简单的使用方法是:

 

  1. $(myElement).animate({ 
  2.  
  3.     left: 500, 
  4.  
  5.     top: 500 
  6.  
  7. }, ‘easeOutExpo‘); 
  8.  
  9. James Padolsey对jQuery1.3.2的animate函数进行了修改扩展: 
  10.  
  11.  
  12. jQuery.fn.animate = (function(_anim){ 
  13.  
  14. var jQEasing = jQuery.easing; 
  15.  
  16. return function(prop, duration, easing, callback) { 
  17.  
  18. var props = {}, optall, i, hasEaser = false; 
  19.  
  20. for ( i in prop ) { 
  21.  
  22. if ( jQuery.isArray(prop[i]) ) { 
  23.  
  24. hasEaser = true; 
  25.  
  26. props[i] = prop[i][1]; 
  27.  
  28. prop[i] = prop[i][0]; 
  29.  
  30.  
  31.  
  32. opt = jQuery.speed(duration, easing, callback); 
  33.  
  34. if (hasEaser) { 
  35.  
  36. opt.step = (function(_step){ 
  37.  
  38. return function(now, fx) { 
  39.  
  40. var end = fx.end, easeFn; 
  41.  
  42. if ( easeFn = props[fx.prop] ) { 
  43.  
  44. fx.now = jQEasing[easeFn]( now/end, now, 0, end, end ); 
  45.  
  46.  
  47. _step && _step.call( fx.elem, fx.now, fx ); 
  48.  
  49. }; 
  50.  
  51. })(opt.step); 
  52.  
  53.  
  54. optopt.complete = opt.old || callback || jQuery.isFunction(easing) && easing; 
  55.  
  56. return _anim.call( this, prop, opt ); 
  57.  
  58. }; 
  59.  
  60. })(jQuery.fn.animate);  

 

在jQuery1.4中这种方式已经被引入,所以jQuery1.4中不需要添加jQuery的animate()扩展,我们就可以使用下面的更加方便代码啦:

 

  1. $(myElement).animate({ 
  2.  
  3.     left: 500, 
  4.  
  5.     top: [500, ‘easeOutBounce‘]  
  6.  
  7. }, 1000,‘swing‘); 

 

 

jQuery1.4 的animate()+Easing

 

 

  1. jQuery(myElement).animate({ 
  2.  
  3. left: [500, ‘swing‘], 
  4.  
  5. top: [200, ‘easeOutBounce‘] 
  6.  
  7. }); 
  8.  
  9. 或者: 
  10.  
  11. jQuery(myElement).animate({ 
  12.  
  13. left: 500, 
  14.  
  15. top: 200 
  16.  
  17. }, { 
  18.  
  19. specialEasing: { 
  20.  
  21. left: ‘swing‘, 
  22.  
  23. top: ‘easeOutBounce‘ 
  24.  
  25.  
  26. });  

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。