3-2 精灵动画的实现
本节编程练习不计算学习进度，请电脑登录imooc.com操作

精灵动画的实现

CSS Sprites在国内很多人叫CSS精灵，其实这个技术不新鲜，原理就是：靠不断的切换图片让人感觉视觉上不断在变化，例如gif动画之类的效果

那么前端如何实现精灵效果？

传统的就是靠定时器不断去改变一个元素的background-image属性了，简单的来说就是靠不断的替换图片，但是值得注意的问题就是图片如果很多，加载会比较慢，会占用大量网络资源

大多数的做法就是把图片都合成一张大图再利用CSS的以下属性

background-image
background-repeat
background-position

组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置

这里我将采用最新的CSS3的动画实现。通过 CSS3我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

新增一个class类slowWalk，在这个类中定义一个animation，通过关键帧keyframes定义一些规则，就是如何取图片坐标

右边代码区域所示，为方便理解，解读一下样式的slowWalk类定义规则：

定义一个名为person-slow的@keyframes规则，@keyframes用百分比来规定变化发生的时间， 0% 是动画的开始，100% 是动画的完成，规则中有4个百分比值的变化，每个比值分别通过position获取一张图片，分别是0%,25%,50%,75%,100%。在950毫米内从0%-100%发生4次变化，采用的算法是steps(1, start)一帧一帧的切换，通过设置infinite参数每950毫秒不断循环

通过点击开始动画按钮，我们可以看到最终效果，完全靠CSS实现，非常nice!!!!

任务

打开index.html文件，在代码的23行填入相应代码，通过定义个CCS3的样式规则，让人物开始进行帧动画切换

    /*规定 @keyframes 动画的名称。*/
    -webkit-animation-name: person-slow; 
    /*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/
    -webkit-animation-duration: 950ms;
    /*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/
    -webkit-animation-iteration-count: infinite;
    /*动画切换的方式是一帧一帧的改变*/
    -webkit-animation-timing-function: steps(1, start);
    -moz-animation-name: person-slow;
    -moz-animation-duration: 950ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: steps(1, start)
