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

路径动画的处理

路径动画就是你想某个东西按照你预想的路径来运动。比如说一片树叶从树上落下来，具体要怎样落下来，你就可以画一条线作为路径，让树叶沿着线落下来，这就是路径动画。

在这个七夕的主题效果中，小男孩除了沿着一条直线行走外，还会在不同的时间段有不同的速率，除此之外在进出商店与上桥也是非直线的变化，因此需要为人物的路径变化做一个统一的处理方式

我们把小男孩子所有的动作分解一下

注意：小男孩走路范围其实只有一个页面区域，因为父容器是content元素

小男孩不管是往X还是Y轴变化，我们可以做一个比例换算出来，按照百分比的比例去换算实际的距离

例如：走到1/2的位置 ，具体的坐标值的计算就是 ： 实际X轴位置 = 0.5 * 页面宽度 ，同样Y轴的计算也是如此

那么我们可以把人物走路的接口封装下，传递一个想要的距离比，这样就可以很方便的指定走到某一个位置了

为什么这么麻烦？ 因为是自适应布局，分辨率是变化的，所以用百分比的比值比较好定位位置

具体我们可以看右边代码的实现：

我们把代码封装后，只需要设置一个时间，X与Y的一个比例，就可以让目标移动到指定的位置了

var distX = calculateDist('x', 0.5)
var distY = calculateDist('y', 0.5)
walkRun(10000, distX, distY)

这里要注意坐标位是以小孩男的左上角0,0开始的，所以人物的实际位置看起来可能不是在正中间。

任务

