基于VUE的SVG动画处理（一）

基于VUE的SVG动画处理（一）

提示：涉及vue、photoshop、svg动画

一、创建SVG文件

方法一：使用photoshop绘制所需接线图，导出svg格式。

第一种：快速导出SVG编辑->首选项（最下方）->导出->设置快速导出格式为SVG（或者是：文件->导出->导出首选项）然后图层处右键 即可快速导出SVG（默认为PNG）

方法二：使用svg在线编辑器
svg在线编辑器

二、vue中全局引入svg

1.在src/components下创建文件夹，命名为SvgIcon，在该文件夹下创建index.vue文件：

<template>
    <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
        <use :xlink:href="iconName" />
    </svg>
</template>
 
<script>
    export default {
        name: 'SvgIcon',
        props: {
            iconClass: {
                type: String,
                required: true
            },
            className: {
                type: String,
                default: ''
            }
        },
        computed: {
 
            iconName() {
                return `#icon-${this.iconClass}`
            },
            svgClass() {
                if (this.className) {
                    return 'svg-icon ' + this.className
                } else {
                    return 'svg-icon'
                }
            },
            styleExternalIcon() {
                return {
                    mask: `url(${this.iconClass}) no-repeat 50% 50%`,
                    '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
                }
            }
        }
    }
</script>
 
<style scoped>
    .svg-icon {
        width: 1.5em;
        height: 1.5em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
 
    .svg-external-icon {
        background-color: currentColor;
        mask-size: cover!important;
        display: inline-block;
    }
</style>

2.在src目录下，新增文件夹icons，并在该文件夹内新建index.js文件和svg文件夹，其中svg文件夹里面存放的是svg文件。

以下是src/icons/index.js文件的内容：

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件
// 注册为全局组件
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

3.在vue.config.js文件中，配置svg文件，其中chainWebpack里面的内容为svg的配置

module.exports = {
    devServer: {
        port: 8000
    },
    chainWebpack(config) {
        config.module
            .rule('svg')
            .exclude.add(resolve('src/icons'))
            .end()
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end()
    }
}

4.在main.js直接引入inco文件夹

// 全局引入icon
import '@/icons'

5.在页面直接使用组件svg-icon

其中incoClass命名等于svg文件的名称

<svg-icon iconClass="line"/>
<svg-icon iconClass="message"/>

三、svg动画

静态svg如下：

预想：实现接线图动态路径方向的展示。

  <path id="svg_3" d="m372,137.11458l0,161.19864" stroke-linecap="undefined" stroke-linejoin="undefined" stroke-width="3" fill="#000" stroke="#ff0000"/>
  <g>
        <circle r="5" fill="blue" id="circle1" opacity=".8">
            <!-- Define the motion path animation -->
            <animateMotion dur="4s" begin="0s" repeatCount="indefinite">
                <mpath xlink:href="#svg_3"/>
            </animateMotion>
            <animateTransform attributeName="transform" begin="0s" dur="4s" type="scale" repeatCount="indefinite"  />
        </circle>
        <circle r="5" fill="blue" id="circle1" opacity=".8">
            <!-- Define the motion path animation -->
            <animateMotion dur="4s" begin="-2s" repeatCount="indefinite">
                <mpath xlink:href="#svg_3"/>
            </animateMotion>
            <animateTransform attributeName="transform" begin="0s" dur="4s" type="scale" repeatCount="indefinite"  />
        </circle>
    </g>

实现效果：

关于SVG 动画（animate、animateTransform、animateMotion）讲解
可参考：https://cloud.tencent.com/developer/section/1424085

总结

1.先画出svg图，其中svg要转换成路径导出。
2.在svg文件中对animateMotion进行添加。

进一步优化：
1.根据运动数据，动态实现circle路径的正反向。
2.svg动态点击显示信息等。