拉斐尔JS路径的“‘Erase”动画
我已经用RaphaelJS创建了一个行动画(参见这里的jsfiddle - http://jsfiddle.net/7n040zdu/)。我正在尝试创建一个动画，在这个动画发生之后，基本上是删除了最初的动画。也就是说，这条线的动画方式和它被动画的方式一样-沿着相同的路径，相同的持续时间，相同的方向。
我试过在上面画另一条路，但这个解决方案并不可取。如果初始路径与自身重叠，则与另一条路径擦除将显示动画不是“擦除”而是重叠。
我很难在Raphael文件中找到一些类似于此的东西。
有关守则如下：
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
Stack Overflow用户
发布于 2014-09-24 19:12:38
基于@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'。
这里有一个显示这一点的小提琴：m/94ze4ajj/
*请注意，在“小提琴”中，我添加了更多具有不同不透明度和时间偏移的路径，以使线条动画的尖端出现淡出的错觉。
https://stackoverflow.com/questions/25999188
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号