6-1 小男孩动作分解
本节编程练习不计算学习进度，请电脑登录imooc.com操作

小男孩动作分解

场景B中涉及的动作比较多，然后动作之间都是有交叉的，所以在流程上需要有一定的控制。所以会针对所有动作进行单独的分解，这个单独拆分出小男孩动作做讲解

参考右边代码pageB.js的实现，代码需要结合pageB.js与pageB.css一起看，整体的代码都封装了单列对象boyAction上，走路的实现同样是transition+精灵图的组合，针对这样的异步流程代码，继续采用了Deferred对流程封装

动作分4部分：

  1. 小男孩从右边走出来的动作
  2. 小男孩解开包裹拿出礼物的动作
  3. 在3d旋转中脱衣的动作
  4. 转身拥抱的动作

小男孩取至一张15帧的精灵图，为了保持自适应缩放会在x轴上放大15倍，通过百分比切换x轴的坐标达到走路切换的效果。

针对四个动作的实现分解：

走路的实现已经是老套路了，boyAction.walk方法中通过transition控制元素的right值的变化，这样让元素产生动的效果，结合css中定义的boy-walk类的精灵动作切换

解开包裹拿出礼物同样是2张图片组合切换，通过动态增加boy-unwrapp样式处理，样式中注意一个问题，动画的停留状态，需要设置forwards让动作保持在最后一张图上，解开包裹的动作通过css3动画处理的，那么这就是异步，如果后续的动作要连接上，需要就监听这个动作，通过one给元素绑定animationEnd监听事件（one只绑定一次)

在3d旋转动脱衣的动作，是有3个图的切换，在strip方法中，动态的传递一个变量，来添加对应的样式文件

人物拥抱处理中，处理用了帧动画的，还有注意图层的重叠问题，所以单独用一个节点做了头部。在拥抱结束后显示这个头部元素

任务

在pageB.js文件代码中19行填写任务代码

任务

小男孩从右边走出来，走到right=4.5rem的位置，耗时4000毫秒

注意：

1. 通过$.Deferred编写异步代码，能够让后续的动作then方法衔接得上

2.可以通transition让元素运用

3.注意动画回调的监听

