Question

我正在尝试使用虚线为箭头设置动画，类似于-------＆gt;，但使用svg和css动画时使用水平和垂直路径。

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

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

<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" width="252px" height="396px" viewBox="0 0 252 396" enable-background="new 0 0 252 396" xml:space="preserve">
<path stroke="#000" stroke-width="1.5" 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" width="252px" height="396px" viewBox="0 0 252 396" enable-background="new 0 0 252 396" xml:space="preserve">
<path stroke="#000" stroke-width="1.5" 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';

非常感谢任何想法或想法！

ž

Answer 1

此功能可以为虚线路径的绘制设置动画：

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/

Answer 2

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

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" width="252px" height="396px" viewBox="0 0 252 396" enable-background="new 0 0 252 396" xml:space="preserve">
    <path stroke="#000" stroke-width="1.5" fill="none" d="M50.887,170.063v-53.488h55.814" stroke-dasharray="5,5" stroke-dashoffset="0.00"/>
    <path id="top" stroke="#fff" stroke-width="3" 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>

Answer 3

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

为虚线svg线的绘制设置动画

3 个答案: