7-1 3D关窗效果
本节编程练习不计算学习进度，请电脑登录imooc.com操作

3D关窗效果

第三个场景增加pageC.js与pageC.css2个文件，场景内的元素，月亮、星星、圣诞树和云的实现之前都已经讲解过了，这里不再重复。具体看下关窗的实现的与canvas版的雪花效果

关窗的同时，背景会有一个渐隐渐现的替换效果，这里会采用2张图做交替动画，一张隐藏一张显示，因此同时会有3个动画在进行

参考pageC.js与pageC.css代码区域：

背景图切换

在静态HTML布局中，给2张不同的切换节设置opacity属性控显示与隐藏的状态，

<div class="window-scene-bg"></div> //1
<div class="window-close-bg"></div> //0

在脚本代码处，同时给2个背景节点增加opacity的控制，这样达到渐隐渐现的切换效果

this.$sceneBg.transition({
    opacity: 0,
}, 3000);
this.$closeBg.transition({
    opacity: 1
}, 5000);

关窗动画

通过脚本控制给对应的“门”增加关门的样式，通过animation动画，控制元素的scale、rotateY鱼与rotateZ值的变化。

element.addClass("close").one("animationend webkitAnimationEnd", function(event) {
    complete()
 })

给左右2个门增加"close"样式控制，然后绑定一个one事件监听动画的处理完成，这样才能衔接到后续的动作了（这里需要注意animation是2组动画，需要判断下2组动画全部结束）

任务

在pageC.js文件中的31行出填入任务代码

给左右2片窗户增加开窗效果，然后监听窗户的动作完毕后调用回调函数

提示：

this.$leftWin ，this.$rightWin 是左右2个窗户元素

class=close是关窗的样式，调用了css3的动画

css3的动画事件名是：animationend

