时间戳

首页 > 解决方案 > 如何使用 Vivus js 沿 SVG 路径为形状或图像文件设置动画？

javascript - 如何使用 Vivus js 沿 SVG 路径为形状或图像文件设置动画？

问题描述

我正在使用vivusjs库为 SVG 设置动画，我想为图像文件或形状沿动画 SVG 设置动画。如下所示：

在此处输入图像描述

白线是动画 SVG 路径，绿笔是我的图像文件。Vivusjs我在图书馆需要它。

标签： javascriptsvgvivus

解决方案

无需库，您可以使用原生 JavaScript 完成所有工作

创建您自己的 Web 组件<draw-path>（所有现代浏览器都支持）

使用 JavaScript 制作所有动画。关键是将 设置pathLength为 1 并用于getPointAtLength将 SVG 笔定位在正确的位置。

然后显示所需的所有 HTML（请参阅下面的 SO 片段）：

是：

<draw-path d='M25 50a25 25 0 1 1 80 0a25 25 0 1 1-80 0'></draw-path>
<draw-path d='M25 25h50v50h-50v-50z' stroke='green' stroke-width='5' speed="0.007"></draw-path>
<draw-path stroke='red' stroke-width='5' speed=".01"></draw-path>


window.customElements.define("draw-path", class extends HTMLElement {
    constructor() {
      let template = (id) => document.getElementById(id).content.cloneNode(true);
      super() // super sets and returns this scope
        .attachShadow({mode: "open"}) // sets and returns this.shadowRoot
        .append(template(this.nodeName));
      this.line = this.shadowRoot.querySelector("#line");
      this.line.setAttribute("d", this.getAttribute("d") || "m10 60c30-70 55-70 75 0s55 70 85 0");
      this.line.setAttribute("stroke", this.getAttribute("stroke") || "black");
      this.line.setAttribute("stroke-width", this.getAttribute("stroke-width") || "2");
      this.pen = this.shadowRoot.querySelector("#pen");
      this.onmouseover = (evt) => this.draw();
    }
    connectedCallback() {
      this.draw();
    }
    showpen(state = true, scale) {
      this.pen.style.display = state ? 'initial' : 'none';
    }
    draw() {
      clearInterval(this.drawing);
      this.showpen();
      this.dashoffset = 1;
      this.pathlength = this.line.getTotalLength();
      this.drawing = setInterval(() => this.update(), 50);
    }
    update() {
      this.dashoffset -= this.getAttribute("speed") || 0.02;
      let {x,y} = this.line.getPointAtLength(this.pathlength - this.dashoffset * this.pathlength);
      this.pen.setAttribute("transform", `translate(${x-2} ${y-2})`);
      this.line.style.strokeDashoffset = this.dashoffset;
      if (this.dashoffset <= 0) this.end();
    }
    end() {
      clearInterval(this.drawing);
      this.showpen(false);
      //console.log("end",this.line);
      clearTimeout(this.timeout);
      this.timeout = setTimeout(()=>this.draw(),2000);
    }
  });
<draw-path d='M25 50a25 25 0 1 1 80 0a25 25 0 1 1-80 0'></draw-path>
<draw-path d='M25 25h50v50h-50v-50z' stroke='green' stroke-width='5' speed="0.007"></draw-path>
<draw-path stroke='red' stroke-width='8' speed=".01"></draw-path>

<template id="DRAW-PATH">
  <style>
    :host {  display: inline-block }
    svg { width: 180px; height: 130px; background: beige }
  </style>
  <svg xmlns="http://www.w3.org/2000/svg">
    <path id='line' pathlength='1' stroke-dasharray='1' stroke-dashoffse='1' fill='transparent'/>
    <path id='pen' stroke='black' stroke-width='2' fill='gold' d='m12 19l7-7l3 3l-7 7l-3-3zm6-6l-2-8l-14-3l4 15l7 1l5-5zm-16-11l8 8m-1 1a2 2 0 104 0a2 2 0 10-4 0'/>
  </svg>
</template>

笔记：

请注意，路径中的M或m（移动）会创建一个新的 笔划，同时绘制，而不是按顺序绘制。

所以stroke-dash*设置是同时应用的。

这就是为什么在所有博客中您只看到使用单笔画简单路径或折线的原因。

推荐阅读