Question

我用RaphaelJS创建了一个线条动画（参见jsfiddle here http://jsfiddle.net/7n040zdu/）。我正在尝试创建一个动画，这个动画发生在基本上是初始动画的擦除之后。也就是说，线条以与动画相同的方式生成动画 - 沿着相同的路径，相同的持续时间，相同的方向。

我试过在顶部设置另一条路径的动画，但该解决方案并不可取。如果初始路径与自身重叠，则用另一条路径擦除将显示动画不是“擦除”而是重叠。

我无法在Raphael documentation中找到与此类似的内容。

以下相关代码：

HTML

<body>
<div class='drawings' id="draw0"></div>
</body>

CSS

body {
    background-color: black;
}

JS

var animateLine = function(canvas, colorNumber, strokeWidth, pathString) {
    var line = canvas.path(pathString).attr({
        stroke: colorNumber
    });

    var length = line.getTotalLength();

    $('path[fill*="none"]').animate({
        'to' : 1
    }, {
        duration: 1000,
        step: function (pos, fx) {
            var offset = length * fx.pos;
            var subpath = line.getSubpath(0, offset);
            canvas.clear();
            canvas.path(subpath).attr({
                stroke: colorNumber,
                "stroke-dasharray" : "",
                "stroke-width" : strokeWidth
            });
        }
    });
}

var canvas = new Raphael('draw0', 50,50);
var drawPath1 = 'M0.767,0.915 M48.538,20.228L0.767,0.915l3.896,39.312L48.538,20.228L37.663';

animateLine(canvas, '#FFF', '1.5', drawPath1);

Answer 1

基于@ Ian对原始问题的评论，我能够使用单个路径然后为svg的dashoffset设置动画，但为了使其真正正常工作，需要进行一些更改。

最初，SVG路径的css使用以下参数设置：'stroke-dasharray': '9999px'和'stroke-dashoffset': '9999px'。然后将stroke-dashoffset从9999px动画到9999px减去路径的长度。在初始动画结束时，必须再次设置css，这次：'stroke-dasharray': '999 999'和'stroke-dashoffset': '9999px'。此时，stroke-dashoffset再次动画，这次是'stroke-dashoffset': (9999-(length of path)-100)+'px'。

这里显示的是一个jsfiddle：http://jsfiddle.net/tim_m/94ze4ajj/

*请注意，在jsfiddle中，我添加了更多具有不同不透明度和时间偏移的路径，以在线条动画的尖端给出淡入淡出的错觉。

＆＃39;删除＆＃39; Raphael JS Path的动画

HTML

CSS

JS

1 个答案: