path动画效果

最新推荐文章于 2023-04-11 15:17:09 发布

昱米

最新推荐文章于 2023-04-11 15:17:09 发布

阅读量519

点赞数

分类专栏： d3 文章标签： html动画效果 d3 path

本文链接：https://blog.csdn.net/qq_33803790/article/details/90932106

版权

d3 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

path “ d ” 属性的值用到了D3中的线段生成器

要点：stroke-dasharray 和 stroke-dashoffset
stroke-dasharray 用来设置虚线样式，后面跟两个值用来设置每一段虚线中黑线和空白的长度。
(- - - ) <- 这是三段
stroke-dashoffset 用来设置虚线的偏移量
动画效果
stroke-dasharray 值设为线的长度
stroke-dashoffset 设为 0

动画效果其实是 stroke-dashoffset 值变换的过程
具体通过@keyframes设置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//d3js.org/d3.v3.min.js"></script>

    <style>
        .line_ {
            animation: dash 10s;
            /*-webkit-animation: dash 10s;*/

        }

       /* @-webkit-keyframes dash {
            from {
                stroke-dashoffset: 100%;
            }
            to {
                stroke-dashoffset: 0;
            }
        }*/

        @keyframes dash {
            from {
                stroke-dashoffset: 100%;
            }
            to {
                stroke-dashoffset: 0;
            }
        }
    </style>

</head>

<body>


<script>
    var svg = d3.select("body").append("svg")
        .attr("width", 1000)
        .attr("height", 1000);

    var lines1 = [[80, 80], [200, 100], [200, 200], [100, 200]];
    var lines2 = [[180, 180], [300, 200], [300, 300], [200, 300]];
    var linePath = d3.svg.line();
    svg.append("path")
        .attr("class", "line_")
        .attr("d", linePath(lines1))
        .attr("stroke", "#000000")
        .attr("fill", "transparent")
        .attr("stroke-width", "3px")
        .attr("stroke-dasharray", "100%")
        .attr("stroke-dashoffset", "0%");
    svg.append("path")
        .attr("class", "line_")
        .attr("d", linePath(lines2))
        .attr("stroke", "#000000")
        .attr("fill", "transparent")
        .attr("stroke-width", "3px")
        .attr("stroke-dasharray", "100%")
        .attr("stroke-dashoffset", "0%");
</script>
</body>

</html>

注意：我使用的是chrome浏览器，@keyframes 支持
具体什么浏览器使用哪个参见
http://www.w3school.com.cn/cssref/pr_keyframes.asp

昱米

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
path动画效果

path “ d ” 属性的值用到了D3中的线段生成器要点：stroke-dasharray 和 stroke-dashoffsetstroke-dasharray 用来设置虚线样式，后面跟两个值用来设置每一段虚线中黑线和空白的长度。(- - - ) <- 这是三段stroke-dashoffset 用来设置虚线的偏移量动画效果stroke-dashar...
复制链接

扫一扫