Question

我使用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;
}

Answer 1

我发现大多数Raphael问题的解决方案就是在Raphael特定代码周围创建某种对象和数组结构来存储和管理元素。 Raphael不像jQuery，你可以很容易地找到带选择器的元素 - 它自己选择元素的功能非常有限。

如果我已经理解了问题，那么你试图选择然后移除最新的Raphael元素并完成其淡入动画（这是对的吗？），你已经尝试过使用paper.bottom，它不会给你太多控制权。我建议改为在Raphael之外创建一个结构，让你在需要时获得你需要的元素。

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

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

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

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

Raphael JS - Animate删除了元素

1 个答案: