使用css结合vue3css变量绘制仪表盘指针动画效果

自适应仪表盘指针动画实现与动态更新

最新推荐文章于 2024-06-06 20:56:55 发布

原创最新推荐文章于 2024-06-06 20:56:55 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #动画 #css3

vue+element 专栏收录该内容

7 篇文章

订阅专栏

本文档详细介绍了如何使用CSS和Vue3实现一个自适应宽高的仪表盘，保持指针的宽高比和旋转动画效果。通过伪元素绘制仪表盘背景和指针，利用vw单位调整大小和位置。同时，通过动态计算指针角度并应用过渡动画，实现了指针角度的平滑变化。在每次更改指针角度后，通过`makeAnimate`方法添加和移除动画效果，确保动画的连贯性。

1.功能描述

仪表盘与指针自适应宽度，保持宽高比，保持指针位置
保留指针旋转动画效果
根据返回结果计算指针角度

2 效果展示

指针仪表盘

3 实现

3.1 实现仪表盘

使用padding撑开高度，保持宽高比
使用before伪元素绘制仪表盘，锥形渐变实现颜色由浅到深
使用after伪元素覆盖中心位置
指针我使用的字体图标，使用 vw 单位设置大小和位置

<div class="conic-wrap">
  <div class="conic">
     <span class="pointer icon icon-Pointer"></span>
   </div>
 </div>
 <div>
   <el-button @click="testSpeed">Run Speed Test</el-button>
 </div>

/* 添加边距，可忽略 */
.conic-wrap {
  padding: 0 12%;
}
/* 撑开高度 */
.conic {
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
}
/* 绘制仪表盘 */
.conic::before {
  content:"";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  border-radius: 50%;
  transform: rotate(-180deg);
  background: 
        conic-gradient(
          #fff 70deg,
          #e7edf6 70deg,
          #215db6 290deg,
          #fff 290deg,
          #fff 360deg
        );

}
/* 掏空中间 */
.conic::after {
  content:"";
  position: absolute;
  display: block;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background-color: #fff;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
}
/* 指针样式 */
.conic span.pointer {
  position: absolute;
  color: #215db6;
  transform-origin: center 70%;
  z-index: 1;
  left: calc(50% - 2.6vw);
  top: calc(50% - 3.2vw);
  z-index: 1;
  font-size: 5.4vw;
  cursor: auto;
  transform:rotate(v-bind(pointerDeg));/* vue3新增，在css中使用变量 */
  transition: all .5s cubic-bezier(.14,1.24,.96,.77);
}
/* 动画效果 */
.in-animation{
  animation: pointerMove 1.5s ease-in-out;
}
/* -102 到 +102 */
@keyframes pointerMove {
  from{
    transform:rotate(-102deg);
  }
  10% {
    transform:rotate(-104deg);
  }
  to {
    transform:rotate(v-bind(pointerDeg));
  }
}

3.2 保持动画效果

每次更改指针角度后，调用 makeAnimate 方法，为指针重新添加动画效果，当执行结束后再移除

  makeAnimate() {
  // 监听指针是否结束动画，当结束动画后将动画效果移除
   document.querySelector('span.pointer').addEventListener('animationend', function () {
      this.classList.remove('in-animation')
    })
    // 添加动画效果
    document.querySelector('span.pointer').classList.add('in-animation')
  },

3.3 动态更改指针角度

vue3 支持在 css 中使用 data 属性
示例 v-bind(data属性名称)

/* 直接在style标签中使用即可 */
.conic span.pointer {
  transform:rotate(v-bind(pointerDeg));
}