Javascript 拉斐尔动画与滚动事件

有没有一种方法可以使用Raphaël-JavaScript库在用户滚动网站时开始设置对象动画，并在用户停止滚动时停止动画

我已经创建了动画，但是我找不到任何关于如何将动画与网站滚动条同步的信息

编辑：

---

上面是我的代码，我想做的是将我的动画与页面滚动同步，因此，我不想提供4000 ms in.animate（），而是希望对象在用户滚动时就进行动画制作。

您可以使用纯javascript轻松做到这一点

只需应用Raphaël启动和停止方法

更新

---

事实上，我发现了一个小错误——你滚动的越多，动画速度就越慢。我猜我是以错误的方式开始/停止动画：-/是的，我也注意到，我检查了文档，这是停止动画的正确方式，我尝试删除.repeat（“无穷大”），但结果相同。有什么想法吗？恐怕拉法尔可能不支持这种功能。我尝试了很多组合，但没有一个是正确的。这是我的游乐场--也许你可以在没有Raphaël的情况下创建相同的动画：-/我发现我们可以使用。暂停（动画）和。恢复（动画）检查一下，但恢复动画后，动画正在停止。对吧，我也尝试过，但它似乎忘记了。重复（无限）

var path6 = paper.path('M 148 140 L 176 164 L 94 189 L 148 140 Z').attr("fill","#9B5024").attr("stroke","transparent").attr("stroke-width",0);

_path3 = Raphael.transformPath('M 148 140 L 102 155 L 94 189 L 148 140 Z');
path6.animate({path: _path3}, 4000);

var timer = null;
function scrolling() {
    document.getElementById("Status").innerHTML = "scrolling..";
      if(timer !== null) {
        clearTimeout(timer);        
    }
    timer = setTimeout(function() {
        document.getElementById("Status").innerHTML = "stopped scrolling";
    }, 150);
}

window.onscroll = scrolling;

var paper = new Raphael('Animation', 100, 100);
var rect = paper.rect(20, 20, 20, 20).attr({fill: '#F00'});
var anim = Raphael.animation({transform: "r360"}, 2500).repeat(Infinity);

var timer = null;
function scrolling() {
    document.getElementById("Status").innerHTML = "scrolling..";
      if(timer !== null) {
        rect.animate(anim);      
    }
    timer = setTimeout(function() {
        rect.stop();
    }, 150);
}

window.onscroll = scrolling;