Raphael JS - 动画移除元素

Question

我使用 Raphael JS 创建 SVG 并为其制作动画

想法：

第一步

当用户每次创建新的折线并将其添加到画布/纸张时向下滚动。添加时的线条也会从不透明度 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;
}

Answer 1

我发现大多数 Raphael 问题的解决方案是围绕特定于 Raphael 的代码创建某种对象和数组结构来存储和管理元素。 Raphael 不像 jQuery，您可以使用选择器轻松找到元素 - 它自己的选择元素的功能非常有限。

如果我对问题的理解正确，您是在尝试选择然后删除完成其淡入动画的最新 Raphael 元素（对吗？），您已经尝试过使用paper.bottom，这并没有给你太多的控制权。我建议改为在 Raphael 之外创建一个结构，它允许您在需要时获取所需的元素。

一种简单的方法是，在淡入动画的回调函数中，将元素推送到一个数组，然后该数组将按顺序包含所有淡入元素。然后，您始终可以通过获取数组的最后一项来获取最新完成的动画，如果需要，您可以在数组中反向工作。

您还拥有额外的控制权，例如您可以立即将其从数组中删除，然后开始淡出动画，该动画会删除回调中的元素 - 因此它立即不再是您感兴趣的最新元素，并且不会再次被选中，但在动画完成之前不会从 DOM 中删除。

您可能还想在某处记录上一次用户操作是向上还是向下滚动，并在这个淡入回调函数中检查这一点：如果在动画完成时它是向下滚动的，则推送到数组，而如果它向上滚动，最好立即将其淡出然后将其移除而不进入数组，以避免时间问题。

在大多数复杂的 Raphael 项目中，我最终都会选择交叉引用对象、数组和 Raphael 集，这些对象为我提供了多种特定于项目的方式来访问 Raphael 元素。