vue实现字母笔顺动画效果

要实现字母笔顺动画效果，可以使用Vue.js和SVG图形。

1. 首先，在Vue组件中定义一个data属性，用于存储要绘制的字母和笔画的坐标。

data() {
  return {
    letter: "A",
    strokes: [
      { path: "M20 10 L80 90", duration: 1000 },
      { path: "M80 90 L140 10", duration: 1000 },
      { path: "M50 50 L110 50", duration: 500 },
    ],
  };
},

2. 在Vue组件的template中，定义一个SVG元素，并使用v-for指令循环遍历要绘制的笔画。

<template>
  <svg width="150" height="150">
    <text x="20" y="120">{{ letter }}</text>
    <g v-for="(stroke, index) in strokes" :key="index">
      <path
        :d="stroke.path"
        stroke="black"
        stroke-width="5"
        fill="none"
        ref="path"
      />
    </g>
  </svg>
</template>

3. 使用Vue的mounted钩子函数，在组件加载后获取笔画的路径，并使用anime.js库实现动画效果。

mounted() {
  this.strokes.forEach((stroke) => {
    stroke.el = this.$refs.path;
    stroke.length = stroke.el.getTotalLength();
    stroke.el.style.strokeDasharray = stroke.length;
    stroke.el.style.strokeDashoffset = stroke.length;
  });
  this.animateStrokes();
},
methods: {
  animateStrokes() {
    this.strokes.forEach((stroke) => {
      anime({
        targets: stroke.el,
        strokeDashoffset: [stroke.length, 0],
        duration: stroke.duration,
        easing: "easeOutQuad",
        delay: 1000,
      });
    });
  },
},

4. 最后，使用Vue的事件监听，可以在用户输入字母时实现不同的动画效果。

<input v-model="letter" @input="restart" />

methods: {
  restart() {
    this.strokes.forEach((stroke) => {
      anime.remove(stroke.el);
      stroke.el.style.strokeDashoffset = stroke.length;
    });
    this.animateStrokes();
  },
},

完整代码如下：

<template>
  <div>
    <input v-model="letter" @input="restart" />
    <svg width="150" height="150">
      <text x="20" y="120">{{ letter }}</text>
      <g v-for="(stroke, index) in strokes" :key="index">
        <path
          :d="stroke.path"
          stroke="black"
          stroke-width="5"
          fill="none"
          ref="path"
        />
      </g>
    </svg>
  </div>
</template>

<script>
import anime from "animejs";

export default {
  data() {
    return {
      letter: "A",
      strokes: [
        { path: "M20 10 L80 90", duration: 1000 },
        { path: "M80 90 L140 10", duration: 1000 },
        { path: "M50 50 L110 50", duration: 500 },
      ],
    };
  },
  mounted() {
    this.strokes.forEach((stroke) => {
      stroke.el = this.$refs.path;
      stroke.length = stroke.el.getTotalLength();
      stroke.el.style.strokeDasharray = stroke.length;
      stroke.el.style.strokeDashoffset = stroke.length;
    });
    this.animateStrokes();
  },
  methods: {
    animateStrokes() {
      this.strokes.forEach((stroke) => {
        anime({
          targets: stroke.el,
          strokeDashoffset: [stroke.length, 0],
          duration: stroke.duration,
          easing: "easeOutQuad",
          delay: 1000,
        });
      });
    },
    restart() {
      this.strokes.forEach((stroke) => {
        anime.remove(stroke.el);
        stroke.el.style.strokeDashoffset = stroke.length;
      });
      this.animateStrokes();
    },
  },
};
</script>