绘制 svg 虚线的动画

Posted 2023-03-06

【中文标题】绘制 svg 虚线的动画

【英文标题】：Animate the drawing of a dashed svg line

【发布时间】：2014-07-24 04:34:20

【问题描述】：

我正在尝试使用 svg 和 css 动画为带有虚线的箭头设置动画，类似于 ------->，但具有水平和垂直路径。

我尝试了几种不同的方法，动画高度和宽度，使用底部和顶部，但每种方式都有一些看起来不太好或效果不佳的东西。

我设法用 svg 绘制了一条路径，但动画实际上会删除破折号并只画一条实线。

无动画：http://jsfiddle.net/ehan4/2/

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"   viewBox="0 0 252 396" enable-background="new 0 0 252 396" xml:space="preserve">
<path stroke="#000" stroke- fill="none" d="M50.887,170.063v-53.488h55.814" stroke-dasharray="5,5" stroke-dashoffset="0.00" />

带动画：http://jsfiddle.net/ehan4/1/

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"   viewBox="0 0 252 396" enable-background="new 0 0 252 396" xml:space="preserve">
<path stroke="#000" stroke- fill="none" d="M50.887,170.063v-53.488h55.814" stroke-dasharray="5,5" stroke-dashoffset="0.00" />

var path = document.querySelector('path');
var length = path.getTotalLength();

path.style.transition = path.style.WebkitTransition = 'none';
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
path.getBoundingClientRect();

path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
path.style.strokeDashoffset = '0';

任何想法或想法将不胜感激！

Z

【问题讨论】：

你能有 2 条路径吗？一个用于剥离线，然后在其上放置另一个实体。动画会增加不透明度还是擦除顶层？

@MathiasaurusRex 啊！我认为这可行。给我 10 分钟。

@MathiasaurusRex 完全有效，非常感谢！看看：jsfiddle.net/ehan4/4

【参考方案1】：

SVG 有一个 stroke 属性。使用 CSS 将笔划类型更改为虚线，然后在 javascript 循环中更改其偏移量

【参考方案2】：

这个函数可以动画虚线路径的绘制：

function drawPath(path, options) 
    options = options || 
    var duration = options.duration || 5000
    var easing = options.easing || 'ease-in-out'
    var reverse = options.reverse || false
    var undraw = options.undraw || false
    var callback = options.callback || function () 

    var length = path.getTotalLength()
    var dashOffsetStates = [length, 0]
    if (reverse) 
        dashOffsetStates = [length, 2 * length]
    
    if (undraw) 
        dashOffsetStates.reverse()
    

    // Clear any previous transition
    path.style.transition = path.style.WebkitTransition = 'none';

    var dashArray = path.style.strokeDasharray || path.getAttribute("stroke-dasharray");

    if (dashArray != '') 
        // dashed path case
        // repeats dash pattern as many times as needed to cover path length
        var dashLength = dashArray.split(/[\s,]/).map(function (a) 
            return parseFloat(a) || 0
        ).reduce(function (a, b) 
            return a + b
        )
        var dashCount = length / dashLength + 1
        var a = new Array(Math.ceil(dashCount)).join(dashArray + " ")
        path.style.strokeDasharray = a + '0' + ' ' + length
     else 
        // non dashed path case
        path.style.strokeDasharray = length + ' ' + length;
    
    path.style.strokeDashoffset = dashOffsetStates[0];
    path.getBoundingClientRect();
    path.style.transition = path.style.WebkitTransition =
        'stroke-dashoffset ' + duration + 'ms ' + easing;
    path.style.strokeDashoffset = dashOffsetStates[1]
    setTimeout(function() 
        path.style.strokeDasharray = dashArray //set back original dash array
        callback()
    , duration)

它会根据需要多次重复破折号模式以覆盖路径长度，然后添加带有路径长度的空破折号。正如您在示例中所做的那样，它还可以为虚线偏移设置动画。

工作演示：http://jsfiddle.net/u88bm18b/

【参考方案3】：

将路径复制为纯色，使其覆盖虚线。然后，将纯色线动画化，露出下面的虚线。

http://jsfiddle.net/ehan4/4/

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"   viewBox="0 0 252 396" enable-background="new 0 0 252 396" xml:space="preserve">
    <path stroke="#000" stroke- fill="none" d="M50.887,170.063v-53.488h55.814" stroke-dasharray="5,5" stroke-dashoffset="0.00"/>
    <path id="top" stroke="#fff" stroke- fill="none" d="M50.887,170.063v-53.488h55.814"/>
</svg>

<script>
var path = document.querySelector('#top');
var length = path.getTotalLength();
path.style.transition = path.style.WebkitTransition = 'none';
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = '0';

path.getBoundingClientRect();

path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
path.style.strokeDashoffset = length;
</script>

【讨论】：

为什么是“path.getBoundingClientRect()”？

如果您在背景上使用渐变，此方法将不起作用