vue实现进度条+背景定位

news2024/7/4 5:46:24

最近在做一个数字孪生项目，用于展示地铁车辆的进场动画及部件，使用的vue+unity，但是
unity模型在加载完成之前会有个加载进度条，页面背景色是黑色，中间只有个一进度条框
在这里插入图片描述
可以看到很单调很丑，并且客户也不满意，然后大哥想着在模型加载完之前，用个背景图片整体遮住，在加载完模型后，在把背景图片隐藏，现在unity会返回个模型加载进度的方法，然后前端调用方法，实时显示进度

这是背景图片
在这里插入图片描述

最终效果

代码如下

<div id="load_wrap" v-show="fullscreenLoading">
      <div id="load_room">
        <div id="load_contain">
          <div id="load_content">
          </div>
          <img id="load_train" src="@assets/3d2/train2.png" alt="">
        </div>
        <div id="load_title"></div>
      </div>
    </div>

script部分

mounted(){
    
    this.windowHeight = window.screen.height
    this.windowWidth = window.screen.width
    let that=this;
     window.top.addEventListener('message', function(e) {
      that.unityWatch(e);
    }, false, 999, true);
  },
methods:{
	let load_contain = document.querySelector("#load_contain");
      let content = document.querySelector("#load_content");
      let loadTitle = document.querySelector("#load_title");
      let train = document.querySelector("#load_train");
      let train_width = parseFloat(window.getComputedStyle(train)["width"]);
      let load_contain_width = parseFloat(window.getComputedStyle(load_contain)["width"]);
      let contain_width =load_contain_width-train_width;
      //减去车的宽度
      let content_width;
      let bei = 100 / contain_width;
      let speed='';
      if(this.fullscreenLoading==true){
        if(e.data.params){
          speed=e.data.params.percent/100;
        }
      }
      let num = 0;
      num=contain_width*speed;
      content_width = content.style["width"] = num + "px";
      content_width = train.style["left"] = num + "px";
      loadTitle.innerHTML = `<span>当前进度：${parseInt(num * bei)}%</span>`;
      if (parseInt(num * bei) == "100") {
        loadTitle.innerHTML = `<span>加载完成</span>`;
      }
}

style部分

#load_wrap{
  width: 24rem;
  height: 100%;
  background-image: url('../../assets/3d2/trainBg2.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  z-index: 999999;
}
#load_room{
  width: 100%;
  height: 9.5625rem;
  position: absolute;
  left:0;
  top:0;
  background-image: url("../../assets/3d2/room.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 100;
}
#load_contain {
  width: calc(100% - 2rem);
  height: 0.25rem;
  position: absolute;
  left:1rem;
  bottom:0;
  z-index: 120;
}
#load_title{
  width:100%;
  height: 0.25rem;
  position: absolute;
  left:0;
  bottom:-20px;
  font-size: 0.375rem;
  color: #406a87;
  text-align: center;
  font-family: digifacewide;
}
#load_title span {
  line-height: 0.25rem;
  position: absolute;
  text-align: center;
  left: calc(50% - 0.5rem);
}
#load_content {
  width: 0px;
  height: 0.25rem;
  z-index: 100;
}
#load_train{
  width: 6.25rem;
  height: 0.525rem;
  position: absolute;
  top:-0.275rem;
}