当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Move pointer with tail over curve in rapheljs,

问题描述:

I am going to create a curve on which a white colored pointer moves slowly, That pointer has long tail of boxes from opacity 1 to 0. Here is a fiddle without animating of pointer. I am trying to move those boxes of pointer tail but they are loosing their distances. Here is another step what I did for animation n what I am getting. How can I animate without loosing originality of the pointers like in first fiddle link?

Here is the animation code What I did

 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()

分享给朋友:
您可能感兴趣的文章:
随机阅读: