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//根据缓动算法改变percentthis.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 = animationAnimation.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;}
}

测试：

<!doctype html>

<button id="one">jQuery动画的模拟实现:left:50</button> <button id="two">jQuery动画的模拟实现:left:500</button><ul id="book" style="background:red;opacity:1;position: relative; left: 300px;width:200px;height:100px;display:inline;" data-mce-style="background: red; opacity: 1; position: relative; left: 300px; width: 200px; height: 100px; display: inline;"></ul><script type="mce-text/javascript"> var book = document.getElementById('book'); var $book = $('#book'); var i = 10 while(i){ $book.append("<li>11</li>") i--; } //创建动画缓动对象 // 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; } } $("#one").click(function(){ Animation(book, { left: '50' }, { duration: 2000 }) }); $("#two").click(function() { Animation(book, { left: '500' }, { duration: 2000 }) }); </script>

jQuery动画的实现相关推荐

js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些一.总结一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
Java程序员从笨鸟到菜鸟之（九十一）跟我学jquery（七）jquery动画大体验
本文来自:曹胜欢博客专栏.转载请注明出处:http://blog.csdn.net/csh624366188 最近一直感觉自己好忙,每天都浑浑噩噩的过着,转眼间,好像有好长时间没有更新笨鸟到菜鸟了.现 ...
从零开始学习jQuery (七) jQuery动画-让页面动起来!
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
JQuery-学习笔记05【高级——JQuery动画和遍历】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
jQuery 动画效果
1.基本效果 (1)隐藏 hide() hide(speed [,callback]) (2)显示 show() show(speed [,callback]) (3)交替显示隐藏 toggle() ...
jquery笔记一：下载安装、语法、选择器、遍历选择元素的方法、jQuery动画
目前 jQuery 兼容于所有主流浏览器, 包括 IE 6!开发时常用 jquery.js,上线用 jquery.min.js. jq插件目前jQuery有三个大版本: (1)1.x.x: 兼容ie ...
jQuery框架学习第七天：jQuery动画–jQuery让页面动起来!
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
js进阶 13 jquery动画函数有哪些
js进阶 13 jquery动画函数有哪些一.总结一句话总结: 二.jquery动画函数有哪些原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...
[原创]jQuery动画弹出窗体支持多种展现方式
今天刚写的利用jQuery动画弹出窗体,支持了string.Ajax.iframe.controls四种展现方式,具体细节下面慢慢介绍,先看效果图. 动画效果从哪个对象上触发的即从该对象开始逐渐向屏 ...
jquery动画切换引擎插件 Velocity.js 学习01
一.Velocity.js介绍 Velocity是一个jQuery插件,重新实现了$.animate() 来产生更高的性能(速度也比CSS动画库更快),而包括新的功能,以提高动画工作流程. Veloc ...

jQuery动画的实现

jQuery动画的实现相关推荐

最新文章

热门文章