index.htmlchristmas.jspageB.jspageB.csscommon.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='common.css' />
  8.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  9.     <script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
  10.     <link rel="stylesheet" type="text/css" href="pageB.css">
  11.     <script src="pageB.js"></script>
  12.     <script src="christmas.js"></script>
  13. </head>
  14.  
  15. <body>
  16.     <section class="container">
  17.         <!-- 第一幅画面 -->
  18.         <section class="page-a bg-adaptive">
  19.         </section>
  20.         <!-- 第二幅画面 -->
  21.         <section class="page-b bg-adaptive">
  22.             <!-- 圣诞男孩 -->
  23.             <figure class="christmas-boy-head"></figure>
  24.             <figure class="christmas-boy boy-walk"> </figure>
  25.         </section>
  26.         <!-- 第三幅画面 -->
  27.         <section class="page-c bg-adaptive">
  28.         </section>
  29.     </section>
  30.     <button>点击执行</button>
  31.     <script type="text/javascript">
  32.     //rem设置
  33.     (function(doc, win) {
  34.         var docEl = doc.documentElement,
  35.             resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  36.             recalc = function() {
  37.                 var clientWidth = docEl.clientWidth;
  38.                 if (!clientWidth) return;
  39.                 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
  40.                 //宽与高度
  41.                 document.body.style.height = clientWidth * (900 / 1440) + "px"
  42.             };
  43.         win.addEventListener(resizeEvt, recalc, false);
  44.         doc.addEventListener('DOMContentLoaded', recalc, false);
  45.     })(document, window);
  46.     </script>
  47. </body>
  48.  
  49. </html>
  50.  
  1. /**
  2.  * 慕课网特制
  3.  * 圣诞主题效果
  4.  * @type {Object}
  5.  */
  6.  
  7. /**
  8.  * 中间调用
  9.  */
  10. var Christmas = function() {
  11.     //页面容器元素
  12.     var $pageB = $(".page-b");
  13.     //构建第二个场景页面对象
  14.     new pageB($pageB);
  15. };
  16.  
  17.  
  18. $(function() {
  19.     $("button").on("click", function() {
  20. 		//圣诞主题效果，开始
  21. 		Christmas()
  22. 	})
  23. })
  1. /**
  2.  * 第二副场景页面
  3.  *
  4.  */
  5. function pageB(element, pageComplete) {
  6.  
  7.     //圣诞男孩
  8.     var $boy = element.find(".christmas-boy");
  9.  
  10.     var animationEnd = "animationend webkitAnimationEnd"
  11.  
  12.     /**
  13.      * 小男孩动作
  14.      * @return {[type]} [description]
  15.      */
  16.     var boyAction = {
  17.         //走路
  18.         walk: function() {
  19.             //?
  20.         },
  21.         //停止走路
  22.         stopWalk: function() {
  23.             $boy.removeClass("boy-walk");
  24.             $boy.addClass("boy-stand");
  25.         },
  26.         //继续走路
  27.         runWalk: function() {
  28.             $boy.addClass("walk-run");
  29.         },
  30.         //解开包裹
  31.         unwrapp: function() {
  32.             var dfd = $.Deferred();
  33.             $boy.addClass("boy-unwrapp");
  34.             $boy.removeClass("boy-stand");
  35.             $boy.one(animationEnd, function() {
  36.                 dfd.resolve();
  37.             })
  38.             return dfd;
  39.         },
  40.         //脱衣动作
  41.         //1-3
  42.         strip: function(count) {
  43.             $boy.addClass("boy-strip-" + count).removeClass("boy-unwrapp");
  44.         },
  45.         //人物用拥抱
  46.         //重叠问题处理
  47.         hug: function() {
  48.             $boy.addClass("boy-hug").one(animationEnd, function() {
  49.                 $(".christmas-boy-head").show()
  50.             })
  51.         }
  52.     }
  53.  
  54.     //开始走路
  55.     boyAction.walk()
  56.         .then(function() {
  57.             //停止走路
  58.             boyAction.stopWalk();
  59.         })
  60.         .then(function() {
  61.             //解开包裹
  62.             return boyAction.unwrapp();
  63.         })
  64.         .then(function() {
  65.             //脱衣动作
  66.             setTimeout(function(){
  67.                 boyAction.strip(1)
  68.             },1000)
  69.             setTimeout(function(){
  70.                 boyAction.strip(2)
  71.             },2000)
  72.             setTimeout(function(){
  73.                 boyAction.strip(3)
  74.             },3000)
  75.             //任务重叠问题
  76.             setTimeout(function(){
  77.                 boyAction.hug();
  78.             },4000)
  79.         })
  80.  
  81.  
  82. }
  83.  
  1. .container .page-b {
  2.     width  : 100%;
  3.     height : 100%;
  4.     background-image: url("http://img1.sycdn.imooc.com//565d09fa000145a614410901.png");
  5.     position: absolute;
  6.     z-index: 40;
  7. }
  8. /********************************************************
  9.         
  10.         小男孩动作
  11.  
  12. **********************************************************/
  13.  
  14. .walk-stop {
  15.     -webkit-animation-play-state: paused;
  16.     -moz-animation-play-state: paused;
  17. }
  18.  
  19. .walk-run {
  20.     -webkit-animation-play-state: running;
  21.     -moz-animation-play-state: running;
  22. }
  23.  
  24.  
  25. /**
  26.  * 圣诞小男孩
  27.  */
  28.  
  29. .christmas-boy {
  30.     width: 3.5rem;
  31.     height: 4.06rem;
  32.     position: absolute;
  33.     z-index: 5;
  34.     right: -3.5rem;
  35.     top: 4rem;
  36.     background: url(http://img.mukewang.com/565d09870001372152510407.png);
  37.     background-size: 1500% 100%;
  38.     background-position: 0% 100%;
  39. }
  40.  
  41.  
  42. /**
  43.  * 男孩走路动作
  44.  */
  45.  
  46. .boy-walk {
  47.     -webkit-animation: boyWalk 0.75s steps(4, end) infinite;
  48.     -moz-animation: boyWalk 0.75s steps(4, end) infinite;
  49. }
  50.  
  51. @-webkit-keyframes boyWalk {
  52.     0% {
  53.         background-position: 0 100%;
  54.     }
  55.     100% {
  56.         background-position: -400% 100%;
  57.     }
  58. }
  59.  
  60. @-moz-keyframes boyWalk {
  61.     0% {
  62.         background-position: 0 100%;
  63.     }
  64.     100% {
  65.         background-position: -400% 100%;
  66.     }
  67. }
  68.  
  69.  
  70. /**
  71.  * 脱衣动作
  72.  */
  73.  
  74. .boy-strip-1 {
  75.     background-position: -800% 100%;
  76. }
  77.  
  78. .boy-strip-2 {
  79.     background-position: -900% 100%;
  80. }
  81.  
  82. .boy-strip-3 {
  83.     background-position: -1000% 100%;
  84. }
  85.  
  86.  
  87. /**
  88.  * 站立动作
  89.  */
  90.  
  91. .boy-stand {
  92.     background-position: -400% 100%;
  93. }
  94.  
  95.  
  96. /**
  97.  * 打开包裹
  98.  */
  99.  
  100. .boy-unwrapp {
  101.     -webkit-animation: unwrapp 2s steps(2, end) 1 forwards;
  102.     -moz-animation: unwrapp 2s steps(2, end) 1 forwards;
  103. }
  104.  
  105. @-webkit-keyframes unwrapp {
  106.     0% {
  107.         background-position: -400% 100%;
  108.     }
  109.     100% {
  110.         background-position: -600% 100%;
  111.     }
  112. }
  113.  
  114. @-moz-keyframes unwrapp {
  115.     0% {
  116.         background-position: -400% 100%;
  117.     }
  118.     100% {
  119.         background-position: -600% 100%;
  120.     }
  121. }
  122.  
  123.  
  124. /**
  125.  * 男孩拥抱
  126.  */
  127.  
  128. .boy-hug {
  129.     -webkit-animation: boyHug 1s steps(3, end) 1 forwards;
  130.     -moz-animation: boyHug 1s steps(3, end) 1 forwards;
  131. }
  132.  
  133. @-webkit-keyframes boyHug {
  134.     0% {
  135.         background-position: -1000% 100%;
  136.     }
  137.     100% {
  138.         background-position: -1300% 100%;
  139.     }
  140. }
  141.  
  142. @-moz-keyframes boyHug {
  143.     0% {
  144.         background-position: -1000% 100%;
  145.     }
  146.     100% {
  147.         background-position: -1300% 100%;
  148.     }
  149. }
  150.  
  151.  
  152. /**
  153.  * 男孩头部
  154.  */
  155.  
  156. .christmas-boy-head {
  157.     left: 7.85rem;
  158.     top: 4rem;
  159.     width: 3.5rem;
  160.     height: 4.06rem;
  161.     position: absolute;
  162.     z-index: 12;
  163.     background: url(http://img.mukewang.com/565d09870001372152510407.png);
  164.     background-size: 1400% 100%;
  165.     background-position: -1300% 100%;
  166.     display: none;
  167. }
  168.  
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6.  
  7. .container {
  8.     width: 100%;
  9.     height: 100%;
  10.     position: relative;
  11.     overflow: hidden;
  12. }
  13.  
  14. .bg-adaptive {
  15.     background-size: 100% 100%;
  16. }
下一节