Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jQuery动画的实现

jQuery动画的实现

发布时间:2016-09-17   编辑:www.jquerycn.cn
jquery中文网为您提供jQuery动画的实现等资源,欢迎您收藏本站,我们将为您提供最新的jQuery动画的实现资源

没有引入deferred机制,其余流程都有了

//////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation) {     this.elem    = animation.elem;     this.prop    = prop;     this.easing  = "swing"; //动画缓动算法     this.options = animation.options;     //获取初始值     this.start   = this.now = this.get();     //动画最终值     this.end     = value;     //单位     this.unit    = "px" }  function getStyles(elem) {     return elem.ownerDocument.defaultView.getComputedStyle(elem, null); };  function swing(p) {     return 0.5 - Math.cos(p * Math.PI) / 2; }  Tween.prototype = {     //获取元素的当前属性     get: function() {         var computed = getStyles(this.elem);         var ret = computed.getPropertyValue(this.prop) || computed[this.prop];         return parseFloat(ret);     },     //运行动画     run:function(percent){         var eased         //根据缓动算法改变percent         this.pos = eased = swing(percent);         //获取具体的改变坐标值         this.now = (this.end - this.start) * eased + this.start;         //最终改变坐标         this.elem.style[this.prop] = this.now + "px";         return this;     } }   //////// //动画类 // //////// function Animation(elem, properties, options){     //动画对象     var animation = {         elem            : elem,         props           : properties,         originalOptions : options,         options         : options,         startTime       : Animation.fxNow || createFxNow(),//动画开始时间         tweens          : [] //存放每个属性的缓动对象,用于动画     }      //生成属性对应的动画算法对象     for (var k in properties) {         // tweens保存每一个属性对应的缓动控制对象         animation.tweens.push( new Tween(properties[k], k, animation) )     }      //动画状态     var stopped;     //动画的定时器调用包装器     var tick = function() {         if (stopped) {             return false;         }         //动画时间算法         var currentTime = Animation.fxNow || createFxNow             //运动时间递减             remaining = Math.max(0, animation.startTime + animation.options.duration - currentTime),             temp = remaining / animation.options.duration || 0,             percent = 1 - temp;          var index = 0,             length = animation.tweens.length;          //执行动画改变         for (; index < length; index++) {             //percent改变值             animation.tweens[index].run(percent);         }          //是否继续,还是停止         if (percent <= 1 && length) {             return remaining;         } else {             //停止             return false;         }      }     tick.elem = elem;     tick.anim = animation      Animation.fx.timer(tick) }      //创建开始时间 function createFxNow() {     setTimeout(function() {         Animation.fxNow = undefined;     });     return (Animation.fxNow = Date.now()); }   //用于定时器调用 Animation.timers =[]  Animation.fx = {     //开始动画队列     timer: function(timer) {         Animation.timers.push(timer);         if (timer()) {             //开始执行动画             Animation.fx.start();         } else {             Animation.timers.pop();         }     },     //开始循环     start: function() {         if (!Animation.timerId) {             Animation.timerId = setInterval(Animation.fx.tick, 13);         }     },     //停止循环     stop:function(){         clearInterval(Animation.timerId);         Animation.timerId = null;     },     //循环的的检测     tick: function() {         var timer,             i = 0,             timers = Animation.timers;          Animation.fxNow = Date.now();          for (; i < timers.length; i++) {             timer = timers[i];             if (!timer() && timers[i] === timer) {                 //如果完成了就删除这个动画                 timers.splice(i--, 1);             }         }          if (!timers.length) {             Animation.fx.stop();         }         Animation.fxNow = undefined;     } }

 

测试:


您可能感兴趣的文章:
jQuery中实现动画效果的基本操作介绍
QuickSand
Jquery 自定义动画概述及示例
jQuery鼠标动画插件 jquery-ahover
jQuery实现CSS3动画效果的插件 jQuery Transit
Jquery实现简单的动画效果代码
jQuery 动画基础教程
jQuery Animation实现CSS3动画示例介绍
分享几个超级震憾的图片特效
jQuery动画animate方法使用介绍

[关闭]