D3.js实现线条的流动效果(从一端移动到另一端并且变色)

参考:
SVG:理解stroke-dasharray和stroke-dashoffset属性
使用SVG + CSS实现动态霓虹灯文字效果
纯CSS实现帅气的SVG路径描边动画效果


实现的效果为:路径左移到完全看不见的地方,然后一边右移,一边从黑色变为红色
D3.js实现线条的流动效果(从一端移动到另一端并且变色)_第1张图片

DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>D3.js实现线条的流动效果(从一端移动到另一端并且变色)title>
    <script src="https://d3js.org/d3.v7.min.js">script>
  head>
<body>
    <script>
        let svg = d3.select('body')
                    .append('svg')
                    .attr('width', 600)
                    .attr('height', 700);
        // 创建一条线段
        svg.append("path")
            .attr("d","m 100,120 500,0")
            .attr("stroke-width","2")
            .attr("stroke","black");

        // 选择路径元素
        let path = svg.select("path");

        // 获取路径总长度
        let totalLength = path.node().getTotalLength();

        // 设置初始属性
        path.attr("stroke-dasharray", totalLength)
            .attr("stroke-dashoffset", totalLength);

        // 过渡动画
        path.transition()
            .duration(2000)
            .ease(d3.easeLinear)
            .attr("stroke", "red")
            .attr("stroke-dashoffset", 0);

    script>
body>
html>

首先,选择路径元素并获取其总长度。然后,设置路径的初始属性,包括颜色、宽度和样式。

在过渡动画中,使用d3.easeLinear缓动函数指定线性动画。在2秒内将路径的颜色更改为红色,并将路径的样式从总长度的值变为0,使其逐渐从头到尾显示为红色。

.attr("stroke-dasharray", totalLength)
.attr("stroke-dashoffset", totalLength);

这两个属性是用来创建 SVG 线段动画效果的。当 stroke-dasharray 属性被设置为 totalLength 时,将路径线段分割成一系列等长度的线段,每个线段的长度为 totalLength。当 stroke-dashoffset 属性被设置为 totalLength 时,路径线段会被偏移整个长度,最初看不到线段,因为其完全被隐藏在路径起点之外。

通过设置这两个属性,我们可以创建出具有动态线条效果的 SVG 路径动画。在这个例子中,路径线段的 stroke-dashoffset 属性的值被动画改变为0,这使得路径的线条渐渐地从起点到终点呈现出来,从而实现了线段动态绘制的效果。
D3.js实现线条的流动效果(从一端移动到另一端并且变色)_第2张图片

你可能感兴趣的:(javascript,css,html,svg,css3)