我使用Raphael JS创建SVG 并设置其动画
想法：
步骤1
当用户每次创建新的多段线并将其添加到画布/图纸时向下滚动。正在添加的线也正在设置不透明度从0到1的动画。因此，它产生了一种错觉，即线条会随着用户的滚动而延迟。
步骤2
然后，当用户从下到上一行一行地向上滚动时，它们将被删除。
示例：http://codepen.io/anon/pen/onclB
问题：
我已经成功地迈出了第一步，但我无法迈出第二步。
我找不到一种方法来设置最后一行插入的动画，然后将其移除。到目前为止，当用户向上滚动时，我将底部元素设置为不透明度0，然后在animate函数中使用回调函数，将其删除。问题是，当用户再次向上滚动时，动画尚未完成，因此最后一个元素是当前正在设置动画的元素，而不是前一个。
我可以做的一个解决方案是跟踪元素的id，并使我自己的底部元素成为我想要设置动画的元素，无论其他元素是否已经完成/移除。
但我想知道是否有像这样更简单的解决方案
paper.remove().animate(...)//我知道没有。只是为了说明需求。
那么，是否可以对移除的项目设置动画；
我还注意到，当我使用R.bottom.remove();(R是Raphael对象)时，它会删除第一个元素，而不是最后一个！
到目前为止的代码
HTML
<div id="canvas">
</div>
<div class="container">
<h1>SVG Animation Testing</h1>
</div>
<div class="container">
<p>Long long long text</p>
</div>
JS-
var R, winW, winH, anglex, lastScrollTop;
jQuery(function($){
$window = $(window);
winW = $window.width();
winH = $window.height();
anglex = 1 + Math.floor(Math.random() * winW);
lastScrollTop = 0;
$(window).load(function() {
R = Raphael('canvas', '100%', '100%');
});
$window.scroll(function() {
var top = $(window).scrollTop();
if(top > lastScrollTop){
var polygonPoints = '0,0 ' + anglex + ',' + top + ' '+winW+',0';
var convertedPath = polygonPoints.replace(/([0-9.]+),([0-9.]+)/g, function($0, x, y) {
return 'L ' + Math.floor(x) + ',' + Math.floor(y) + ' ';
}).replace(/^L/, 'M'); // replace first L with M (moveTo)
R.path(convertedPath).attr({
'fill': 'none',
'stroke': '#662F8F',
'stroke-width': '4px',
'opacity': '0'
}).animate({opacity: 0.5}, 2000, 'bounce');
}else{
R.bottom.animate({opacity: 0}, 2000, 'bounce', function() {
this.remove();
});
}
lastScrollTop = top;
});
});
CSS
#canvas{
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
position: fixed;
z-index: -1000;
}
.container{
max-width: 960px;
width: 100%;
margin: 0 auto;
text-align: center;
}
我发现大多数像这样的拉斐尔问题的解决方案是围绕拉斐尔特定的代码创建某种对象和数组结构来存储和管理元素。Raphael不像jQuery那样可以通过选择器轻松地找到元素——它自己用于选择元素的功能非常有限。
如果我正确理解了这个问题，那么您正在尝试选择并删除最新的拉斐尔元素，该元素在动画中完成了淡入淡出(对吗？)，并且您尝试使用paper.bottom，这不会给您太多控制权。我建议在拉斐尔之外创建一个结构，让你在需要的时候获得你需要的元素。
一种简单的方法是，在淡入动画的回调函数中，将元素推送到一个数组中，然后数组将按顺序包含所有淡入的元素。然后，您总是可以通过获取数组的最后一项来获取最新完成的动画，如果需要，您可以在数组中反向工作。
你还可以有额外的控制权，例如，你可以立即将其从数组中删除，然后开始一个淡出动画，该动画会删除回调中的元素，因此它立即不再是你感兴趣的最新元素，并且不会再次被选中，但在动画完成之前不会从DOM中删除。
您可能还想在某个地方记录上一次用户操作是向上滚动还是向下滚动，并在淡入回调函数中检查这一点：如果动画完成时是向下滚动，则推到数组，而如果是向上滚，则最好立即将其淡入，然后在不进入数组的情况下将其删除，以避免时间问题。
在大多数复杂的拉斐尔项目中，我最终选择了一系列交叉引用对象、数组和拉斐尔集，这些对象、阵列和集合为我提供了各种特定于项目的访问拉斐尔元素的方法。