我构建了这个简单的交互式场景。现在一切似乎都运行良好,除了开始for
循环时如下所示。我该怎么做才能固定剧本?
此处为完整代码http://codepen.io/Angussimons/pen/oZmNer
提前致谢
for (let i = 0; i < manNumber; i++) {
// Definisco quale strada
if (i < (manNumber * leftStreet)) {
street[i] = document.getElementById('path-2');
} else {
street[i] = document.getElementById('path-1');
}
// genero una velocità per ognuno
_speed[i] = Math.floor((Math.random() * 400) + 1);
_speed[i] = (_speed[i]/1000);
let shiftTop = -1.5;
// genero una posizione su ognuno
let manPosition = shiftTop + Math.floor((Math.random() * 1000) - 500)/1000;
// vario la durata dei gesti
var _duration = Math.floor((Math.random() * 1000) + 500);
mansHead.push( new mojs.Shape({
parent: '.omini',
className: 'omino man-head-'+i,
shape: 'circle',
radius: 8,
fill: manColor,
top: manPosition+'%',
left: 0,
x: {0 : 5},
y: 10,
easing: 'linear.none',
duration: _duration,
}).then({
x: {5 : 0},
}));
mansBody.push(new mojs.Shape({
parent: '.man-head-'+i,
className: 'man-body-'+i,
shape: 'line',
fill: 'none',
stroke: manColor,
radius: 10,
strokeWidth: 13,
strokeLinecap: 'round',
angle: {85 : 95},
x: {5 : -2},
y: 30,
easing: 'linear.none',
duration: _duration,
}).then({
angle: {95 : 85},
x: {[-2] : 5},
y: 30,
}));
mansArmL.push(new mojs.Shape({
parent: '.man-body-'+i,
className: 'man-arm-'+i,
shape: 'line',
fill: 'none',
stroke: manColor,
radius: 10,
strokeWidth: 6,
strokeLinecap: 'round',
angle: {45 : -45},
x: -5,
y: {8 : -8},
duration: _duration,
}).then({
angle: {[-45] : 45},
y: {[-8] : 8},
}));
mansArmR.push(new mojs.Shape({
parent: '.man-body-'+i,
className: 'man-arm-'+i,
shape: 'line',
fill: 'none',
stroke: manColor,
radius: 10,
strokeWidth: 6,
strokeLinecap: 'round',
angle: {[-45] : 45},
x: -5,
y: {[-8] : 8},
duration: _duration,
}).then({
angle: {45 : -45},
y: {8 : -8},
}));
mansLegL.push(new mojs.Shape({
parent: '.man-body-'+i,
className: 'man-leg-'+i,
shape: 'line',
fill: 'none',
stroke: manColor,
radius: 12,
strokeWidth: 7,
strokeLinecap: 'round',
angle: {20 : -20},
x: 22,
y: {8 : -8},
duration: _duration,
}).then({
angle: {[-20] : 20},
x: 22,
y: {[-8] : 8},
}));
mansLegR.push(new mojs.Shape({
parent: '.man-body-'+i,
className: 'man-leg-'+i,
shape: 'line',
fill: 'none',
stroke: manColor,
radius: 12,
strokeWidth: 7,
strokeLinecap: 'round',
angle: {[-20] : 20},
x: 22,
y: {[-8] : 8},
duration: _duration,
}).then({
angle: {20 : -20},
x: 22,
y: {8 : -8},
}));
}