Raphael JS Path的'删除'动画

I've created a line animation with RaphaelJS (see jsfiddle here - http://jsfiddle.net/7n040zdu/). I'm attempting to create a animation that occurs after this one takes place that is basically an erasing of the initial animation. That is, the line animated out the same way that it is animated in - along the same path, the same duration, the same direction.

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

I have tried just animating another path on top, but that solution is not preferable. If the initial path overlaps itself, then erasing with another path would reveal that the animation is not 'erasing' but rather being overlapped.

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

I am having trouble finding something in the Raphael documentation that would achieve anything similar to this.

我在Raphael文档中找不到与此类似的东西时遇到了麻烦。

Relevant code below:

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);

1 个解决方案

#1

Based on @Ian's comment on the original question, I was able to use a single path and then animate the dashoffset of the svg, but it took some further changing in order to get that actually working correctly.

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

Initially, the SVG path's css is set with the following parameters: 'stroke-dasharray': '9999px' and 'stroke-dashoffset': '9999px'. The stroke-dashoffset is then animated from 9999px to 9999px minus the length of the path. At the end of the initial animation, the css has to be set once again, this time: 'stroke-dasharray': '999 999' and 'stroke-dashoffset': '9999px'. At this point, the stroke-dashoffset is animated once again, this time 'stroke-dashoffset': (9999-(length of path)-100)+'px'.

最初,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-(路径长度)-100)+'px'。

A jsfiddle showing this is present here: http://jsfiddle.net/tim_m/94ze4ajj/

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

*Note that in the jsfiddle, I've added more paths with varying opacity and time offsets to give the illusion of a fade at the tips of the line animation.

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

#1