Jquery 拉斐尔路径动画
你能解释一下物体首先到达路径上的一个点,然后返回,然后到达另一个点吗?例如,它首先经过路径2,然后返回,然后经过路径3。 Javascript:Jquery 拉斐尔路径动画,jquery,animation,raphael,jscript,Jquery,Animation,Raphael,Jscript,你能解释一下物体首先到达路径上的一个点,然后返回,然后到达另一个点吗?例如,它首先经过路径2,然后返回,然后经过路径3。 Javascript: var obj; var path1 var path2; var canvas = Raphael("canvas", 620, 420); window.onload = function() { obj = canvas.circle(100, 200, 10); path1 = canv
var obj;
var path1
var path2;
var canvas = Raphael("canvas", 620, 420);
window.onload = function() {
obj = canvas.circle(100, 200, 10);
path1 = canvas.path("M100 a200L200 200");
//option 1 way 1
path2 = canvas.path("M200 200L400 100");
//option 2 way 2
path3 = canvas.path("M200 200L200 100");
//option 3 way 3
path3 = canvas.path("M200 200L300 300");
window.setInterval("method_animasi()", 10);
};
var counter = 0;
var position;
function method_animasi(){
position = path1.getPointAtLength(counter);
if ( counter >= path1.getTotalLength() )
{
//program make random next way
position = path2.getPointAtLength(counter);
}
obj.attr({cx: position.x, cy: position.y});
counter++;
};
jsFiddle:
这是我使用的代码 就是这样:对象向前,然后向后,然后选择另一个随机方向,然后再向前
var obj;
var paths;
var interval;
var canvas = Raphael("canvas", 620, 420);
window.onload = function()
{
obj = canvas.circle(100, 200, 10);
paths = [
canvas.path("M200 200L100 200"),
canvas.path("M200 200L400 100"),
canvas.path("M200 200L200 100"),
canvas.path("M200 200L300 300")];
interval = window.setInterval("method_animasi()", 10);
};
var counter = 0;
var position;
var currentPath = 0;
var dirForward = true;
function method_animasi()
{
if (counter >= paths[currentPath].getTotalLength() && dirForward)
{
dirForward = false;
}
else if (counter == 0 && !dirForward)
{
var newPath = currentPath;
while (newPath == currentPath)
{
newPath = Math.floor(Math.random() * paths.length);
}
currentPath = newPath;
dirForward = true;
}
else
{
position = paths[currentPath].getPointAtLength(counter);
obj.attr({cx: position.x, cy: position.y});
}
if (dirForward)
{
counter++;
}
else
{
counter--;
}
};