Jquery中文網 www.4271936.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 jQuery動畫的實現

jQuery動畫的實現

發布時間:2016-09-17   編輯:www.4271936.live
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 UI 實例 – 顏色動畫(Color Animation)
jQuery UI API – Easings
jQuery jQuery.speed 方法
jQuery Animation實現CSS3動畫示例介紹
jQuery實現動畫效果的簡單實例
jQuery aminate方法定位到頁面具體位置
jQuery 效果 – 停止動畫
jquery 跳到頂部和底部動畫2句代碼簡單實現
使用jQuery實現的擲色子游戲動畫效果
jQuery :animated 選擇器

[關閉]
微信下载APP完成任务如何赚钱 股票投资入门 重庆时时开奖结果查询2020 北京pk拾计划软件手机 甘肃休彩11选5走势图 融资买入股票很好佳永配资(融资买入股票) 黑龙江11选5一定年 河南快三投注网站 上海期货配资 大乐透开奖结果中奖 体彩排列3走势图