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

javascript - Raphael object won't animate along path correctly

问题描述:

So I have a function that draws paths. I would like to animate some circles along these different paths, while the circles start out in the correct place (at the first point of the path), when I try to animate them along the path, they go haywire. What am I doing wrong?

you can see my code on jsfiddle or here:

function commerce() {

Raphael("commercebounce", function () {

var r = this;

function pathfade() {

var a = .1,

b = .4,

c = [0, 2],

d = [50, 300],

e = [150, 800],

fz = [150, 350],

g = d[0] + Math.random() * (d[1] - d[0]),

h = e[0] + Math.random() * (e[1] - e[0]),

i = fz[0] + Math.random() * (fz[1] - fz[0]),

colours = ["215,10,45", "115,115,115"],

stroke = ["", "- "];

opacity = a + Math.random() * (b - a), colour = "rgb(" + colours[Math.round(Math.random())] + ")", strokeW = c[Math.round(Math.random())];

j = r.path("M 0 " + g + " C 0 " + g + " " + (h - 100) + " " + g + " " + h + " 400 M " + h + " 400 C " + h + " 400 " + (h + 100) + " " + g + " 960 " + i).attr({stroke: colour,"stroke-dasharray": stroke[Math.round(Math.random())],"stroke-opacity": .1});

return j

}

ja = pathfade();

jb = pathfade();

jc = pathfade();

jd = pathfade();

je = pathfade();

jf = pathfade();

jg = pathfade();

jh = pathfade();

ji = pathfade();

jj = pathfade();

function bowlball(x) {

leng = x.getTotalLength(),

a = .1,

b = .4,

c = [0, 2],

opacity = a + Math.random() * (b - a),

strokeW = c[Math.round(Math.random())],

colours = ["215,10,45", "115,115,115"],

colour = "rgb(" + colours[Math.round(Math.random())] + ")";

h = r.circle(0, 0, 7, 7).attr({"stroke-width": this.strokeW,stroke: colour,"stroke-opacity": this.opacity,fill: "none","fill-opacity": 0}).onAnimation(function() {

var t01 = this.attr("transform")})

r.customAttributes.along1 = function (v) {

var point = x.getPointAtLength(v * leng);

return {

transform: "t01" + [point.x, point.y] + "r" + point.alpha

}

};

return h.attr({along1:0}), h;

}

ha = bowlball(ja);

hb = bowlball(jb);

hc = bowlball(jc);

hd = bowlball(jd);

he = bowlball(je);

hf = bowlball(jf);

hg = bowlball(jg);

hh = bowlball(jh);

hi = bowlball(ji);

hj = bowlball(jj);

ha.animate({along1:.02},5000); //animation fail

});

};

网友答案:

this is an old-ass question but I'm guessing it's because you used a lowercase "t" in your transform string, which means its a relative transformation. But doesnt getPointAtLength return absolute coordinates? If so you should use uppercase "T" to move the element to those absolute coordinates

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