第二个版本

minigame/WebContent/static/css/main.css

@@ -288,6 +288,12 @@ input {
   top: 0;
   left: 0; }
 
+.poster-mode .qrcode-box p {
+  overflow: hidden;
+  -o-text-overflow: ellipsis;
+     text-overflow: ellipsis;
+  white-space: nowrap; }
+
 * {
   margin: 0;
   padding: 0;
@@ -324,6 +330,267 @@ img {
 .bold {
   font-weight: bold; }
 
+.js-an {
+  display: none !important;
+  -webkit-animation-name: none !important;
+     -moz-animation-name: none !important;
+       -o-animation-name: none !important;
+          animation-name: none !important; }
+
+.animated {
+  -webkit-animation-duration: .6s;
+     -moz-animation-duration: .6s;
+       -o-animation-duration: .6s;
+          animation-duration: .6s;
+  -webkit-transform: translate3d(0, 0, 0);
+     -moz-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0); }
+
+.origin-tc {
+  -webkit-transform-origin: top center;
+     -moz-transform-origin: top center;
+      -ms-transform-origin: top center;
+       -o-transform-origin: top center;
+          transform-origin: top center; }
+
+.origin-rb {
+  -webkit-transform-origin: right bottom;
+     -moz-transform-origin: right bottom;
+      -ms-transform-origin: right bottom;
+       -o-transform-origin: right bottom;
+          transform-origin: right bottom; }
+
+.origin-lb {
+  -webkit-transform-origin: left center;
+     -moz-transform-origin: left center;
+      -ms-transform-origin: left center;
+       -o-transform-origin: left center;
+          transform-origin: left center; }
+
+.origin-cb {
+  -webkit-transform-origin: center bottom;
+     -moz-transform-origin: center bottom;
+      -ms-transform-origin: center bottom;
+       -o-transform-origin: center bottom;
+          transform-origin: center bottom; }
+
+.origin-cc {
+  -webkit-transform-origin: center center;
+     -moz-transform-origin: center center;
+      -ms-transform-origin: center center;
+       -o-transform-origin: center center;
+          transform-origin: center center; }
+
+.iteration {
+  -webkit-animation-iteration-count: infinite;
+     -moz-animation-iteration-count: infinite;
+       -o-animation-iteration-count: infinite;
+          animation-iteration-count: infinite; }
+
+.ease-in {
+  -webkit-animation-timing-function: ease-in;
+     -moz-animation-timing-function: ease-in;
+       -o-animation-timing-function: ease-in;
+          animation-timing-function: ease-in; }
+
+.ease-out {
+  -webkit-animation-timing-function: ease-out;
+     -moz-animation-timing-function: ease-out;
+       -o-animation-timing-function: ease-out;
+          animation-timing-function: ease-out; }
+
+.delay0 {
+  -webkit-animation-delay: 0s;
+     -moz-animation-delay: 0s;
+       -o-animation-delay: 0s;
+          animation-delay: 0s; }
+
+.delay1 {
+  -webkit-animation-delay: 0.2s;
+     -moz-animation-delay: 0.2s;
+       -o-animation-delay: 0.2s;
+          animation-delay: 0.2s; }
+
+.delay2 {
+  -webkit-animation-delay: 0.4s;
+     -moz-animation-delay: 0.4s;
+       -o-animation-delay: 0.4s;
+          animation-delay: 0.4s; }
+
+.delay3 {
+  -webkit-animation-delay: 0.6s;
+     -moz-animation-delay: 0.6s;
+       -o-animation-delay: 0.6s;
+          animation-delay: 0.6s; }
+
+.delay4 {
+  -webkit-animation-delay: 0.8s;
+     -moz-animation-delay: 0.8s;
+       -o-animation-delay: 0.8s;
+          animation-delay: 0.8s; }
+
+.delay5 {
+  -webkit-animation-delay: 1s;
+     -moz-animation-delay: 1s;
+       -o-animation-delay: 1s;
+          animation-delay: 1s; }
+
+.delay6 {
+  -webkit-animation-delay: 1.2s;
+     -moz-animation-delay: 1.2s;
+       -o-animation-delay: 1.2s;
+          animation-delay: 1.2s; }
+
+.delay7 {
+  -webkit-animation-delay: 1.4s;
+     -moz-animation-delay: 1.4s;
+       -o-animation-delay: 1.4s;
+          animation-delay: 1.4s; }
+
+.delay8 {
+  -webkit-animation-delay: 1.6s;
+     -moz-animation-delay: 1.6s;
+       -o-animation-delay: 1.6s;
+          animation-delay: 1.6s; }
+
+.delay9 {
+  -webkit-animation-delay: 1.8s;
+     -moz-animation-delay: 1.8s;
+       -o-animation-delay: 1.8s;
+          animation-delay: 1.8s; }
+
+.delay10 {
+  -webkit-animation-delay: 2s;
+     -moz-animation-delay: 2s;
+       -o-animation-delay: 2s;
+          animation-delay: 2s; }
+
+.delay11 {
+  -webkit-animation-delay: 2.2s;
+     -moz-animation-delay: 2.2s;
+       -o-animation-delay: 2.2s;
+          animation-delay: 2.2s; }
+
+.delay12 {
+  -webkit-animation-delay: 2.4s;
+     -moz-animation-delay: 2.4s;
+       -o-animation-delay: 2.4s;
+          animation-delay: 2.4s; }
+
+.delay13 {
+  -webkit-animation-delay: 2.6s;
+     -moz-animation-delay: 2.6s;
+       -o-animation-delay: 2.6s;
+          animation-delay: 2.6s; }
+
+.delay14 {
+  -webkit-animation-delay: 2.8s;
+     -moz-animation-delay: 2.8s;
+       -o-animation-delay: 2.8s;
+          animation-delay: 2.8s; }
+
+.delay15 {
+  -webkit-animation-delay: 3s;
+     -moz-animation-delay: 3s;
+       -o-animation-delay: 3s;
+          animation-delay: 3s; }
+
+.time0 {
+  -webkit-animation-duration: 0s;
+     -moz-animation-duration: 0s;
+       -o-animation-duration: 0s;
+          animation-duration: 0s; }
+
+.time1 {
+  -webkit-animation-duration: 0.2s;
+     -moz-animation-duration: 0.2s;
+       -o-animation-duration: 0.2s;
+          animation-duration: 0.2s; }
+
+.time2 {
+  -webkit-animation-duration: 0.4s;
+     -moz-animation-duration: 0.4s;
+       -o-animation-duration: 0.4s;
+          animation-duration: 0.4s; }
+
+.time3 {
+  -webkit-animation-duration: 0.6s;
+     -moz-animation-duration: 0.6s;
+       -o-animation-duration: 0.6s;
+          animation-duration: 0.6s; }
+
+.time4 {
+  -webkit-animation-duration: 0.8s;
+     -moz-animation-duration: 0.8s;
+       -o-animation-duration: 0.8s;
+          animation-duration: 0.8s; }
+
+.time5 {
+  -webkit-animation-duration: 1s;
+     -moz-animation-duration: 1s;
+       -o-animation-duration: 1s;
+          animation-duration: 1s; }
+
+.time6 {
+  -webkit-animation-duration: 1.2s;
+     -moz-animation-duration: 1.2s;
+       -o-animation-duration: 1.2s;
+          animation-duration: 1.2s; }
+
+.time7 {
+  -webkit-animation-duration: 1.4s;
+     -moz-animation-duration: 1.4s;
+       -o-animation-duration: 1.4s;
+          animation-duration: 1.4s; }
+
+.time8 {
+  -webkit-animation-duration: 1.6s;
+     -moz-animation-duration: 1.6s;
+       -o-animation-duration: 1.6s;
+          animation-duration: 1.6s; }
+
+.time9 {
+  -webkit-animation-duration: 1.8s;
+     -moz-animation-duration: 1.8s;
+       -o-animation-duration: 1.8s;
+          animation-duration: 1.8s; }
+
+.time10 {
+  -webkit-animation-duration: 2s;
+     -moz-animation-duration: 2s;
+       -o-animation-duration: 2s;
+          animation-duration: 2s; }
+
+.time11 {
+  -webkit-animation-duration: 2.2s;
+     -moz-animation-duration: 2.2s;
+       -o-animation-duration: 2.2s;
+          animation-duration: 2.2s; }
+
+.time12 {
+  -webkit-animation-duration: 2.4s;
+     -moz-animation-duration: 2.4s;
+       -o-animation-duration: 2.4s;
+          animation-duration: 2.4s; }
+
+.time13 {
+  -webkit-animation-duration: 2.6s;
+     -moz-animation-duration: 2.6s;
+       -o-animation-duration: 2.6s;
+          animation-duration: 2.6s; }
+
+.time14 {
+  -webkit-animation-duration: 2.8s;
+     -moz-animation-duration: 2.8s;
+       -o-animation-duration: 2.8s;
+          animation-duration: 2.8s; }
+
+.time15 {
+  -webkit-animation-duration: 3s;
+     -moz-animation-duration: 3s;
+       -o-animation-duration: 3s;
+          animation-duration: 3s; }
+
 .clearfix:after {
   content: ".";
   display: block;
@@ -331,6 +598,18 @@ img {
   clear: both;
   visibility: hidden; }
 
+.secret-box {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: url(../img/loading/bg.jpg) no-repeat 0 0/cover;
+  display: none;
+  z-index: 1001; }
+  .secret-box img {
+    vertical-align: middle; }
+
 .warp {
   width: 10rem;
   margin: 0 auto;
@@ -438,6 +717,87 @@ img {
   z-index: 1;
   display: none; }
 
+.poster-mode {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  width: 10rem;
+  height: 100vh;
+  margin-left: -5rem;
+  z-index: 100;
+  background: #000;
+  display: none; }
+  .poster-mode .leads-box {
+    position: absolute;
+    top: 1.65625rem;
+    left: 50%;
+    width: 9.15625rem;
+    height: 3.57812rem;
+    margin-left: -4.57812rem;
+    background: url(../img/leads_bg.png) no-repeat top center/100% auto;
+    padding-top: 0.46875rem;
+    padding-left: 2.65625rem;
+    padding-right: 1.875rem; }
+    .poster-mode .leads-box .form-group {
+      border-bottom: 1px solid #c19e83; }
+      .poster-mode .leads-box .form-group input {
+        width: 100%;
+        height: 0.78125rem;
+        font-size: 0.375rem;
+        font-size: 20x;
+        color: #c19e83;
+        background: transparent; }
+    .poster-mode .leads-box .user-info {
+      position: absolute;
+      right: 0.3125rem;
+      top: 50%;
+      -webkit-transform: translate(0, -50%);
+         -moz-transform: translate(0, -50%);
+          -ms-transform: translate(0, -50%);
+           -o-transform: translate(0, -50%);
+              transform: translate(0, -50%); }
+      .poster-mode .leads-box .user-info .headimg-box {
+        width: 1.25rem; }
+      .poster-mode .leads-box .user-info p {
+        font-size: 0.3125rem;
+        color: #743d2f;
+        margin-top: 0.15625rem; }
+    .poster-mode .leads-box .submit {
+      position: absolute;
+      bottom: -0.15625rem;
+      left: 50%;
+      width: 3.04688rem;
+      margin-left: -1.52344rem; }
+    .poster-mode .leads-box .pro {
+      position: absolute;
+      top: 50%;
+      left: 0.3125rem;
+      width: 1.82812rem;
+      -webkit-transform: translate(0, -50%);
+         -moz-transform: translate(0, -50%);
+          -ms-transform: translate(0, -50%);
+           -o-transform: translate(0, -50%);
+              transform: translate(0, -50%); }
+  .poster-mode .qrcode-box {
+    position: absolute;
+    bottom: 1.92188rem;
+    right: 0.46875rem;
+    width: 1.40625rem; }
+    .poster-mode .qrcode-box p {
+      font-size: 0.21875rem;
+      color: #fff;
+      text-align: center; }
+  .poster-mode .replay-btn {
+    position: absolute;
+    bottom: 0.70312rem;
+    left: 1.48438rem;
+    width: 2.8125rem; }
+  .poster-mode .secret-btn {
+    position: absolute;
+    bottom: 0.70312rem;
+    right: 1.48438rem;
+    width: 2.8125rem; }
+
 .shake-mode {
   position: fixed;
   top: 0;
@@ -540,3 +900,73 @@ img {
     opacity: 1; }
   50% {
     opacity: 0.7; } }
+
+.anim-btn {
+  -webkit-animation: btn 1s ease infinite;
+     -moz-animation: btn 1s ease infinite;
+       -o-animation: btn 1s ease infinite;
+          animation: btn 1s ease infinite; }
+
+@-webkit-keyframes btn {
+  0%, 100% {
+    -webkit-transform: scale(1, 1);
+            transform: scale(1, 1); }
+  15% {
+    -webkit-transform: scale(1.1, 1.1);
+            transform: scale(1.1, 1.1); }
+  20% {
+    -webkit-transform: scale(1.1, 1.1);
+            transform: scale(1.1, 1.1); }
+  35% {
+    -webkit-transform: scale(1.2, 1.2);
+            transform: scale(1.2, 1.2); } }
+
+@-moz-keyframes btn {
+  0%, 100% {
+    -moz-transform: scale(1, 1);
+         transform: scale(1, 1); }
+  15% {
+    -moz-transform: scale(1.1, 1.1);
+         transform: scale(1.1, 1.1); }
+  20% {
+    -moz-transform: scale(1.1, 1.1);
+         transform: scale(1.1, 1.1); }
+  35% {
+    -moz-transform: scale(1.2, 1.2);
+         transform: scale(1.2, 1.2); } }
+
+@-o-keyframes btn {
+  0%, 100% {
+    -o-transform: scale(1, 1);
+       transform: scale(1, 1); }
+  15% {
+    -o-transform: scale(1.1, 1.1);
+       transform: scale(1.1, 1.1); }
+  20% {
+    -o-transform: scale(1.1, 1.1);
+       transform: scale(1.1, 1.1); }
+  35% {
+    -o-transform: scale(1.2, 1.2);
+       transform: scale(1.2, 1.2); } }
+
+@keyframes btn {
+  0%, 100% {
+    -webkit-transform: scale(1, 1);
+       -moz-transform: scale(1, 1);
+         -o-transform: scale(1, 1);
+            transform: scale(1, 1); }
+  15% {
+    -webkit-transform: scale(1.1, 1.1);
+       -moz-transform: scale(1.1, 1.1);
+         -o-transform: scale(1.1, 1.1);
+            transform: scale(1.1, 1.1); }
+  20% {
+    -webkit-transform: scale(1.1, 1.1);
+       -moz-transform: scale(1.1, 1.1);
+         -o-transform: scale(1.1, 1.1);
+            transform: scale(1.1, 1.1); }
+  35% {
+    -webkit-transform: scale(1.2, 1.2);
+       -moz-transform: scale(1.2, 1.2);
+         -o-transform: scale(1.2, 1.2);
+            transform: scale(1.2, 1.2); } }

minigame/WebContent/static/index.html

@@ -14,13 +14,14 @@
     <meta name="format-detection" content="email=no" />
     <title>首页</title>
     <script src="./js/flexiable.js"></script>
+    <link rel="stylesheet" type="text/css" href="./css/animate.min.css?v=1">
     <link rel="stylesheet" type="text/css" href="./css/main.css?v=1">
   </head>
 <body onload="init()">
     <!-- loading -->
     <div class="loading">
         <div class="curtain-box">
-            <div class="txt">
+            <div class="txt rubberBand time6 iteration">
                 <img src="./img/loading/loading_txt.png">
             </div>
             <div class="loading-bar">
@@ -37,29 +38,66 @@
     <div class="warp">
         <!-- 选择菜 -->
         <div class="select-dish-box">
-            <img src="./img/menu_tt.png" class="tt">
+            <img src="./img/menu_tt.png" class="tt fadeIn time4 animated js-an">
             <div class="list">
-                <div class="item">
+                <div class="item bounceIn time3 animated js-an delay3">
                     <img src="./img/menu1.png">
                 </div>
-                <div class="item">
+                <div class="item bounceIn time3 animated js-an delay4">
                     <img src="./img/menu2.png">
                 </div>
-                <div class="item">
+                <div class="item bounceIn time3 animated js-an delay5">
                     <img src="./img/menu3.png">
                 </div>
-                <div class="item">
+                <div class="item bounceIn time3 animated js-an delay6">
                     <img src="./img/menu4.png">
                 </div>
             </div>
-            <div class="confirm"></div>
+            <div class="confirm anim-btn"></div>
         </div>
         <!-- 游戏 -->
         <div class="game-box">
             <canvas id="canvas" width="640" height="1040"></canvas>
         </div>
     </div>
+    <!-- 海报 -->
+    <div class="poster-mode">
+        <img src="./img/poster/hsr1.jpg" id="poster">
+        <div class="leads-box">
+            <img src="./img/leads_pro.png" class="pro">
+            <div class="form-group">
+                <input type="text" placeholder="我想把这道菜送给TA">
+            </div>
+            <div class="form-group">
+                <input type="text" placeholder="我想对TA说">
+            </div>
+            <div class="user-info">
+                <div class="headimg-box">
+                    <img src="./img/headimg.png">
+                </div>
+                <p>微信昵称</p>
+            </div>
+            <div class="submit">
+                <img src="./img/share_btn.png">
+            </div>
+        </div>
+        <div class="qrcode-box">
+            <img src="./img/poster/qrcode.jpg">
+            <p>扫码为他做菜</p>
+        </div>
+        <div class="replay-btn">
+            <img src="./img/replay_btn.png">
+        </div>
+        <div class="secret-btn">
+            <img src="./img/secret_btn.png">
+        </div>
+    </div>
+
+    <div class="secret-box">
+        <img src="./img/poster/secret1.png" id="secret">
+    </div>
 
+    <!-- 摇一摇提示 -->
     <div class="shake-mode">
         <div class="shake-dialog">
             <!-- <img src="./img/shake_fire.png"> -->

minigame/WebContent/static/js/main.js

@@ -43,7 +43,10 @@ function handleComplete(evt, comp) {
         ss[ssMetadata[i].name] = new createjs.SpriteSheet({ "images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames })
     }
     var exportRoot = new lib.assets();
-    $(".loading").fadeOut();
+    $(".loading").fadeOut(function(){
+        $(".select-dish-box").find(".animated").removeClass("js-an");
+    });
+
 
 
     $(".select-dish-box .item").on("click", function() {
@@ -58,6 +61,15 @@ function handleComplete(evt, comp) {
         $(".select-dish-box").hide();
         $(".game-box").show();
     })
+    $(".replay-btn").on("click",function(){
+        location.reload() 
+    })
+    $(".secret-btn").on("click",function(){
+        $(".secret-box").fadeIn();
+    })
+    $(".secret-box").on("click",function(){
+        $(".secret-box").fadeOut();
+    })
 
 
     function ballAnim(dom) {
@@ -81,7 +93,7 @@ function handleComplete(evt, comp) {
     }
 
     function bowlAnim(callback) {
-        var anim = new TimelineMax({ onComplete: callback, delay: 1 });
+        var anim = new TimelineMax({ onComplete: callback, delay: 0.3 });
         anim.to(exportRoot.plate, 0.5, { y: "-=370", ease: Power0.easeIn })
         anim.to(exportRoot.bowl, 0.5, { alpha: 1, ease: Power0.easeIn });
         return anim;
@@ -108,6 +120,14 @@ function handleComplete(evt, comp) {
         return anim;
     }
 
+    function materialEnterAnim(dom,delay){
+        dom.scale = 0.1;
+        delay = delay || 0.1;
+        var anim = new TimelineMax({ delay:delay});
+        anim.to(dom,0.8, { scale: 1, ease: Elastic.easeOut.config(1, 0.3) })
+        return anim;
+    }
+
 
     // 红烧肉的位置
     var hsr_iconArr = [{
@@ -164,7 +184,6 @@ function handleComplete(evt, comp) {
                             if (hsr_iconArr[p].isClear == false) {
                                 exportRoot.plate['hsr_icon' + (p + 1)].gotoAndStop(1);
                                 hsr_iconArr[p].isClear = true;
-                                playbowlAnim();
                             }
                         }
                     }
@@ -195,7 +214,7 @@ function handleComplete(evt, comp) {
         lineArr.push(obj);
     })
     exportRoot.addEventListener("pressup", function(event) {
-
+        playbowlAnim();
     })
 
     // 移动菜品
@@ -220,6 +239,7 @@ function handleComplete(evt, comp) {
                 dom.removeAllEventListeners();
                 if (exportRoot.plate.hsr_icon1.y == exportRoot.plate.hsr_icon2.y && exportRoot.plate.hsr_icon1.y == exportRoot.plate.hsr_icon3.y && exportRoot.plate.hsr_icon1.y == exportRoot.plate.hsr_icon4.y) {
                     exportRoot.btn1.alpha = 1;
+                    btnAnim(exportRoot.btn1);
                     isAllInplate();
                 }
             } else {
@@ -251,6 +271,9 @@ function handleComplete(evt, comp) {
             exportRoot.btn2.removeAllEventListeners();
             exportRoot.btn2.alpha = 0;
             fadeInAnim(exportRoot.blackboard);
+            materialEnterAnim(exportRoot.blackboard.material1,0.2);
+            materialEnterAnim(exportRoot.blackboard.material2,0.4);
+            materialEnterAnim(exportRoot.blackboard.material3,0.6);
             exportRoot.ball1.alpha = 1;
 
             ballAnim(exportRoot.ball1);
@@ -320,6 +343,11 @@ function handleComplete(evt, comp) {
             $(".shake-mode").hide();
             exportRoot.pot.hsr.play();
             exportRoot.btn3.alpha = 1;
+            btnAnim(exportRoot.btn3);
+            exportRoot.btn3.addEventListener("mousedown",function(){
+                exportRoot.btn3.removeAllEventListeners();
+                $(".poster-mode").fadeIn();
+            })
         },3000)
         //获取加速度信息
         //通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。