7-3 动画思路
本节编程练习不计算学习进度，请电脑登录imooc.com操作

动画思路

jQuery 的动画为了稳定与兼容的的选择，所以即使在目前的 2.1.1 的版本中也是采用的帧动画而不是最新的 CSS3 动画，至于原因当然有很多我们这里就只涉及框架的帧动画的处理，帧动画的实现动画的原理跟动画片的制作一样。动画片是把一些差距不大的原画以一定帧数播放, js 动画是靠连续改变元素的某个 css 属性值,比如 left, top 达到视觉的动画效果。

book.animate({
    left: '+=50',
}).animate({
    left: '+=100',
}).animate({
    left: '-=50',
});

这里是一组最简单的动画，但是在设计上会有一个最重要的问题：

因为动画是异步的，但是 animate 方法的链式代码是同步的，所以这里要涉及一个最重要的问题，动画队列要如何有序的调用?

传统的思路

jQuery 为动画量身定制了队列机制，我们的思路可以是这样

总结

两方方法都是利用异步收集同步的代码，区别就是一个是靠定时器，一个是靠动画自身，所以在精确度上来说显然是动画自身控制是最合理的。好比我们去面试，面试官只要让每一个面试完毕的人去通知后面的人继续进来面试一样，如此反复

右边代码，请在支持 webkit 的浏览器下面调试，谷歌、急速360。

任务

index.html 
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  5. 	<title>动画思路</title>
  6. </head>
  7. <body>
  8. 请在支持webkit的浏览器下面调试，谷歌、急速360
  9. <div id="div1" style="width:100px;height:50px;background:red;cursor:pointer;color:#fff;text-align:center;line-height:50px;">点击执行动画</div>
  10.  
  11. <script type="text/javascript">
  12.  
  13.  
  14. (function($) {
  15.  
  16.     window.$ = $;
  17.  
  18. })(function() {
  19.  
  20.     var rquickExpr = /^(?:#([\w-]*))$/;
  21.  
  22.     function aQuery(selector) {
  23.         return new aQuery.fn.init(selector);
  24.     }
  25.  
  26.     /**
  27.      * 动画
  28.      * @return {[type]} [description]
  29.      */
  30.     var animation = function() {
  31.         var self = {};
  32.         var Queue = []; //动画队列
  33.         var fireing = false //动画锁
  34.         var first = true; //通过add接口触发
  35.  
  36.         var getStyle = function(obj, attr) {
  37.             return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
  38.         }
  39.  
  40.         var makeAnim = function(element, options, func) {
  41.             var width = options.width
  42.                 //包装了具体的执行算法
  43.                 //css3
  44.                 //setTimeout
  45.             element.style.webkitTransitionDuration = '2000ms';
  46.             element.style.webkitTransform = 'translate3d(' + width + 'px,0,0)';
  47.  
  48.             //监听动画完结
  49.             element.addEventListener('webkitTransitionEnd', function() {
  50.                 func()
  51.             });
  52.         }
  53.  
  54.         var _fire = function() {
  55.             //加入动画正在触发
  56.             if (!fireing) {
  57.                 var onceRun = Queue.shift();
  58.                 if (onceRun) {
  59.                     fireing = true;
  60.                     //next
  61.                     onceRun(function() {
  62.                         fireing = false;
  63.                         _fire();
  64.                     });
  65.                 } else {
  66.                     fireing = true;
  67.                 }
  68.             }
  69.         }
  70.  
  71.         return self = {
  72.             //增加队列
  73.             add: function(element, options) {
  74.                 Queue.push(function(func) {
  75.                     makeAnim(element, options, func);
  76.                 });
  77.  
  78.                 //如果有一个队列立刻触发动画
  79.                 if (first && Queue.length) {
  80.                     first = false;
  81.                     self.fire();
  82.                 }
  83.             },
  84.             //触发
  85.             fire: function() {
  86.                 _fire();
  87.             }
  88.         }
  89.     }();
  90.  
  91.  
  92.     aQuery.fn = aQuery.prototype = {
  93.         run: function(options) {
  94.             animation.add(this.element, options);
  95.             return this;
  96.         }
  97.     }
  98.  
  99.     var init = aQuery.fn.init = function(selector) {
  100.         var match = rquickExpr.exec(selector);
  101.         var element = document.getElementById(match[1])
  102.         this.element = element;
  103.         return this;
  104.     }
  105.  
  106.     init.prototype = aQuery.fn;
  107.  
  108.     return aQuery;
  109. }());
  110.  
  111. //dom
  112. var oDiv = document.getElementById('div1');
  113.  
  114. //调用
  115. oDiv.onclick = function() {
  116.     $('#div1').run({
  117.         'width': '500'
  118.     }).run({
  119.         'width': '300'
  120.     }).run({
  121.         'width': '1000'
  122.     });
  123. };
  124.  
  125.  
  126. </script>
  127. </body>
  128. </html>
下一节