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' 。