vue项目使用scss生成多个同心圆环按不同速度转动的效果实现

 

如上，实现多个同心不同宽度的圆环以不同的速度转动的特效。

本例所取项目采用了vue+vant+scss+mockjs，其中圆环采用vant的环形进度条组件，圆环的宽度、直径大小、线条的长度等采用mockjs的随机数按一定规则进行设置，圆环的循环滚动采用css3的animation动画，动画的随机频率由css的var()函数从html的style属性中获取。

相关技术说明文档如下：Circle 环形进度条、CSS的var函数、mockjs生成随机数。

示例代码：

circle.vue

<template>
  <div class="page tc w100 h100">
    <section class="circleProcess pRelative">
      <van-circle class="circle pAbsolute" :class="'circle'+index" v-for="(item,index) in circleProcessData" :key="index"
        :style="{'top':(initSize-item.size)/2+'px','left':0-item.size/2+'px','--speed':item.speed/10+'s'}" v-model="currentRate[index]"
        :rate="item.rate" :speed="item.speed" :size="item.size" :stroke-width="item['stroke-width']" :color="gradientColor" />
    </section>
  </div>
</template>
<script>
  import {
    Circle
  } from 'vant';
  export default {
    name: "Circle",
    components: {
      'van-circle': Circle
    },
    data() {
      return {
        currentRate: [], //圆环初始进度
        gradientColor: {
          '0%': '#3fecff',
          '100%': '#6149f6',
        },
        circleProcessData: '',
        initSize: 200
      }
    },
    created() {
      //圆环初始进度，每个圆环相互独立，使用一个七点会造成所有圆环闪动
      for (var i = 0; i < 5; i++) {
        this.currentRate.push(0)
      }
      //动态获取圆环相关数据
      this.http.get("/service/circleProcess", {
        size: this.initSize
      }).then(data => {
        this.circleProcessData = data.d.circleProcessData
        console.log(JSON.stringify(this.circleProcessData))
      })
    }
  }
</script>
<style lang="scss" scoped>
  .circleProcess {
    margin: 30% 50%;

    @for $i from 0 to 5 {
      .circle#{$i} {
        //动画频率由html的style属性传过来，使用css的var()函数获取（该变量不可计算，所以需要直接传递完整的样式值）
        animation: turn var(--speed) linear infinite;
      }
    }

    @keyframes turn {
      @for $i from 0 to 5 {
        #{$i*25}% {
          -webkit-transform: rotate($i*90+deg);
        }
      }
    }
  }
</style>

mock.js——项目需要，本地开发使用mock.js拦截http请求，如果不需要可直接使用js的随机数函数。

const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random;
module.exports = {
  getCircleProcessData:(req,res)=>{
    let circleProcessData=[];
    let size=utils.getParamsFromRequest('size',req)||200;
    let initSize=size/5;
    for(var i=0;i<5;i++){
        circleProcessData.push({
          rate:i==4?80:Random.integer(50, 90),
          //圆环直径大小以第一个初始值累加一定随机数
          size:i>0?(circleProcessData[i-1].size+Random.integer(50, 80)):initSize,
          speed:Random.integer(20, 50),
          'stroke-width':Random.integer(20, 40)
        })
    }
    return {
      s: "0",
      m: "发送成功",
      d: {
        circleProcessData:circleProcessData
      }
    }
  },
  ......
}

注意事项：

关于animation动画的循环频率，scss中并没有随机数这一说，所以，要用css的var()函数来获取了，可以在html的style属性中传递，如下：

:style="{'top':(initSize-item.size)/2+'px','left':0-item.size/2+'px','--speed':item.speed/10+'s'}"

var()获取的属性值只能引用，不能在scss中计算，所以要拼接好能直接使用的属性值: item.speed/10+'s' 。