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

小女孩动作分解

小女孩与小男孩在代码结构与技术的实现上基本是一致的，参考右边pageB.js与pageB.css的实现代码，小女孩取至一张21帧的雪碧图，为了保持自适应缩放会在x轴上放大21倍，y轴保持100%的缩放，通过百分比切换x轴的坐标达到运动的效果

小女孩在逻辑上的流程有：

  1. 在沙发上起立动作
  2. 走路动作
  3. 对3d旋转礼物的选择
  4. 泪奔
  5. 拥抱

技术上通过样式切换图片，或者通过样式增加一个关键帧动画，实现精灵图效果，这些技术就不再重复讲解了。值的注意的是：在每一个流程动作上通过增加不同的样式实现效果，在下一个动作的时候需要删除上一个样式，否则每次增加的样式都会在一个元素上不断的叠加，会有意料之外的效果。

任务

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

任务

小女孩从左边走出来，走到left=4.5rem的位置，耗时4000毫秒

注意：

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

2.可以通transition让元素运用

3.注意动画回调的监听

4.添加小女孩走路动过的帧图切换样式girl-walk

index.htmlchristmas.jspageB.jscommon.csspageB.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="cat"></figure>
  24.             <!-- 小女孩 -->
  25.             <figure class="girl"></figure>
  26.             <!-- 圣诞男孩 -->
  27.             <figure class="christmas-boy-head"></figure>
  28.             <figure class="christmas-boy boy-walk"> </figure>
  29.         </section>
  30.         <!-- 第三幅画面 -->
  31.         <section class="page-c bg-adaptive">
  32.         </section>
  33.     </section>
  34.     <button>点击执行</button>
  35.     <script type="text/javascript">
  36.     //rem设置
  37.     (function(doc, win) {
  38.         var docEl = doc.documentElement,
  39.             resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  40.             recalc = function() {
  41.                 var clientWidth = docEl.clientWidth;
  42.                 if (!clientWidth) return;
  43.                 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
  44.                 //宽与高度
  45.                 document.body.style.height = clientWidth * (900 / 1440) + "px"
  46.             };
  47.         win.addEventListener(resizeEvt, recalc, false);
  48.         doc.addEventListener('DOMContentLoaded', recalc, false);
  49.     })(document, window);
  50.     </script>
  51. </body>
  52.  
  53. </html>
  54.  
  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. $(function() {
  18.     $("button").on("click", function() {
  19. 		//圣诞主题效果，开始
  20. 		Christmas()
  21. 	})
  22. })
  1. /**
  2.  * 第二副场景页面
  3.  *
  4.  */
  5. function pageB(element, pageComplete) {
  6.  
  7.     //女孩
  8.     var $girl = element.find(".girl");
  9.     var animationEnd = "animationend webkitAnimationEnd"
  10.  
  11.     /**
  12.      * 小女孩动作
  13.      * @return {[type]} [description]
  14.      */
  15.     var girlAction = {
  16.         //小女起立
  17.         standUp: function() {
  18.             var dfd = $.Deferred();
  19.             //起立
  20.             setTimeout(function(){
  21.                 $girl.addClass("girl-standUp");
  22.             },200)
  23.             //抛书
  24.             setTimeout(function(){
  25.                 $girl.addClass("girl-throwBook");
  26.                 dfd.resolve()
  27.             },500)
  28.             return dfd;
  29.         },
  30.         //走路
  31.         walk: function(callback) {
  32.             //?
  33.         },
  34.         //停止走路
  35.         stopWalk: function() {
  36.             $girl.addClass("walk-stop")
  37.                 .removeClass("girl-standUp")
  38.                 .removeClass("girl-walk")
  39.                 .removeClass("girl-throwBook")
  40.                 .addClass("girl-stand")
  41.         },
  42.         //选择3d
  43.         choose: function(callback) {
  44.             $girl.addClass("girl-choose")
  45.                 .removeClass("walk-stop");
  46.             $girl.one(animationEnd, function() {
  47.                 callback();
  48.             })
  49.         },
  50.         //泪奔
  51.         weepWalk: function(callback) {
  52.             $girl.addClass("girl-weep");
  53.             $girl.transition({
  54.                 "left": "7rem"
  55.             }, 1000, "linear", function() {
  56.                 $girl.addClass("walk-stop").removeClass("girl-weep")
  57.                 callback();
  58.             })
  59.         },
  60.         //拥抱
  61.         hug: function() {
  62.             $girl.addClass("girl-hug").addClass("walk-run")
  63.         }
  64.     }
  65.  
  66.  
  67.     girlAction
  68.         .standUp()
  69.         .then(function() {
  70.             //女孩停止走路
  71.             return girlAction.stopWalk();
  72.         })
  73.         .then(function() {
  74.             //女孩走路
  75.             return girlAction.walk();
  76.         })
  77.         .then(function(){
  78.             //选择
  79.             girlAction.choose(function() {
  80.                 //继续走路
  81.                 girlAction.weepWalk(function() {
  82.                     //拥抱
  83.                     girlAction.hug();
  84.                 })
  85.             })
  86.  
  87.         })
  88.  
  89. }
  90.  
  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. } 
  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.  
  15.  
  16. /**
  17.  * 小女孩看书
  18.  */
  19.  
  20. .girl {
  21.     width: 3.5rem;
  22.     height: 4.06rem;
  23.     position: absolute;
  24.     z-index: 10;
  25.     left: 1rem;
  26.     top: 3.2rem;
  27.     background: url(http://img.mukewang.com/565d09e50001156273510407.png);
  28.     background-size: 2100% 100%;
  29. }
  30.  
  31.  
  32. /**
  33.  * 起身
  34.  */
  35.  
  36. .girl-standUp {
  37.     left: 1.2rem;
  38.     -webkit-animation: standUp 200ms steps(3, start) forwards;
  39.     -moz-animation: standUp 200ms steps(3, start) forwards;
  40. }
  41.  
  42. @-webkit-keyframes standUp {
  43.     0% {
  44.         background-position: 0% 100%;
  45.     }
  46.     100% {
  47.         background-position: -300% 100%;
  48.         top: 4rem;
  49.     }
  50. }
  51.  
  52. @-moz-keyframes standUp {
  53.     0% {
  54.         background-position: 0% 100%;
  55.     }
  56.     100% {
  57.         background-position: -300% 100%;
  58.         top: 4rem;
  59.     }
  60. }
  61.  
  62.  
  63. /**
  64.  * 抛书动作
  65.  */
  66.  
  67. .girl-throwBook {
  68.     top: 4rem;
  69.     left: 0.5rem;
  70.     -webkit-animation: throwBook 300ms steps(2, start) forwards;
  71.     -moz-animation: throwBook 300ms steps(2, start) forwards;
  72. }
  73.  
  74. @-webkit-keyframes throwBook {
  75.     0% {
  76.         background-position: -300% 100%;
  77.     }
  78.     100% {
  79.         background-position: -500% 100%;
  80.     }
  81. }
  82.  
  83. @-moz-keyframes throwBook {
  84.     0% {
  85.         background-position: -300% 100%;
  86.     }
  87.     100% {
  88.         background-position: -500% 100%;
  89.     }
  90. }
  91.  
  92.  
  93. /**
  94.  * 小女孩走路
  95.  */
  96.  
  97. .girl-walk {
  98.     left: 1rem;
  99.     -webkit-animation: girlWalk 900ms steps(4, start) infinite;
  100.     -moz-animation: girlWalk 900ms steps(4, start) infinite;
  101. }
  102.  
  103. @-webkit-keyframes girlWalk {
  104.     0% {
  105.         background-position: -500% 100%;
  106.     }
  107.     100% {
  108.         background-position: -900% 100%;
  109.     }
  110. }
  111.  
  112. @-moz-keyframes girlWalk {
  113.     0% {
  114.         background-position: -500% 100%;
  115.     }
  116.     100% {
  117.         background-position: -900% 100%;
  118.     }
  119. }
  120.  
  121.  
  122. /**
  123.  * 站立动作
  124.  */
  125.  
  126. .girl-stand {
  127.     top: 4rem;
  128.     background-position: -1000% 100%;
  129. }
  130.  
  131.  
  132. /**
  133.  * 小女孩选择3d选择
  134.  */
  135.  
  136. .girl-choose {
  137.     -webkit-animation: girlChoose 2000ms steps(2, end) forwards;
  138.     -moz-animation: girlChoose 2000ms steps(2, end) forwards;
  139. }
  140.  
  141. @-webkit-keyframes girlChoose {
  142.     0% {
  143.         background-position: -1000% 100%;
  144.     }
  145.     100% {
  146.         background-position: -1200% 100%;
  147.     }
  148. }
  149.  
  150. @-moz-keyframes girlChoose {
  151.     0% {
  152.         background-position: -1000% 100%;
  153.     }
  154.     100% {
  155.         background-position: -1200% 100%;
  156.     }
  157. }
  158.  
  159.  
  160. /**
  161.  * 流泪奔跑
  162.  */
  163.  
  164. .girl-weep {
  165.     -webkit-animation: girlWeep 450ms steps(4, end) forwards infinite;
  166.     -moz-animation: girlWeep 450ms steps(4, end) forwards infinite;
  167. }
  168.  
  169. @-webkit-keyframes girlWeep {
  170.     0% {
  171.         background-position: -1300% 100%;
  172.     }
  173.     100% {
  174.         background-position: -1700% 100%;
  175.     }
  176. }
  177.  
  178. @-moz-keyframes girlWeep {
  179.     0% {
  180.         background-position: -1300% 100%;
  181.     }
  182.     100% {
  183.         background-position: -1700% 100%;
  184.     }
  185. }
  186.  
  187.  
  188. /**
  189.  * 女孩拥抱
  190.  */
  191.  
  192. .girl-hug {
  193.     -webkit-animation: girlHug 450ms steps(3, end) forwards;
  194.     -moz-animation: girlHug 450ms steps(3, end) forwards;
  195. }
  196.  
  197. @-webkit-keyframes girlHug {
  198.     0% {
  199.         background-position: -1700% 100%;
  200.     }
  201.     100% {
  202.         left: 7.85rem;
  203.         background-position: -2000% 100%;
  204.     }
  205. }
  206.  
  207. @-moz-keyframes girlHug {
  208.     0% {
  209.         background-position: -1700% 100%;
  210.     }
  211.     100% {
  212.         left: 7.85rem;
  213.         background-position: -2000% 100%;
  214.     }
  215. }
  216.  
下一节