利用svg画路径图 vue

利用svg画路径图 vue

0：vue框架下的依赖引入

在package.json文件中加入

"animejs": "3.0.1",
"iview": "3.0.0",

再在控制台执行 npm i 即可自动安装

1：单路径

效果图：

<style>
  .yellow {
    position: absolute;
  }
  .path {
    width: 300px;
    height: 150px;
    /* 路径线的底色 */
    stroke: rgb(2, 97, 2);
    /* 路径线的宽度 */
    stroke-width: 5;
    /* 路径线的间距     20,0;  为每段20px间距为0     15,5;为每段15px间距为5px */
    stroke-dasharray: 10, 2;
    fill: transparent;
    display: block;
    position: absolute;
  }

  .article {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    min-height: 8rem;
    margin-bottom: 1rem;
    padding: 1rem;
  }
</style>
<template>
  <div>
    <section style="display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    max-width: 30rem;
    margin: auto;
    text-align: center;">
      <article class="article">
        <svg version="1.1" class="svg" height="400px">
          <!--下右下-->
          <!-- 线的路线及规则  <path d="M100 0右上角(起始点位置) L 100 65左边拐点的位置 , 180 65右边拐点的位置,  180下边的线的偏转角度  215下边线的长度" class="path"/> -->
          <path d="M100 0 L 100 65 , 180 65 , 180 115" class="path"/>
          <!-- 运动点的路线及规则 -->
          <path fill="none" stroke="" d="M95 -5 L 95 60,175 60,175 110" id="yellow"/>
        </svg>
        <div class="yellow" style="background-color: yellow;width: 10px;height: 10px"></div>
      </article>
    </section>
    <Button @click="stop">停止</Button>
    <Button @click="start">开始</Button>
    <Button @click="reset">重置</Button>
  </div>
</template>

<script>
import anime from 'animejs'

export default {
  data () {
    return {
      yellow: undefined,
    }
  },
  methods: {
    stop () {
      const self = this
      self.yellow.pause()
    },
    start () {
      const self = this
      self.yellow.play()
    },
    reset () {
      const self = this
      self.yellow.reset()
    }
  },
  mounted () {
    const self = this
    let yellowPath = anime.path('#yellow')
    self.yellow = anime({
      targets: '.yellow',
      // 沿着路径对象的x值
      translateX: yellowPath('x'),
      // 沿着路径对象的y值
      translateY: yellowPath('y'),
      easing: 'linear',
      // 物体块的移动速度
      duration: 3000,
      loop: true
    })
    self.yellow.pause()
  }
}
</script>

2：多路径

<style>
  .green {
    position: absolute;
  }

  .blue {
    position: absolute;
  }

  .yellow {
    position: absolute;
  }

  .red {
    position: absolute;
  }
  .orange {
    position: absolute;
  }
  .path {
    width: 300px;
    height: 150px;
    stroke: pink;
    stroke-width: 10;
    stroke-dasharray: 15, 5;
    fill: transparent;
    display: block;
    position: absolute;
  }

  .article {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    min-height: 8rem;
    margin-bottom: 1rem;
    padding: 1rem;
  }
</style>
<template>
  <div>
    <section style="display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    max-width: 30rem;
    margin: auto;
    text-align: center;">
      <article class="article">
        <svg version="1.1" class="svg" height="400px">
          <!--下右下-->
          <path d="M100 0 L 100 65 , 180 65,180 115" class="path"/>
          <path fill="none" stroke="" d="M95 -5 L 95 60,175 60,175 110" id="yellow"/>
          <!--下左下-->
          <path d="M300 0 L 300 65 , 220 65,220 115" class="path"/>
          <path fill="none" stroke="" d="M295 -5 L 295 60,215 60,215 110" id="red"/>
          <!--下左-->
          <path d="M0 275 L 150 275 , 150 235" class="path"/>
          <path fill="none" stroke="" d="M145 230 L 145 270,-5 270" id="orange"/>
          <!--上左-->
          <path d="M0 300 L 150 300 , 150 340" class="path"/>
          <path fill="none" stroke="" d="M145 335 L 145 295,-5 295" id="green"/>
          <!--左上-->
          <path d="M390 275 L 220 275 , 220 235" class="path"/>
          <path fill="none" stroke="" d="M385 270 L 215 270 , 215 230" id="blue"/>
        </svg>
        <div class="yellow" style="background-color: yellow;width: 10px;height: 10px"></div>
        <div class="red" style="background-color: red;width: 10px;height: 10px"></div>
        <div class="orange" style="background-color: orange;width: 10px;height: 10px"></div>
        <div class="green" style="background-color: green;width: 10px;height: 10px"></div>
        <div class="blue" style="background-color: blue;width: 10px;height: 10px"></div>
      </article>
    </section>
    <Button @click="stop">停止</Button>
    <Button @click="start">开始</Button>
    <Button @click="reset">重置</Button>
  </div>
</template>

<script>
import anime from 'animejs'

export default {
  data () {
    return {
      yellow: undefined,
      red: undefined,
      orange: undefined,
      green: undefined,
      blue: undefined
    }
  },
  methods: {
    stop () {
      const self = this
      self.yellow.pause()
      self.red.pause()
      self.orange.pause()
      self.green.pause()
      self.blue.pause()
    },
    start () {
      const self = this
      self.yellow.play()
      self.red.play()
      self.orange.play()
      self.green.play()
      self.blue.play()
    },
    reset () {
      const self = this
      self.yellow.reset()
      self.red.reset()
      self.orange.reset()
      self.green.reset()
      self.blue.reset()
    }
  },
  mounted () {
    const self = this
    let yellowPath = anime.path('#yellow')
    let redPath = anime.path('#red')
    let orangePath = anime.path('#orange')
    let greenPath = anime.path('#green')
    let bluePath = anime.path('#blue')
    self.yellow = anime({
      targets: '.yellow',
      // 沿着路径对象的x值
      translateX: yellowPath('x'),
      // 沿着路径对象的y值
      translateY: yellowPath('y'),
      easing: 'linear',
      duration: 10000,
      loop: true
    })
    self.red = anime({
      targets: '.red',
      // 沿着路径对象的x值
      translateX: redPath('x'),
      // 沿着路径对象的y值
      translateY: redPath('y'),
      easing: 'linear',
      duration: 10000,
      loop: true
    })
    self.orange = anime({
      targets: '.orange',
      // 沿着路径对象的x值
      translateX: orangePath('x'),
      // 沿着路径对象的y值
      translateY: orangePath('y'),
      easing: 'linear',
      duration: 10000,
      loop: true
    })
    self.green = anime({
      targets: '.green',
      // 沿着路径对象的x值
      translateX: greenPath('x'),
      // 沿着路径对象的y值
      translateY: greenPath('y'),
      easing: 'linear',
      duration: 10000,
      loop: true
    })
    self.blue = anime({
      targets: '.blue',
      // 沿着路径对象的x值
      translateX: bluePath('x'),
      // 沿着路径对象的y值
      translateY: bluePath('y'),
      easing: 'linear',
      duration: 10000,
      loop: true
    })
    self.blue.pause()
    self.yellow.pause()
    self.red.pause()
    self.orange.pause()
    self.green.pause()
  }
}
</script>

多路径方法可参考原博主博客：https://www.cnblogs.com/longmaodaxia/p/11271424.html