在数据可视化大屏项目开发过程中，设计师提供的大屏设计图经常会遇到类似下面的底座效果。

项目做的多了，遇到类似的底座多了以后就想着能不能让底座里的刻度动起来呢？

动画效果

底座实现代码

<template>
  <div class="BgBody" :style="bgBodyStyle">
    <div class="BgBodyInner">
      <!-- 遮罩 -->
      <div class="dizuozhezhao" :style="dizuozhezhaoStyle"></div>
      <!-- 中间线条 -->
      <div class="centerLine" :style="centerLineStyle"></div>
      <!-- 流光 -->
      <div class="liuguang">
        <line3 :skin="skin"></line3>
      </div>
      <!-- 刻度 -->
      <div class="kedu">
        <kedu :skin="skin" :stopAtPercentage="60"></kedu>
      </div>
      <!-- 底部线条 -->
      <div class="dizuoLine" :style="dizuoLineStyle"></div>
    </div>
  </div>
</template>

<script>
import line3 from './line3/index.vue'
import kedu from './kedu/index.vue'
import skin1line1 from './assets/skin1/line1.png'
import skin1line2 from './assets/skin1/line2.png'
import skin1zhezhao from './assets/skin1/zhezhao.png'
import skin2line1 from './assets/skin2/line1.png'
import skin2line2 from './assets/skin2/line2.png'
import skin2zhezhao from './assets/skin2/zhezhao.png'
import skin3line1 from './assets/skin3/line1.png'
import skin3line2 from './assets/skin3/line2.png'
import skin3zhezhao from './assets/skin3/zhezhao.png'
import skin4line1 from './assets/skin4/line1.png'
import skin4line2 from './assets/skin4/line2.png'
import skin4zhezhao from './assets/skin4/zhezhao.png'

export default {
  name: 'BgBody',
  components: { line3, kedu },
  data() {
    return {
      skinData: [
        {
          name: 'skin1',
          line1: skin1line1,
          line2: skin1line2,
          zhezhao: skin1zhezhao
        },
        {
          name: 'skin2',
          line1: skin2line1,
          line2: skin2line2,
          zhezhao: skin2zhezhao
        },
        {
          name: 'skin3',
          line1: skin3line1,
          line2: skin3line2,
          zhezhao: skin3zhezhao
        },
        {
          name: 'skin4',
          line1: skin4line1,
          line2: skin4line2,
          zhezhao: skin4zhezhao
        }
      ]
    }
  },
  props: {
    scale: {
      type: Number,
      default: 1
    },
    skin: {
      type: String,
      default: 'skin1',
      validator: value => ['skin1', 'skin2', 'skin3', 'skin4'].includes(value)
    }
  },
  computed: {
    bgBodyStyle() {
      return {
        '--scale': this.scale
      };
    },
    currentSkin() {
      return this.skinData.find(skin => skin.name === this.skin);
    },
    dizuozhezhaoStyle() {
      return {
        background: `url(${this.currentSkin.zhezhao}) center center no-repeat`,
        backgroundSize: '100% 100%'
      };
    },
    centerLineStyle() {
      return {
        background: `url(${this.currentSkin.line2}) center center no-repeat`,
        backgroundSize: '100% 100%'
      };
    },
    dizuoLineStyle() {
      return {
        background: `url(${this.currentSkin.line1}) center center no-repeat`,
        backgroundSize: '100% 100%'
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.BgBody {
  position: relative;
  width: 100%;
  height: calc(100% - 0px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;

  .BgBodyInner {
    width: calc(200px * var(--scale));
    height: calc(154px * var(--scale));
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
  }

  .dizuozhezhao {
    width: calc(165px * var(--scale));
    height: calc(134px * var(--scale));
    top: 0;
    position: absolute;
    z-index: 0;
  }

  .centerLine {
    position: absolute;
    top: 47%;
    width: calc(105px * var(--scale));
    z-index: 1;
    height: calc(35px * var(--scale));
  }

  .dizuoLine {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 1;
    height: calc(71px * var(--scale));
  }

  .liuguang {
    width: calc(188px * var(--scale));
    height: calc(100px * var(--scale));
    position: absolute;
    z-index: 10;
    bottom: calc(-10px * var(--scale));
  }

  .kedu {
    width: calc(200px * var(--scale));
    height: calc(154px * var(--scale));
    position: absolute;
    bottom: 0px;
    z-index: 10;
  }
}
</style>

刻度动画实现

首先我们创建一个环形

我们再创建一个修剪路径

我们使用Deep Glow给修剪路径增加发光效果，给修剪路径一个动画效果，这样一个刻度加载的动画就完成了。

项目应用

停车场监控看板大屏 数据可视化大屏 vue3

文件下载

文件包括vue3 vite js 项目效果源文件

ae刻度底部流光源文件