svg旋转动画-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45441173/article/details/128753712

该文章展示了如何在Vue.js中创建一个名为imoocLoading的自定义组件，该组件使用SVG进行圆形旋转加载动画。通过stroke-dasharray和animateTransform属性控制动画效果，同时支持外部传入颜色、尺寸和持续时间等参数进行自定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<template>
  <div class="imooc-loading">
    <svg
      :width="width"
      :height="height"
      viewBox="0 0 50 50"
      preserveAspectRatio="xMidYMid meet"
    >
      <!-- stroke-dasharray  2pir/4=2*3.1415926*22=34    把整个圆分为4分  2等分线段 2等分空白 -->
      <circle
        cx="25"
        cy="25"
        r="22"
        fill="none"
        stroke-width="3"
        stroke-dasharray="34"
        stroke-linecap="round"
        :stroke="outsidecolor"
      >
        <animate
          attributeName="stroke"
          attributeType="XML"
          :values="outsidecolorAnimation"
          :dur="`${duration}s`"
          repeatCount="indefinite"
        ></animate>
        <!--from="0 25 25" to="360 25 25" value="0 25 25;360 25 25" -->
        <animateTransform
          attributeName="transform"
          attributeType="XML"
          type="rotate"
          values="0 25 25;360 25 25"
          :dur="`${duration * 2}s`"
          repeatCount="indefinite"
        ></animateTransform>
      </circle>
      <!-- stroke-dasharray  2pir/4=2*3.1415926*12=18    把整个圆分为4分  2等分线段 2等分空白
           stroke-linecap="round" 把图形变为圆角的弧度
       -->
      <circle
        cx="25"
        cy="25"
        r="12"
        stroke-dasharray="18"
        fill="none"
        stroke-width="3"
        stroke-linecap="round"
        :stroke="insidecolor"
      >
        <animate
          attributeName="stroke"
          attributeType="XML"
          :values="insidecolorAnimation"
          :dur="`${duration}s`"
          repeatCount="indefinite"
        ></animate>
        <!-- value代替 from to  from="360 25 25" to="0 25 25"-->
        <animateTransform
          attributeName="transform"
          attributeType="XML"
          type="rotate"
          values="360 25 25;0 25 25"
          :dur="`${duration * 2}s`"
          repeatCount="indefinite"
        ></animateTransform>
      </circle>
    </svg>
    <div class="imooc-loading-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "imoocLoading",
};
</script>

<script setup>
import { defineProps, withDefaults, computed } from "vue";

const definepr = defineProps({
  width: {
    type: [String, Number],
    default: 50,
  },
  outsidecolor: {
    type: [String],
    default: "#3be6cb",
  },
  insidecolor: {
    type: [String],
    default: "#02bcfe",
  },

  height: {
    type: [String, Number],

    default: 50,
  },
  duration: {
    type: [Number, String],
    default: 3,
  },
});
console.log(definepr.outsidecolor, "insidecolor");
const insidecolorAnimation = computed(() => {
  return `${definepr.outsidecolor} ;${definepr.insidecolor}; ${definepr.outsidecolor}`;
});
const outsidecolorAnimation = computed(() => {
  return `${definepr.insidecolor} ;${definepr.outsidecolor} ;${definepr.insidecolor}`;
});

console.log(definepr.width); //200;
</script>

<style lang="scss" scoped></style>

引入使用 (我是npm link到我自己的组件库项目的你们使用就跟局部组件使用的方式一样 )

  <imooc-loading
      width="200"
      height="200"
      outsidecolor="red"
      insidecolor="blue"
      duration="2"
    >
      <div class="" style="font-size: 22px; color: red">
        数据可视化大屏加载中...
      </div>
    </imooc-loading>