vue 中 彈幕的播放

前言

  最近在搞彈幕的問題，小程序上的和vue上的，不想使用插件，因而本身摸索了一下，其實包括 2中彈幕形式 有序和無序的

直接上代碼吧

<!-- 彈幕 -->
      <template v-if=" barrageData.newsRocket.length > 0 ">
        <!-- 'animation-duration':6+'s','animation-delay': item.delay+'s' -->
        <div class="rocket barrage-wrapper" v-show=" barrageData.isBarrage ">
          <div
            class="barrage-context barrageTop"
            :style="{top:0.8+'rem', 'animation-duration': barrageData.barrageTop.length > 1 ? barrageData.barrageTop.length * 4 +'s':'4s',
             width:barrageData.barrageTop.length > 1?'':'120%'}"
          >
            <div class="display-list" v-for="(item,index) in barrageData.barrageTop" :key="'br'+index">
              <div>
                <img class="reImg" :src="item.avatar">
              </div>
              <div class="barrage-text" v-html="item.desc"></div>
            </div>
          </div>
        </div>
        <div class="rocket barrage-wrapper" v-show="barrageData.isBarrage">
          <div
            class="barrage-context barrageBottom"
            :style="{top:1.8+'rem', 'animation-duration': barrageData.barrageBottom.length > 1? barrageData.barrageTop.length*5+'s':'4s',
            width:barrageData.barrageBottom.length > 1?'':'120%'}"
          >
            <div class="display-list" v-for="(item,index) in barrageData.barrageBottom" :key="'br'+index">
              <div>
                <img class="reImg" :src="item.avatar">
              </div>
              <div class="barrage-text" v-html="item.desc"></div>
            </div>
          </div>
        </div>
      </template>

      <template v-else>
        <div class="no-barrage" v-show=" activityData.register ">{{ barrageData.friendsDesc }}</div>
      </template>

css 

 // 彈幕
  .barrage-wrapper {
    position: fixed;
    height: 0.7rem;
    width: 7.5rem;
    white-space: nowrap;
    text-overflow: clip;
    .barrage-context {
      display: flex;
      justify-content: space-around;
      // width: 100%;
      height: 0.7rem;
      left: 100%;
      visibility: hidden;
      // overflow: hidden;
      position: absolute;
    }
    .display-list {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 0.7rem;
      // position: absolute;
      // left: 0%;
      // visibility: hidden;
      color: #fff;
      margin-right: 1.1rem;
    }
    img {
      width: 0.7rem;
      height: 0.7rem;
      border-radius: 50%;
      background: #141540;
      border: 0.04rem solid rgba(255, 255, 255, 0.7);
      position: relative;
    }
    .barrage-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background: rgba(0, 0, 0, 0.6);
      white-space: nowrap;
      margin: 0 -0.5rem;
      height: 0.64rem;
      line-height: 0.64rem;
      padding: 0 0.7rem;
      font-size: 0.24rem;
      border-top-right-radius: 0.45rem;
      border-bottom-right-radius: 0.45rem;
    }
  }

View Code

 動畫化的css

js 來判斷他是 一條代碼仍是多條  代碼來判斷他的寬度是 

再根據 css 來根據

 

@keyframes barrage {
  from {
    //left: 100%;
    visibility: visible;
    transform: translateX(0);
  }
  100% {
    //left: 0%;
    visibility: hidden;
    transform: translateX(-180%);
  }
}

@keyframes barrageBottom {
  from {
    visibility: visible;
    transform: translateX(0);
  }
  100% {
    visibility: hidden;
    transform: translateX(-180%);
  }
}

View Code

 

visibility: hidden; 這個字段來判讀彈幕在滾動到另外一端的地方，消失，不至於彈幕卡主住那邊

用 left 的話就是判斷她是無序的代碼， 下一條會比上一條快

用  transform: translateX(0); 就是有序代碼 ，不會跑到前面

 

 

這樣彈幕就完成了