如何使用 Vivus js 沿 SVG 路徑為形狀或圖像文件設置動畫？

Question

我正在使用vivusjs庫為 SVG 設置動畫，我想沿動畫 SVG 設置圖像文件或形狀的動畫。 如下所示：

白線是動畫 SVG 路徑，綠筆是我的圖像文件。 我在Vivusjs庫中需要它。

Answer 1

無需庫，您可以使用原生 JavaScript 完成所有操作

創建您自己的 Web 組件<draw-path> （所有現代瀏覽器都支持）

使用 JavaScript 制作所有動畫。 關鍵是將pathLength設置為1並使用getPointAtLength到position 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 ，同時繪制，而不是按順序繪制。

所以stroke-dash*設置同時應用。

這就是為什么在所有博客中您只看到使用單筆畫簡單路徑或折線的原因。