弹幕功能完善

lrk920623 · Aug 3, 2017 · bc2ebed · bc2ebed
1 parent 742b2ad
commit bc2ebed
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 55 deletions.
diff --git a/api.config.js b/api.config.js
@@ -1,5 +1,6 @@
 const isProdMode = Object.is(process.env.NODE_ENV, 'production')
 
 module.exports = {
-  baseUrl: isProdMode ? 'https://api.surmon.me/' : 'http://localhost:8000/'
+  baseUrl: isProdMode ? 'https://api.surmon.me/' : 'http://localhost:8000/',
+  socketHost: isProdMode ? 'https://surmon.me' : 'http://localhost:3000'
 }
diff --git a/assets/sass/common.scss b/assets/sass/common.scss
@@ -34,6 +34,10 @@
   }
 }
 
+[v-cloak] {
+  display: none!important;
+}
+
 // swiper
 .swiper-wrapper {
   z-index: 1;
@@ -233,28 +237,3 @@ a {
 .aside-enter, .aside-leave-active {
   opacity: 0
 }
-
-@keyframes barrage-in {
-  0%  { transform: translate3d(0, -100%, 0) }
-  20%, 50%, 70%, 100% { transform: translate3d(0, 0, 0) }
-  40%  { transform: translate3d(0, -26%, 0) }
-  60% { transform: translate3d(0, -20.6%, 0) }
-  80% { transform: translate3d(0, -12%, 0) }
-  90% { transform: translate3d(0, -4%, 0) }
-}
-
-@keyframes barrage-out {
-  0%  { transform: translate3d(0, 0, 0) }
-  100%  { transform: translate3d(0, -100%, 0) }
-}
-
-.barrage-enter-active {
-  animation-duration: 1.111s; 
-  animation-fill-mode: both; 
-  animation-name: barrage-in;
-}
-.barrage-leave-active {
-  animation-duration: .666s; 
-  animation-fill-mode: both; 
-  animation-name: barrage-out;
-}
diff --git a/components/layout/barrage.vue b/components/layout/barrage.vue
@@ -1,18 +1,23 @@
-<template>
-  <div class="global-barrage">
+ <template>
+  <div class="global-barrage" :class="{ active: barrageState }">
     <div class="barrage-box">
-      <div class="message-box">
-        <ul class="barrages-list" ref="messages">
-          <!-- 所有li都是absolute top = 随机值 * li.height，left = 随机值 * 一个随机值 -->
-          <!-- 所有Li静态syle中的translateX(100%) 然后push进去，利用transition-group将每个li的translateX变为 -100% -->
-          <!-- transition-group动画中可以使用animation也可以使用transition -->
+      <div class="message-box" ref="messageBox">
+        <transition-group tag="ul" 
+                          name="barrages-list" 
+                          class="barrages-list" 
+                          ref="messages"
+                          @enter="messageEnter"
+                          @leave="messageLeave">
           <li class="item" 
-              v-for="message in messages"
+              :key="message.text"
+              :index="index"
+              :new="message.new"
+              v-for="(message, index) in messages"
               :class="[`size-${message.style.size}`, `color-${message.style.color}`]">
             <span class="gravatar"></span>
             <span class="content" v-text="message.text"></span>
           </li>
-        </ul>
+        </transition-group>
       </div>
       <div class="input-box">
         <div class="input-inner">
@@ -76,6 +81,9 @@
       },
       currentSize() {
         return this.sizes[this.sizeIndex]
+      },
+      barrageState() {
+        return this.$store.state.option.openBarrage
       }
     },
     beforeMount() {
@@ -92,9 +100,6 @@
         this.messages.push(message)
       })
     },
-    mounted() {
-      this.scrollToBottom()
-    },
     methods: {
       sendMessage() {
         const text = this.message.trim()
@@ -108,21 +113,41 @@
           date: new Date().getTime()
         }
         this.socket.emit('send-message', message)
+        message.new = true
         this.messages.push(message)
         this.counts.count += 1
         this.message = ''
       },
-      scrollToBottom () {
-        this.$nextTick(() => {
-          this.$refs.messages.scrollTop = this.$refs.messages.scrollHeight
-        })
-      },
       transferDate(timestamp) {
         return new Date(timestamp).toLocaleString()
+      },
+      randomPer(pre = 3) {
+        return Math.floor(Math.random() * pre + 1)
+      },
+      messageLeave(element, done) {
+        // 获取渲染容器高度
+        const innerHeight = document.documentElement.clientHeight - 63
+        const innerCount = innerHeight / 30
+        const randomCount = this.randomPer(innerCount) - 1
+        element.style.top = randomCount / innerCount * 100 + '%'
+        // 新消息不再添加左边距
+        if (!element.attributes.new) {
+          element.style.left = this.randomPer(4) * 10 + '%'
+        }
+        setTimeout(done, 28000)
+      },
+      messageEnter(element, done) {
+        done()
       }
     },
     watch: {
-      messages: 'scrollToBottom'
+      messages() {
+        if (this.messages.length) {
+          this.$nextTick(() => {
+            this.messages.shift()
+          })
+        }
+      }
     }
   }
 </script>
@@ -177,14 +202,76 @@
     color: black;
   }
 
+  @keyframes barrage-in {
+    0%  { transform: translate3d(0, -100%, 0) }
+    25%, 50%, 75%, 100% { transform: translate3d(0, 0, 0) }
+    37%  { transform: translate3d(0, -26%, 0) }
+    62% { transform: translate3d(0, -18.6%, 0) }
+    88% { transform: translate3d(0, -9%, 0) }
+  }
+
+  @keyframes barrage-out {
+    0%  { transform: translate3d(0, 0, 0) }
+    100%  { transform: translate3d(0, -100%, 0) }
+  }
+
+  @keyframes inputBg {
+    0%   {
+      color: white;
+      background: chartreuse;
+    }
+    12%  {
+      color: white;
+      background: green;
+    }
+    24%  {
+      color: white;
+      background: red;
+    }
+    36%  {
+      color: white;
+      background: darkviolet;
+    }
+    60% {
+      color: white;
+      background: pink;
+    }
+    72% {
+      color: $text;
+      background: yellow;
+    }
+    86% {
+      color: $text;
+      background: white;
+    }
+    100% {
+      color: white;
+      background: black;
+    }
+  }
+
   .global-barrage {
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     z-index: 8;
+    opacity: 0;
+    visibility: hidden;
+    transform: translate3d(0, -100%, 0);
     background-color: #b7b7b7c4;
+    animation-duration: .666s; 
+    animation-fill-mode: both; 
+    animation-name: barrage-out;
+
+    &.active {
+      opacity: 1;
+      visibility: visible;
+      animation-duration: 1.111s; 
+      animation-fill-mode: both; 
+      animation-name: barrage-in;
+    }
 
     > .barrage-box {
       height: 100%;
@@ -196,12 +283,34 @@
       > .message-box {
         height: 100%;
         width: 100%;
+        display: block;
+        position: relative;
 
         > .barrages-list {
-          list-style: barrages-list;
+          list-style: square;
+          display: block;
+          width: 100%;
+          height: 100%;
+          padding: 0;
+          margin: 0;
 
-          > .item {
+          @keyframes barrages-list-out {
+            0%  { transform: translate3d(100%, 0, 0) }
+            90% { transform: translate3d(-100%, 0, 0) }
+          }
+
+          .barrages-list-leave-active {
+            animation-duration: 30s; 
+            animation-fill-mode: both; 
+            animation-name: barrages-list-out;
+          }
 
+          > .item {
+            width: auto;
+            min-width: 100%;
+            display: block;
+            position: absolute;
+            transform: translate3d(-100%, 0, 0);
           }
         }
       }
@@ -220,7 +329,8 @@
           background-color: rgba($module-bg, .9);
 
           > .count {
-            width: 8rem;
+            width: auto;
+            min-width: 9rem;
             height: 4rem;
             line-height: 4rem;
             text-align: center;
@@ -281,6 +391,11 @@
             margin: 0 auto;
             flex-grow: 1;
             padding: 1rem;
+
+            &:hover,
+            &:focus {
+              animation: inputBg 10s infinite;
+            }
           }
         }
       }

diff --git a/data/barrages.json b/data/barrages.json
@@ -1 +1 @@
-[{"text":"飞机飞过天空，天空之城~","style":{"size":2,"color":7}},{"text":"闻一闻亲手浇的花儿 \n陪着小狗儿在晚霞里遛遛弯儿 \n一会儿 舒服一会儿是一会儿","style":{"size":1,"color":3}},{"text":"我是森林中的布谷鸟 \n家住在美丽的半山腰 \n看太阳落下去又回来 \n世界太多美妙","style":{"size":2,"color":2}},{"text":"喝得越多 嗓门越高 身份的象征就是手里的包","style":{"size":0,"color":5}},{"text":"飞蝴蝶跳着动人的舞蹈 \n她的秘密没有人知道 \n美丽的白云悄悄哭泣 那是雨水的味道","style":{"size":2,"color":4}},{"text":"Knock-knock-knocking on heaven's door ~","style":{"size":1,"color":6}},{"text":"13123123]","style":{"size":2,"color":7},"date":1501743936537},{"text":"sdfkjshdkfhsdkfh","style":{"size":2,"color":7},"date":1501743954843},{"text":"1323123","style":{"size":2,"color":7},"date":1501743961528},{"text":"niaho","style":{"size":2,"color":7},"date":1501744183992},{"text":"一起好啊","style":{"size":2,"color":7},"date":1501744194346},{"text":"2213123","style":{"size":2,"color":7},"date":1501744237742},{"text":"是地方就是大黄蜂","style":{"size":2,"color":7},"date":1501744242504},{"text":"年后","style":{"size":2,"color":7},"date":1501744251348},{"text":"速度快那发啥款到发货","style":{"size":2,"color":7},"date":1501744257939},{"text":"你好","style":{"size":2,"color":3},"date":1501744362676},{"text":"哈哈哈 粗大是什么鬼","style":{"size":0,"color":3},"date":1501744370425},{"text":"当然是选择原谅他！！！","style":{"size":0,"color":1},"date":1501744382257}]
+[]
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -5,9 +5,7 @@
     </div>
     <div id="app-main" :class="{ open: mobileSidebar }" @click="closeMobileSidebar">
       <background v-if="!mobileLayout"></background>
-      <transition name="barrage">
-        <barrage v-if="!mobileLayout" v-show="barrageState"></barrage>
-      </transition>
+      <barrage v-if="!mobileLayout" v-cloak></barrage>
       <header-view v-if="!mobileLayout"></header-view>
       <mobile-header v-if="mobileLayout"></mobile-header>
       <main id="main" :class="{ 'mobile': mobileLayout }">
@@ -87,9 +85,6 @@
       },
       mobileSidebar() {
         return this.$store.state.option.mobileSidebar
-      },
-      barrageState() {
-        return this.$store.state.option.openBarrage
       }
     },
     methods: {

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -66,7 +66,7 @@ module.exports = {
   dev: (process.env.NODE_ENV !== 'production'),
   env: {
     baseUrl: apiConfig.baseUrl,
-    HOST_URL: process.env.HOST_URL || 'http://localhost:3000'
+    HOST_URL: apiConfig.socketHost
   },
   plugins: [
     { src: '~/plugins/axios.js' },
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		[{"text":"飞机飞过天空，天空之城~","style":{"size":2,"color":7}},{"text":"闻一闻亲手浇的花儿 \n陪着小狗儿在晚霞里遛遛弯儿 \n一会儿舒服一会儿是一会儿","style":{"size":1,"color":3}},{"text":"我是森林中的布谷鸟 \n家住在美丽的半山腰 \n看太阳落下去又回来 \n世界太多美妙","style":{"size":2,"color":2}},{"text":"喝得越多嗓门越高身份的象征就是手里的包","style":{"size":0,"color":5}},{"text":"飞蝴蝶跳着动人的舞蹈 \n她的秘密没有人知道 \n美丽的白云悄悄哭泣那是雨水的味道","style":{"size":2,"color":4}},{"text":"Knock-knock-knocking on heaven's door ~","style":{"size":1,"color":6}},{"text":"13123123]","style":{"size":2,"color":7},"date":1501743936537},{"text":"sdfkjshdkfhsdkfh","style":{"size":2,"color":7},"date":1501743954843},{"text":"1323123","style":{"size":2,"color":7},"date":1501743961528},{"text":"niaho","style":{"size":2,"color":7},"date":1501744183992},{"text":"一起好啊","style":{"size":2,"color":7},"date":1501744194346},{"text":"2213123","style":{"size":2,"color":7},"date":1501744237742},{"text":"是地方就是大黄蜂","style":{"size":2,"color":7},"date":1501744242504},{"text":"年后","style":{"size":2,"color":7},"date":1501744251348},{"text":"速度快那发啥款到发货","style":{"size":2,"color":7},"date":1501744257939},{"text":"你好","style":{"size":2,"color":3},"date":1501744362676},{"text":"哈哈哈粗大是什么鬼","style":{"size":0,"color":3},"date":1501744370425},{"text":"当然是选择原谅他！！！","style":{"size":0,"color":1},"date":1501744382257}]
		[]