javascript - 动画虚线 svg 线的绘制

Question

我正在尝试使用 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" 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';

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

Z

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/