index.htmlSwipe.jspageA.cssstyle.css 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title>慕课七夕主题</title>
  7.     <link rel='stylesheet' href='style.css' />
  8.     <link rel='stylesheet' href='pageA.css' />
  9.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  10.     <script type="text/javascript" src="Swipe.js"></script>
  11. </head>
  12. <style type="text/css">
  13.     .charector {
  14.         position: absolute;
  15.         left: 6%;
  16.         top: 55%;
  17.         width: 151px;
  18.         height: 291px;
  19.         background: url(http://img1.sycdn.imooc.com//55ade248000198ae10550582.png) -0px -291px no-repeat;
  20.     }
  21.  
  22.     .slowWalk {
  23.          /* 填入动画样式规则 */
  24.     }
  25.  
  26.     /* 普通慢走 */
  27.  
  28.     @-webkit-keyframes person-slow {
  29.         0% {
  30.             background-position: -0px -291px;
  31.         }
  32.         25% {
  33.             background-position: -602px -0px;
  34.         }
  35.         50% {
  36.             background-position: -302px -291px;
  37.         }
  38.         75% {
  39.             background-position: -151px -291px;
  40.         }
  41.         100% {
  42.             background-position: -0px -291px;
  43.         }
  44.     }
  45.  
  46.     @-moz-keyframes person-slow {
  47.         0% {
  48.             background-position: -0px -291px;
  49.         }
  50.         25% {
  51.             background-position: -602px -0px;
  52.         }
  53.         50% {
  54.             background-position: -302px -291px;
  55.         }
  56.         75% {
  57.             background-position: -151px -291px;
  58.         }
  59.         100% {
  60.             background-position: -0px -291px;
  61.         }
  62.     }
  63. </style>
  64.  
  65. <body>
  66.     <div id='content'>
  67.         <ul class='content-wrap'>
  68.             <li>
  69.                 <div class="a_background">
  70.                     <div class="a_background_top"></div>
  71.                     <div class="a_background_middle"></div>
  72.                     <div class="a_background_botton"></div>
  73.                 </div>
  74.             </li>
  75.             <li> 页面2 </li>
  76.             <li> 页面3 </li>
  77.         </ul>
  78.         <div id="boy" class="charector"></div>
  79.         <div class="button">
  80.             <button>点击开始动画</button>
  81.         </div>
  82.     </div>
  83.     <script type="text/javascript">
  84.     var swipe = Swipe($("#content"));
  85.  
  86.     // 获取数据
  87.     var getValue = function(className) {
  88.         var $elem = $('' + className + '');
  89.             // 走路的路线坐标
  90.         return {
  91.             height: $elem.height(),
  92.             top: $elem.position().top
  93.         };
  94.     }
  95.  
  96.     // 路的Y轴
  97.     var pathY = function() {
  98.         var data = getValue('.a_background_middle');
  99.         return data.top + data.height / 2;
  100.     }();
  101.  
  102.     var $boy = $("#boy");
  103.     var boyHeight = $boy.height();
  104.  
  105.     // 修正小男孩的正确位置
  106.     $boy.css({
  107.         top: pathY - boyHeight + 25
  108.     });
  109.  
  110.     // ==========================
  111.     //     增加精灵动画
  112.     // ==========================
  113.  
  114.     $('button').click(function(){
  115.         // 增加走路的CSS3关键帧规则
  116.         $boy.addClass('slowWalk');
  117.     });
  118.  
  119.  
  120.     </script>
  121. </body>
  122.  
  123. </html>
  1. /////////
  2. //页面滑动 //
  3. /////////
  4.  
  5. /**
  6.  * [Swipe description]
  7.  * @param {[type]} container [页面容器节点]
  8.  * @param {[type]} options   [参数]
  9.  */
  10. function Swipe(container) {
  11.     // 获取第一个子节点
  12.     var element = container.find(":first");
  13.     var swipe = {};
  14.  
  15.     // li页面数量
  16.     var slides = element.find("li");
  17.  
  18.     // 获取容器尺寸
  19.     var width = container.width();
  20.     var height = container.height();
  21.  
  22.     // 设置li页面总宽度
  23.     element.css({
  24.         width: (slides.length * width) + 'px',
  25.         height: height + 'px'
  26.     });
  27.  
  28.     // 设置每一个页面li的宽度
  29.     $.each(slides, function(index) {
  30.         var slide = slides.eq(index); // 获取到每一个li元素    
  31.         slide.css({
  32.             width: width + 'px',
  33.             height: height + 'px'
  34.         });
  35.     });
  36.  
  37.     // 监控完成与移动
  38.     swipe.scrollTo = function(x, speed) {
  39.         // 执行动画移动
  40.         element.css({
  41.             'transition-timing-function' : 'linear',
  42.             'transition-duration'        : speed + 'ms',
  43.             'transform'                  : 'translate3d(-' + x + 'px,0px,0px)'
  44.         });
  45.         return this;
  46.     };
  47.  
  48.     return swipe;
  49. }
  1. /*背景图*/
  2.  
  3. .a_background {
  4.     width: 100%;
  5.     height: 100%;
  6.     position: absolute;
  7. }
  8.  
  9. .a_background_top{
  10.     width: 100%;
  11.     height: 71.6%;
  12.     background-image: url("http://img1.sycdn.imooc.com//55addf6900019d8f14410645.png");
  13.     background-size: 100% 100%;
  14. }
  15.  
  16.  
  17. .a_background_middle{
  18.     width: 100%;
  19.     height: 13.1%;
  20.     background-image: url("http://img1.sycdn.imooc.com//55addf800001ff2e14410118.png");
  21.     background-size: 100% 100%;
  22. }
  23.  
  24. .a_background_botton{
  25.     width: 100%;
  26.     height: 15.3%;
  27.     background-image: url("http://img1.sycdn.imooc.com//55addfcb000189b314410138.png");
  28.     background-size: 100% 100%;
  29. }
  1. * {
  2.         padding: 0;
  3.         margin: 0;
  4.     }
  5.  
  6.     ul,
  7.     li {
  8.         list-style-type: none;
  9.     }
  10.  
  11.     /*主体部分*/
  12.     #content {
  13.         width: 100%;
  14.         height: 100%;
  15.         /* top: 20%; */
  16.         overflow: hidden;
  17.         position: absolute;
  18.     }
  19.  
  20.     .content-wrap {
  21.         position: relative;
  22.     }
  23.  
  24.     .content-wrap > li {
  25.         float: left;
  26.         overflow: hidden;
  27.         position: relative;
  28.     }
  29.  
  30.     button {
  31.         width: 100px;
  32.         height: 50px;
  33.     }
  34.  
  35.     .button {
  36.         position: absolute;
  37.         bottom: 0;
  38.     }
下一节