feat: confetti

hua1995116 · Feb 6, 2021 · b860bf5 · b860bf5
1 parent ff7c8ed
commit b860bf5
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 121 deletions.
diff --git a/client/package.json b/client/package.json
@@ -10,18 +10,19 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "canvas-confetti": "^1.3.3",
     "core-js": "^2.6.5",
     "lodash": "^4.17.11",
     "muse-ui": "^3.0.2",
     "randomcolor": "^0.5.4",
     "socket.io-client": "^1.7.3",
+    "vivus": "^0.4.1",
     "vue": "^2.6.10",
     "vue-cropper": "^0.4.9",
     "vue-flex-touch": "^1.0.0",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1",
-    "xss-filters-es6": "^1.0.0",
-    "vivus": "^0.4.1"
+    "xss-filters-es6": "^1.0.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.7.0",

diff --git a/client/src/components/Message/index.styl b/client/src/components/Message/index.styl
@@ -1,58 +1,58 @@
 .clear {
-    .item {
-        max-width: 100%;
-        position: relative;
-        display: inline-block;
-        padding: 16px 40px 16px 20px;
-        margin: 20px 10px 20px 10px;
-        border-radius: 10px;
-        background-color: #fff;
-
-        .name {
-            position: absolute;
-            top: -20px;
-            width: 280px;
-            height: 20px;
-            overflow: hidden;
-            -ms-text-overflow: ellipsis;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .msg {
-            word-break: break-all;
-        }
-
-        .time {
-            position: absolute;
-            top: -40px;
-            width: 200px;
-            height: 20px;
-            right: -70px;
-        }
-
-        .head-place {
-          display: block;
-          position: absolute;
-          top: 0;
-          background: #fff;
-          overflow: hidden;
-        }
-
-        .head {
-            width: 50px;
-            height: 50px;
-            border-radius: 50px;
-        }
-
-        &:after {
-            position: absolute;
-            top: 15px;
-            content: '';
-            width: 0;
-            height: 0;
-        }
+  .item {
+    max-width: 100%;
+    position: relative;
+    display: inline-block;
+    padding: 16px 40px 16px 20px;
+    margin: 20px 10px 20px 10px;
+    border-radius: 10px;
+    background-color: #fff;
+
+    .name {
+      position: absolute;
+      top: -20px;
+      width: 280px;
+      height: 20px;
+      overflow: hidden;
+      -ms-text-overflow: ellipsis;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .msg {
+      word-break: break-all;
+    }
+
+    .time {
+      position: absolute;
+      top: -40px;
+      width: 200px;
+      height: 20px;
+      right: -70px;
+    }
+
+    .head-place {
+      display: block;
+      position: absolute;
+      top: 0;
+      background: #fff;
+      overflow: hidden;
+    }
+
+    .head {
+      width: 50px;
+      height: 50px;
+      border-radius: 50px;
+    }
+
+    &:after {
+      position: absolute;
+      top: 15px;
+      content: '';
+      width: 0;
+      height: 0;
     }
+  }
 }
 
 .body {
@@ -64,93 +64,120 @@
   padding: 0 10px;
 }
 
-.tip {
-
-}
-
 .left {
-    .item {
-        // animation: show-chat-even 0.25s 1 ease-in
-        float: left;
-        margin-left: 80px;
-        color: #313035;
-
-        &:after {
-            left: -15px;
-            border-top: 15px solid #fff;
-            border-left: 15px solid transparent;
-        }
+  .item {
+    // animation: show-chat-even 0.25s 1 ease-in
+    float: left;
+    margin-left: 80px;
+    color: #313035;
+
+    &:after {
+      left: -15px;
+      border-top: 15px solid #fff;
+      border-left: 15px solid transparent;
     }
+  }
 
-    .name {
-        text-align: left;
-        left: -70px;
-    }
+  .name {
+    text-align: left;
+    left: -70px;
+  }
 
-    .time {
-        text-align: left;
-    }
+  .time {
+    text-align: left;
+  }
 
-    .head-place {
-        left: -70px;
-    }
+  .head-place {
+    left: -70px;
+  }
 }
 
 .right {
-    .body {
-      justify-content: flex-end;
+  .body {
+    justify-content: flex-end;
+  }
+
+  .item {
+    // animation: show-chat-odd 0.25s 1 ease-in
+    float: right;
+    margin-right: 80px;
+    color: #fff;
+    background: #2196f3;
+
+    &:after {
+      right: -15px;
+      border-top: 15px solid #2196f3;
+      border-right: 15px solid transparent;
     }
-    .item {
-        // animation: show-chat-odd 0.25s 1 ease-in
-        float: right;
-        margin-right: 80px;
-        color: #fff;
-        background: #2196f3;
-
-        &:after {
-            right: -15px;
-            border-top: 15px solid #2196f3;
-            border-right: 15px solid transparent;
-        }
+  }
+
+  .name {
+    color: #313035;
+    text-align: right;
+    right: -70px;
+  }
+
+  .time {
+    text-align: right;
+  }
+
+  .head-place {
+    right: -70px;
+  }
+
+  @keyframes show-chat-odd {
+    0% {
+      margin-right: -480px;
     }
 
-    .name {
-        color: #313035;
-        text-align: right;
-        right: -70px;
+    100% {
+      margin-right: 0;
     }
+  }
 
-    .time {
-        text-align: right;
+  @keyframes show-chat-even {
+    0% {
+      margin-left: -480px;
     }
 
-    .head-place {
-        right: -70px;
+    100% {
+      margin-left: 0;
     }
+  }
+}
 
-    @keyframes show-chat-odd {
-        0% {
-            margin-right: -480px;
-        }
+.animation-confetti {
+  animation-name: scaleDraw;
+  animation-timing-function: ease-in-out;
+  animation-duration: 1s;
+  display: inline-block;
+}
 
-        100% {
-            margin-right: 0;
-        }
-    }
+@keyframes scaleDraw {
+  0% {
+    transform: scale(1);
+  }
 
-    @keyframes show-chat-even {
-        0% {
-            margin-left: -480px;
-        }
+  25% {
+    transform: scale(1.3); /* 放大1.1倍 */
+  }
 
-        100% {
-            margin-left: 0;
-        }
-    }
+  50% {
+    transform: scale(1.5);
+  }
+
+  75% {
+    transform: scale(1.3);
+  }
+
+  100% {
+    transform: scale(1);
+  }
 }
 
 .img-wrapper {
   position: relative;
+
   .img-bg {
     position: absolute;
     left: 0;
@@ -162,4 +189,4 @@
     width: 100%;
     height: 100%;
   }
-}
+}
diff --git a/client/src/components/Message/index.vue b/client/src/components/Message/index.vue
@@ -34,7 +34,7 @@
             />
           </div>
         </div>
-        <span v-if="msg">
+        <span v-if="msg" :class="[confetti ? 'msg-text animation-confetti': 'msg-text']">
           <span v-html="linkMsg" class="msg"></span>
         </span>
       </div>
@@ -46,11 +46,21 @@
 import Avatar from "@components/Avatar";
 import Status from './Status';
 import dateFormat from "../../utils/date";
+import confetti from 'canvas-confetti';
 import { inHTMLData, uriInUnQuotedAttr } from "xss-filters-es6";
 const maxWidth = 200;
 const maxHeight = 200;
 
+function r(mi, ma) {
+	return parseInt(Math.random() * (ma - mi) + mi);
+}
+
 export default {
+  data() {
+    return {
+      confetti: false
+    }
+  },
   components: {
     Avatar,
     Status,
@@ -129,6 +139,23 @@ export default {
   mounted() {
     this.$nextTick(() => {
       this.$refs.msg.scrollIntoView();
+      if(this.msg === '🎉' && this.status) {
+        this.confetti = true;
+        const rect = this.$refs.msg.querySelector('.msg-text').getBoundingClientRect();
+        if(rect.left && rect.top) {
+          setTimeout(() => {
+            confetti({
+              particleCount: r(100, 150),
+              angle: this.isSelf ? 120 : 60,
+              spread: r(45, 80),
+              origin: {
+                x: rect.left / window.innerWidth,
+                y: rect.top / window.innerHeight
+              }
+            });
+          }, 200)
+        }
+      }
     })
     this.handleLoading();
   },

diff --git a/client/src/main.js b/client/src/main.js
@@ -120,7 +120,10 @@ socket.on('message', function (obj) {
   } else {
     store.commit('setRoomDetailInfosAfter', {
       roomid,
-      msgs: [obj]
+      msgs: [{
+        ...obj,
+        status: 'finish',
+      }]
     });
     if (Notification.permission === "granted") {
       popNotice(obj);