[英]How do I “uniquely” repeat a function n times in javascript?
so I have some code that draws a path and a circle. 所以我有一些代码绘制了一条路径和一个圆。 the circle is animated across the path every single time the function is initiated.
每次启动该功能时,圆圈都会沿路径动画。 I simply want to create 10 paths, each with their own circle that animates across each path.
我只想创建10条路径,每条路径都有自己的圆,这些圆在每个路径上都具有动画效果。 When I simply execute the function 10 times, the paths are generated fine, however the circle all animate along the same, single path.
当我简单地执行该函数10次时,会生成很好的路径,但是圆都沿相同的单个路径进行动画处理。 what am I doing wrong here?
我在这里做错了什么? Is the best method here to create a for(i=0) loop?
这里是创建for(i = 0)循环的最佳方法吗?
You can view my code on jfiddle , or take a look at it here: 您可以在jfiddle上查看我的代码,或在这里查看它:
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();
As far as I can see a simple loop should be fine. 据我所知,一个简单的循环应该很好。 If you're interested this is the fastest way to loop in JavaScript:
如果您有兴趣,这是在JavaScript中循环的最快方法:
var i = 10; while (i--) {
//Your code..
}
var n = 5; //or however much you want
for (var i = 0; i < n; i++){
pathfade();
}
The for
loop method is the simplest option here. for
循环方法是这里最简单的选项。
You need to break the pathfade() function into multiple simple functions that do only a few task. 您需要将pathfade()函数分解为仅执行少量任务的多个简单函数。
There are two main problems. 主要有两个问题。 First, you're placing a semi-colon where there should be a comma during your variable declarations.
首先,在变量声明期间放置一个分号,其中应使用逗号。 Look at the stroke variable.
看一下stroke变量。 Second, pathfade is returning multiple values when javascript only supports one.
其次,当javascript仅支持一个值时,pathfade返回多个值。 Remember that once you return from a function the rest of the statements don't get executed.
请记住,一旦从函数返回,其余语句就不会执行。
And lastly, use a for, do-while, or while loop to repeat your function calls. 最后,使用for,do-while或while循环重复您的函数调用。
Here's the fix. 解决方法是这里。 Sorry I didn't have time to refactor.
抱歉,我没有时间重构。
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();
Demo: http://jsfiddle.net/VEdwG/6/ 演示: http : //jsfiddle.net/VEdwG/6/
Your should read "The Elements of C# Style". 您应该阅读“ C#样式的元素”。
http://www.amazon.com/The-Elements-Style-Kenneth-Baldwin/dp/0521671590/ref=cm_cr-mr-title http://www.amazon.com/The-Elements-Style-Kenneth-Baldwin/dp/0521671590/ref=cm_cr-mr-title
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.