Javascript 在rapheljs中，将带尾部的指针移到曲线上，

我将创建一条曲线，在该曲线上，白色指针缓慢移动，该指针具有从不透明度1到0的长方体长尾。是一把没有设置指针动画的小提琴。我试图移动那些指针尾框，但它们正在失去它们的距离。这是我为动画所做的另一步。我怎样才能在不失去像first fiddle link那个样的指针创意的情况下制作动画呢

这是我所做的动画代码

    var paper = Raphael(0,0, 1300,700);
var p=paper.path('M27,443Q159,708,342,370,500,60,640,370,800,700,940,445')
.attr({
    stroke:'#000',
    'stroke-width':10,
});
 Len = p.getTotalLength();
 paper.customAttributes.Along = function (v) {
            var Point = Curve.getPointAtLength(v * Len);

            return {
                transform: "t" + [Point.x, Point.y] + "r" + Point.alpha
            };
        };

var arr=[],i
for(i=0;i<500;i+=12){
    arr.push(
        paper.path(p.getSubpath(i,i+10)).attr({
            stroke:'#FFF',
            'stroke-width':10,
            opacity:(i/800),
            along:0
        }))
}
var x=0;

function move(){
    var tmp;
    for(var d=arr.length-1;d>0;d--){
        if(d==(arr.length-1)){
            tmp=arr[arr.length-1].attr('path').toString();
            arr[arr.length-1].attr({path:p.getSubpath(x,x+5)});
        }
        else if(d==0){
            arr[i]=tmp;
        }            
        else{
            var t=arr[d].attr('path').toString();
            arr[d].attr({
                path:tmp
            });
            tmp=t;
        }
    }

    x++;
    if(x>1200)return;
    setTimeout(move,1)
}


move()