だから私はパスを描く関数を持っています。これらの異なるパスに沿っていくつかの円をアニメーション化したいと思いますが、円は正しい場所 (パスの最初のポイント) から始まりますが、パスに沿ってそれらをアニメーション化しようとすると、うまくいきません。私は何を間違っていますか？
私のコードはjsfiddleまたはここで見ることができます：
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
});
};