鼠标悬浮时圆环顺时针填满的动画实现

2022-01-07 18:31:55 阅读：125 来源： 互联网

标签：动画顺时针 false 鼠标 index dasharray width stroke path

没有弄动图，大概就是悬浮时从0%到100%，一个顺时针充满的效果。

最一开始是想到利用element这的progress环形进度条组件来实现，鼠标移入时将percentage从0设为100，移除时再设为0即可。

底下的那个圆环不想要灰色、中间不想要文字，可以这样设置：

/deep/ .el-progress__text{
  display:none;
}
.el-progress /deep/ path:first-child {
  stroke: #cff4e1;
}

后面研究了一下element实现这个的原理，是用svg path 画圆，再利用 Stroke 属性，主要是stroke-dasharray 属性画虚线的功能。自己写了一个，代码如下：

<template>
  <div>
    <div v-for="(i,index) in showList" :key="index" @mouseover="turnShow(index)" @mouseleave="turnHidden(index)" class="main" :class="{'show':i,'noshow':!i}">
      <svg width="100" height="100">
        <!--底下那个圈-->
        <path fill="none" d="M 50 50 m -46 0 a 46 46 0 1 1 92 0 a 46 46 0 1 1 -92 0" stroke="pink" stroke-width="8px" stroke-linecap="round"/>
        <!--会动的那个圈-->
        <path fill="none" d="M 50 50 m -46 0 a 46 46 0 1 1 92 0 a 46 46 0 1 1 -92 0" stroke-width="0px" stroke-linecap="round"
          stroke-dasharray="0,290"/>
        <text x="18" y="55" fill="red">I love SVG</text>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showList: [false, false, false, false]
    }
  },
  methods: {
    turnShow(index) {
      this.$set(this.showList, index, true)
    },
    turnHidden(index) {
      this.$set(this.showList, index, false)
    }
  }
}
</script>

<style lang="less" scoped>
.main{
  width:100px;
  display:inline-block;
  margin-right:100px;
}
.show{
  path:nth-child(2){
    stroke:red;
    stroke-width: 8px;
    stroke-dasharray: 290,290;
    transition: stroke-dasharray 0.6s;
  }
}
.noshow{
  path:nth-child(2){
    stroke:pink;
    // 消失的时候不需要渐变消失就用这行
    // stroke-width: 0px;
    stroke-width: 8px;
    stroke-dasharray: 0,290;
    // 消失的时候不需要渐变消失就用这行
    // transition: stroke-dasharray 0.6s
    // 设置颜色变化的延时时间为0.5s是大概试出来的一个时间，不是绝对完美
    // 设为0.6的话鼠标移动很快的话，会感觉很不顺畅
    transition: stroke-dasharray 0.6s,stroke 0s linear 0.5s;
  }
}
</style>

参考链接：

svg path画圆看的这篇：https://blog.csdn.net/cdc_csdn/article/details/80473541

标签：动画,顺时针,false,鼠标,index,dasharray,width,stroke,path
来源： https://www.cnblogs.com/sususoso/p/15776424.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

鼠标悬浮时圆环顺时针填满的动画实现