index.htmlchristmas.jspageC.jscommon.csspageC.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.     <link rel="stylesheet" type="text/css" href="pageC.css">
  9.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  10.     <script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
  11.     <script src="pageC.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.         </section>
  23.         <!-- 第三幅画面 -->
  24.         <section class="page-c bg-adaptive">
  25.             <!-- 窗户关闭 -->
  26.             <div class="window wood">
  27.                 <div class="window-content" data-attr="red">
  28.                     <div class="window-scene-bg"></div>
  29.                     <div class="window-close-bg"></div>
  30.                     <div class="window-left hover"></div>
  31.                     <div class="window-right hover"></div>
  32.                 </div>
  33.             </div>
  34.         </section>
  35.     </section>
  36.     <button>点击执行</button>
  37.     <script type="text/javascript">
  38.     //rem设置
  39.     (function(doc, win) {
  40.         var docEl = doc.documentElement,
  41.             resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  42.             recalc = function() {
  43.                 var clientWidth = docEl.clientWidth;
  44.                 if (!clientWidth) return;
  45.                 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
  46.                 //宽与高度
  47.                 document.body.style.height = clientWidth * (900 / 1440) + "px"
  48.             };
  49.         win.addEventListener(resizeEvt, recalc, false);
  50.         doc.addEventListener('DOMContentLoaded', recalc, false);
  51.     })(document, window);
  52.     </script>
  53. </body>
  54.  
  55. </html>
  56.  
  1. /**
  2.  * 慕课网特制
  3.  * 圣诞主题效果
  4.  * @type {Object}
  5.  */
  6.  
  7. /**
  8.  * 中间调用
  9.  */
  10. var Christmas = function() {
  11.     //页面容器元素
  12.     var $pageC = $(".page-c");
  13.     //构建第三个场景页面对象
  14.     new pageC($pageC);
  15. };
  16.  
  17. $(function() {
  18.     $("button").on("click",function(){
  19.         Christmas();
  20.     })
  21. })
  1. /**
  2.  * 第二副场景页面
  3.  *
  4.  */
  5. function pageC() {
  6.  
  7.     this.$window   = $(".page-c .window");
  8.     this.$leftWin  = this.$window.find(".window-left");
  9.     this.$rightWin = this.$window.find(".window-right");
  10.     this.$sceneBg  = this.$window.find(".window-scene-bg");
  11.     this.$closeBg  = this.$window.find(".window-close-bg");
  12.  
  13.     // 背景切换
  14.     this.$sceneBg.transition({
  15.         opacity: 0,
  16.     }, 3000);
  17.     this.$closeBg.css("transform", "translateZ(0)")
  18.     this.$closeBg.transition({
  19.         opacity: 1
  20.     }, 5000);
  21.  
  22.     //关门动作
  23.     this.closeWindow();
  24. }
  25.  
  26. /**
  27.  * 关闭窗
  28.  * @return {[type]} [description]
  29.  */
  30. pageC.prototype.closeWindow = function() {
  31.     //?
  32. }
  33.  
  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. } 
  17.  
  1. .page-c {
  2.     width  : 100%;
  3.     height : 100%;
  4.     background-image: url("http://img1.sycdn.imooc.com//565d0b280001788014410901.png");
  5.     position: absolute;
  6.     z-index: 30;
  7. }
  8. /**
  9.  * 窗户
  10.  */
  11.  
  12. .window {
  13.     width: 2.6rem;
  14.     height: 1.5rem;
  15.     position: absolute;
  16.     left: 9.7rem;
  17.     top: 6.2rem;
  18.     cursor: pointer;
  19.     -webkit-perspective: 500px;
  20.     -moz-perspective: 500px;
  21. }
  22.  
  23. .window-content {
  24.     -webkit-transform-style: preserve-3d;
  25.     -moz-transform-style: preserve-3d;
  26.     width: 91%;
  27.     margin: 0 auto;
  28.     height: 100%;
  29.     overflow: hidden;
  30. }
  31.  
  32.  
  33. /**
  34.  * 窗户背景
  35.  */
  36.  
  37. .window-bg {
  38.     width: 86%;
  39.     height: 92%;
  40.     position: absolute;
  41.     left: 50%;
  42.     margin-left: -43%;
  43.     bottom: 0;
  44.     background: url(http://img.mukewang.com/565d07770001790814410901.png);
  45.     background-size: 100% 100%;
  46.     z-index: -1;
  47. }
  48.  
  49.  
  50. /**
  51.  * 窗户底边
  52.  * @type {[type]}
  53.  */
  54.  
  55. .window:before {
  56.     content: "";
  57.     background: url(http://img.mukewang.com/565d07e40001088402410017.png);
  58.     width: 100%;
  59.     height: 0.17rem;
  60.     display: block;
  61.     position: absolute;
  62.     bottom: 0.05rem;
  63.     background-size: 100% 100%;
  64.     z-index: 100;
  65. }
  66.  
  67.  
  68. /**
  69.  * 底边阴影
  70.  * @type {[type]}
  71.  */
  72.  
  73. .window:after {
  74.     content: "";
  75.     background: url(http://img.mukewang.com/565d080400018d2702270009.png);
  76.     width: 100%;
  77.     height: 0.09rem;
  78.     display: block;
  79.     position: absolute;
  80.     bottom: 0;
  81.     background-size: 100% 100%;
  82.     z-index: 100;
  83. }
  84.  
  85. .wood {
  86.     display: block;
  87.     overflow: hidden;
  88. }
  89.  
  90.  
  91. /**
  92.  * 左侧门
  93.  */
  94.  
  95. .window-left {
  96.     float: left;
  97.     background: url(http://img.mukewang.com/565d081d0001cfd901140134.png);
  98.     -webkit-border-top-left-radius: 0.1rem;
  99.     -moz-border-top-left-radius: 0.1rem;
  100. }
  101.  
  102.  
  103. /**
  104.  * 右侧门
  105.  */
  106.  
  107. .window-right {
  108.     float: right;
  109.     background: url(http://img.mukewang.com/565d084c0001431b01140134.png);
  110.     -webkit-border-top-right-radius: 0.1rem;
  111.     -moz-border-top-left-radius: 0.1rem;
  112. }
  113.  
  114. .window-left,
  115. .window-right {
  116.     width: 50%;
  117.     height: 1.3rem;
  118.     z-index: 110;
  119.     box-shadow: 0 0 0.15rem #FCF0BC;
  120.     background-size: 100% 100%;
  121. }
  122.  
  123. .window-left.hover {
  124.     -webkit-transform: scale(0.95) rotateY(60deg) rotateZ(2deg);
  125.     -moz-transform: scale(0.95) rotateY(60deg) rotateZ(2deg);
  126.     margin-top: 0.1rem;
  127.     margin-left: -0.25rem;
  128. }
  129.  
  130. .window-right.hover {
  131.     -webkit-transform: scale(0.95) rotateY(-60deg) rotateZ(-2deg);
  132.     -moz-transform: scale(0.95) rotateY(-60deg) rotateZ(-2deg);
  133.     margin-top: 0.1rem;
  134.     margin-right: -0.25rem;
  135. }
  136.  
  137.  
  138. /**
  139.  * 窗户
  140.  */
  141.  
  142. .page-c .window {
  143.     left: 8rem;
  144. }
  145.  
  146. .window-left.close,
  147. .window-right.close {
  148.     -webkit-animation: closeWindow 2s forwards;
  149.     -moz-animation: closeWindow 2s forwards;
  150. }
  151.  
  152. @-webkit-keyframes closeWindow {
  153.     100% {
  154.         -webkit-transform: scale(1) rotateY(0deg) rotateZ(0deg);
  155.         margin-right: 0;
  156.         margin-left: 0;
  157.     }
  158. }
  159.  
  160. @-moz-keyframes closeWindow {
  161.     100% {
  162.         -moz-transform: scale(1) rotateY(0deg) rotateZ(0deg);
  163.         margin-right: 0;
  164.         margin-left: 0;
  165.     }
  166. }
  167.  
  168.  
  169. /**
  170.  * 场景背景
  171.  * @type {[type]}
  172.  */
  173.  
  174. .window-scene-bg {
  175.     background: url(http://img.mukewang.com/565d0b4c0001816b02270135.png);
  176.     background-size: 100% 100%;
  177.     width: 2.26rem;
  178.     height: 1.2rem;
  179.     position: absolute;
  180.     left: 50%;
  181.     bottom: .1rem;
  182.     z-index: -1;
  183.     margin-left: -1.13rem;
  184.     -webkit-transform: translateZ(-50px);
  185.     -moz-transform: translateZ(-50px);
  186. }
  187.  
  188.  
  189. /**
  190.  * 关门背景
  191.  */
  192.  
  193. .window-close-bg {
  194.     background: url(http://img.mukewang.com/565d0b3d00016a4600810081.png);
  195.     background-size: 100% 100%;
  196.     width: 0.8rem;
  197.     height: 0.8rem;
  198.     position: absolute;
  199.     left: 50%;
  200.     bottom: .1rem;
  201.     margin-left: -0.4rem;
  202.     -webkit-transform: translateZ(-50px);
  203.     -moz-transform: translateZ(-50px);
  204.     opacity: 0;
  205.     z-index: 500;
  206. }
  207.  
下一节