vue +svg 實現圓形倒計時

 這里用到的svg的知識點：

1.stroke-dasharray

一組用逗號分割的數字組成的數列
為一個參數時：表示虛線長度和每段虛線之間的間距
兩個參數時：一個表示長度，一個表示間距
多個參數時：數字會循環兩次，形成一個偶數的虛線模式（奇數個循環兩次變偶數個）

2.stroke-dashoffset

偏移的位置
偏移負數，虛線整體右移動
偏移正數，虛線整體左移

以上2個參數一起用可以設置動畫
1.設置stroke-dasharray虛線長度等於當前svg的寬度，間隔大於或者等於svg寬度 可視區域內只能看到一段虛線 此時偏移量為0
2.設置stroke左移svg的寬度 會剛好隱藏了虛線
因此 如果反過來---設置偏移為從【svg的寬度】到【0】 就會慢慢顯現出來虛線

3.animate
動畫
:from
:to
:dur
用來配合stroke-dashoffset使用

這次實現的思路是
1 設置兩個circle
  一個用來當背景圈
  一個用來走圈動畫
 2.走圈動畫的circle里面套一個animate 用來保證動畫的流暢性
   圈動畫主要就是一個stroke-dashoffset的從circle的周長過渡為0的過程（圓逐漸出現
  


下面是代碼實現：

<template>
    <svg class="ring-container" :style="`width: ${size}; height: ${size}`">
        <circle :cx="cx" :cy="cx" :r="r"
                :stroke="backgroundColor"
                :stroke-width="width"
                stroke-linecap="round"
                fill="none"></circle>
        <circle :cx="cx" :cy="cx" :r="r"
                class="ring"
                :stroke-width="width"
                :stroke="color"
                :stroke-dasharray="`${circum}`"
                stroke-linecap="round"
                fill="none">
            <animate attributeName="stroke-dashoffset"
                     :from="circum"
                     :to="endCircum"
                     :dur="originCountDown"/>
        </circle>
        <text :x="cx+5" :y="cx+10" text-anchor="end"
              :font-size="fontSize + 5"
              :fill="fontColor">
            {{ countDown }}
        </text>
        <text :x="cx+5" :y="cx+10" text-anchor="start"
              :font-size="fontSize - 5"
              :fill="fontColor">
           s
        </text>
    </svg>
</template>

<script>
    export default {
        name: "CircleLoad",
        data(){
            return{
                endCircum:0,
                countDown:this.originCountDown,
            }
        },
        computed: {
            cx() { // 中心點位置
                return this.size / 2
            },
            r() { // 半徑
                return this.size / 2 - this.width
            },
            circum() {
                return parseInt(this.r * Math.PI * 2)
            }
        },
        props: {
            fontSize: {
                type: Number,
                default: 26
            },
            size: {
                type: Number,
                default: 100
            },
            width: {
                type: Number,
                default: 5
            },
            backgroundColor: {
                type: String,
                default: '#f0f0f0'
            },
            color: {
                type: String,
                default: '#448732'
            },
            fontColor:{
                type: String,
                default: '#333'
            },
            originCountDown:{
                type: Number,
                default: 15
            }
        },
        mounted(){
            this.interval = setInterval(() => {
                let diff = '1';
                this.countDown -= diff;
                if (this.countDown <= 0) {
                    clearInterval(this.interval)
                }
            }, 1000)
        }
    }
</script>

<style lang="scss">
    .ring-container {
        .ring {
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
        }
    }
</style>

 

 效果示意圖：

 

 

 

小TIPS：
 1.circle默認會從3點鍾方向開始走 因此要在css里rotate一下
 2. 在css里寫不行 因為animate涉及到數據的設置