index.htmlQixi.jsSwipe.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.     <style type="text/css">
  10.     button {
  11.         width: 80px;
  12.         height: 50px;
  13.     }
  14.  
  15.     .button {
  16.         position: absolute;
  17.         bottom: 0;
  18.     }
  19.     /*人物暂停*/
  20.  
  21.     .pauseWalk {
  22.         animation-play-state: paused;
  23.     }
  24.     </style>
  25.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  26.     <script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
  27. </head>
  28.  
  29. <body>
  30.     <div id='content'>
  31.         <ul class='content-wrap'>
  32.             <li>
  33.                 <div class="a_background">
  34.                     <div class="a_background_top"></div>
  35.                     <div class="a_background_middle"></div>
  36.                     <div class="a_background_botton"></div>
  37.                 </div>
  38.             </li>
  39.             <li> 页面2 </li>
  40.             <li> 页面3 </li>
  41.         </ul>
  42.         <div id="boy" class="charector"></div>
  43.     </div>
  44.     <div class="button">
  45.         <button>开始</button>
  46.     </div>
  47. </body>
  48. <script type="text/javascript">
  49. $(function() {
  50.  
  51.     // 开始
  52.     $("button:first").click(function() {
  53.         // 10秒钟 ，走到0.5 也就是页面中间位置
  54.         var distX = calculateDist('x', 0.5);
  55.         var distY = calculateDist('y', 0.5);
  56.         walkRun(10000, distX, distY);
  57.     });
  58.  
  59. })
  60. </script>
  61. <script type="text/javascript" src="Swipe.js"></script>
  62. <script type="text/javascript" src="Qixi.js"></script>
  63.  
  64. </html>
  1. var container = $("#content");
  2. // 页面可视区域
  3. var visualWidth = container.width();
  4. var visualHeight = container.height();
  5.  
  6. var swipe = Swipe(container);
  7. // 获取数据
  8. var getValue = function(className) {
  9.     var $elem = $('' + className + '');
  10.         //走路的路线坐标
  11.     return {
  12.         height: $elem.height(),
  13.         top: $elem.position().top
  14.     };
  15. }
  16. // 路的Y轴
  17. var pathY = function() {
  18.     var data = getValue('.a_background_middle');
  19.     return data.top + data.height / 2;
  20. }();
  21. var $boy = $("#boy");
  22. var boyHeight = $boy.height();
  23. // 修正小男孩的正确位置
  24. $boy.css({
  25.     top: pathY - boyHeight + 25
  26. });
  27.  
  28.  
  29. ////////////////////////////////////////////////////////
  30. //===================动画处理============================ //
  31. ////////////////////////////////////////////////////////
  32.  
  33. // 恢复走路
  34. function restoreWalk() {
  35.     $boy.removeClass('pauseWalk');
  36. }
  37.  
  38. // css3的动作变化
  39. function slowWalk() {
  40.     $boy.addClass('slowWalk');
  41. }
  42.  
  43. // 计算移动距离
  44. function calculateDist(direction, proportion) {
  45.     return (direction == "x" ?
  46.         visualWidth : visualHeight) * proportion;
  47. }
  48.  
  49.  
  50. // 用transition做运动
  51. function stratRun(options, runTime) {
  52.     var dfdPlay = $.Deferred();
  53.     // 恢复走路
  54.     restoreWalk();
  55.     // 运动的属性
  56.     $boy.transition(
  57.         options,
  58.         runTime,
  59.         'linear',
  60.         function() {});
  61.     return dfdPlay;
  62. }
  63.  
  64.  
  65. // 开始走路
  66. function walkRun(time, dist, disY) {
  67.     time = time || 3000;
  68.     // 脚动作
  69.     slowWalk();
  70.     // 开始走路
  71.     var d1 = stratRun({
  72.         'left': dist + 'px',
  73.         'top': disY ? disY : undefined
  74.     }, time);
  75.     return d1;
  76. }
  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.       /*  background: #CAE1FF;
  26.        color: red; */
  27.        float: left;
  28.        overflow: hidden;
  29.        position: relative;
  30.    }
  31.  
  32.    /* li:nth-child(2) {
  33.        background: #9BCD9B;
  34.    }
  35.    
  36.    li:nth-child(3) {
  37.        background: yellow;
  38.    }
  39.    
  40.    a {
  41.        position: absolute;
  42.        top: 50%;
  43.        left: 40%;
  44.    } */
  45.  
  46.    .charector {
  47.        left: 0%;
  48.        top: 55%;
  49.        position: absolute;
  50.        /* width: 100%;
  51.        height: 100%; */
  52.        width: 151px;
  53.        height: 291px;
  54.        background: url(http://img.mukewang.com/55ade248000198ae10550582.png) -0px -291px no-repeat;
  55.    }
  56.  
  57.    .slowWalk {
  58.        -webkit-animation-name: person-slow;
  59.        -webkit-animation-duration: 950ms;
  60.        -webkit-animation-iteration-count: infinite;
  61.        -webkit-animation-timing-function: steps(1, start);
  62.        -moz-animation-name: person-slow;
  63.        -moz-animation-duration: 950ms;
  64.        -moz-animation-iteration-count: infinite;
  65.        -moz-animation-timing-function: steps(1, start)
  66.    }
  67.    /*普通慢走*/
  68.  
  69.    @-webkit-keyframes person-slow {
  70.        0% {
  71.            background-position: -0px -291px;
  72.        }
  73.        25% {
  74.            background-position: -602px -0px;
  75.        }
  76.        50% {
  77.            background-position: -302px -291px;
  78.        }
  79.        75% {
  80.            background-position: -151px -291px;
  81.        }
  82.        100% {
  83.            background-position: -0px -291px;
  84.        }
  85.    }
  86.  
  87.    @-moz-keyframes person-slow {
  88.        0% {
  89.            background-position: -0px -291px;
  90.        }
  91.        25% {
  92.            background-position: -602px -0px;
  93.        }
  94.        50% {
  95.            background-position: -302px -291px;
  96.        }
  97.        75% {
  98.            background-position: -151px -291px;
  99.        }
  100.        100% {
  101.            background-position: -0px -291px;
  102.        }
  103.    }
下一节