“我该怎么做?”;独特的;在javascript中重复函数n次?
我有一些代码可以画一条路径和一个圆。每次启动该功能时,都会在路径上设置圆的动画。我只想创建10条路径,每条路径都有自己的圆圈,可以在每条路径上设置动画。当我简单地执行该函数10次时,路径生成得很好,但是圆都沿着相同的单个路径进行动画。我做错了什么?这里创建for(i=0)循环的最佳方法是什么 您可以在上查看我的代码,或在此处查看:“我该怎么做?”;独特的;在javascript中重复函数n次?,javascript,jquery,function,raphael,repeat,Javascript,Jquery,Function,Raphael,Repeat,我有一些代码可以画一条路径和一个圆。每次启动该功能时,都会在路径上设置圆的动画。我只想创建10条路径,每条路径都有自己的圆圈,可以在每条路径上设置动画。当我简单地执行该函数10次时,路径生成得很好,但是圆都沿着相同的单个路径进行动画。我做错了什么?这里创建for(i=0)循环的最佳方法是什么 您可以在上查看我的代码,或在此处查看: function commerce() { Raphael("commercebounce", function () { var r = t
function commerce() {
Raphael("commercebounce", function () {
var r = this;
function pathfade() {
var pa = .1,
pb = .4,
pc = [0, 2],
pd = [50, 300],
pe = [150, 800],
pf = [150, 350],
pg = pd[0] + Math.random() * (pd[1] - pd[0]),
ph = pe[0] + Math.random() * (pe[1] - pe[0]),
pi = pf[0] + Math.random() * (pf[1] - pf[0]),
bd = .1,
be = .9,
pathspot = bd + Math.random() * (be - bd),
colours = ["215,10,45", "115,115,115"],
stroke = ["", "- "];
opacity = pa + Math.random() * (pb - pa), colour = "rgb(" + colours[Math.round(Math.random())] + ")", strokeW = pc[Math.round(Math.random())];
pj = r.path("M 0 " + pg + " C 0 " + pg + " " + (ph - 100) + " " + pg + " " + ph + " 400 M " + ph + " 400 C " + ph + " 400 " + (ph + 100) + " " + pg + " 960 " + pi).attr({stroke: colour,"stroke-dasharray": stroke[Math.round(Math.random())],"opacity": 0});
bh = 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 t = this.attr("transform")})
leng = pj.getTotalLength();
r.customAttributes.along1 = function (v) {
var point = pj.getPointAtLength(v * leng);
return {
transform: "t" + [point.x, point.y] + "r" + point.alpha
}
};
return bh.attr({along1:0}), bh.animate({along1:pathspot},300), pj.animate({opacity:opacity},300), pj, bh
}
pathfade();//how do i repeat this function n times?
});
}
commerce();
var n=5//或者你想要多少
对于(变量i=0;i
for
循环方法是这里最简单的选择。var n=5//或者你想要多少
对于(变量i=0;i
for
循环方法是这里最简单的选择。据我所知,一个简单的循环应该可以。如果您感兴趣,这是在JavaScript中循环的最快方法:
var i = 10; while (i--) {
//Your code..
}
就我所知,一个简单的循环应该可以。如果您感兴趣,这是在JavaScript中循环的最快方法:
var i = 10; while (i--) {
//Your code..
}
您需要将pathfade()函数分解为多个只执行少量任务的简单函数 主要有两个问题。 首先,在变量声明过程中,在应该有逗号的位置放置分号。看看笔划变量。 其次,当javascript只支持一个值时,pathfade返回多个值。记住,一旦从函数返回,其余语句就不会执行 最后,使用for、do while或while循环重复函数调用 这是解决办法。对不起,我没有时间重构
function commerce() {
Raphael("commercebounce", function () {
var r = this;
function pathfade() {
var pa = 0.5,
pb = 0.9,
pc = [0, 2],
pd = [50, 300],
pe = [150, 800],
pf = [150, 350],
pg = pd[0] + Math.random() * (pd[1] - pd[0]),
ph = pe[0] + Math.random() * (pe[1] - pe[0]),
pi = pf[0] + Math.random() * (pf[1] - pf[0]),
bd = 0.1,
be = 0.9,
pathspot = bd + Math.random() * (be - bd),
colours = ["215,10,45", "115,115,115"],
stroke = ["", "- "],
opacity = pa + Math.random() * (pb - pa),
colour = "rgb(" + colours[Math.round(Math.random())] + ")",
strokeW = pc[Math.round(Math.random())],
pj = r.path("M 0 " + pg + " C 0 " + pg + " " + (ph - 100) + " " + pg + " " + ph + " 400 M " + ph + " 400 C " + ph + " 400 " + (ph + 100) + " " + pg + " 960 " + pi).attr({
stroke : colour,
"stroke-dasharray" : stroke[Math.round(Math.random())],
"opacity" : 0
}),
bh = 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 t = this.attr("transform")
}),
leng = pj.getTotalLength();
r.customAttributes.along1 = function (v) {
var point = pj.getPointAtLength(v * leng);
return {
transform : "t" + [point.x, point.y] + "r" + point.alpha
}
};
bh.attr({
along1 : 0
});
bh.animate({
along1 : pathspot
}, 300);
pj.animate({
opacity : opacity
}, 300);
}
var i = 10;
while( i-- ){
pathfade();
}
});
}
commerce();
演示:
你应该读“C#风格的元素”
您需要将pathfade()函数分解为多个简单函数,这些函数只执行少数任务 主要有两个问题。 首先,在变量声明过程中,在应该有逗号的位置放置分号。看看笔划变量。 其次,当javascript只支持一个值时,pathfade返回多个值。记住,一旦从函数返回,其余语句就不会执行 最后,使用for、do while或while循环重复函数调用 这是解决办法。对不起,我没有时间重构
function commerce() {
Raphael("commercebounce", function () {
var r = this;
function pathfade() {
var pa = 0.5,
pb = 0.9,
pc = [0, 2],
pd = [50, 300],
pe = [150, 800],
pf = [150, 350],
pg = pd[0] + Math.random() * (pd[1] - pd[0]),
ph = pe[0] + Math.random() * (pe[1] - pe[0]),
pi = pf[0] + Math.random() * (pf[1] - pf[0]),
bd = 0.1,
be = 0.9,
pathspot = bd + Math.random() * (be - bd),
colours = ["215,10,45", "115,115,115"],
stroke = ["", "- "],
opacity = pa + Math.random() * (pb - pa),
colour = "rgb(" + colours[Math.round(Math.random())] + ")",
strokeW = pc[Math.round(Math.random())],
pj = r.path("M 0 " + pg + " C 0 " + pg + " " + (ph - 100) + " " + pg + " " + ph + " 400 M " + ph + " 400 C " + ph + " 400 " + (ph + 100) + " " + pg + " 960 " + pi).attr({
stroke : colour,
"stroke-dasharray" : stroke[Math.round(Math.random())],
"opacity" : 0
}),
bh = 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 t = this.attr("transform")
}),
leng = pj.getTotalLength();
r.customAttributes.along1 = function (v) {
var point = pj.getPointAtLength(v * leng);
return {
transform : "t" + [point.x, point.y] + "r" + point.alpha
}
};
bh.attr({
along1 : 0
});
bh.animate({
along1 : pathspot
}, 300);
pj.animate({
opacity : opacity
}, 300);
}
var i = 10;
while( i-- ){
pathfade();
}
});
}
commerce();
演示:
你应该读“C#风格的元素”
谢谢你的回答,但当我使用它时,圆圈会在同一条路径上设置动画,而不是在绘制的每条路径上设置动画。请参见此处:[link]感谢您的回答,但当我使用该选项时,圆圈会在同一路径上设置动画,而不是在绘制的每条路径上设置动画。请参见此处:[link]感谢您的帮助,但我还是遇到了同样的问题,即所有圆都沿着同一路径设置动画,而不是每个单独的路径。感谢您的帮助,但我再次遇到同样的问题,即所有圆都沿着同一路径设置动画,而不是每个单独的路径。您需要创建“路径”你说的是pathFade函数的一个参数。然后,您所要做的就是循环使用不同的路径调用pathFade的次数。我不确定path的值是多少,但它可能是pc、pd、pe、pf变量。此外,您需要将pathFade分解为多个函数。你把太多的东西塞进了一个函数,这使得调试变得很困难。你能帮我吗?我已经为这个问题绞尽脑汁好几个小时了,但它仍然没有得到解决。你需要使你所说的“路径”成为函数pathFade的一个参数。然后,您所要做的就是循环使用不同的路径调用pathFade的次数。我不确定path的值是多少,但它可能是pc、pd、pe、pf变量。此外,您需要将pathFade分解为多个函数。你把太多的东西塞进了一个函数,这使得调试变得很困难。你能帮我吗?我已经为这个问题绞尽脑汁好几个小时了,但它仍然没有解决