问题描述
如何在js中为整个for循环制作动画?
for (var n = 0; n < lessons.length; n++) {
var j = n % 2 + 2;
layer.add(new Konva.Circle({
name:""+lessons[n].id,x: x + (n * 90),y: y * j,sides: 6,radius: 50,fill: 'red',stroke: 'black',strokeWidth: 4,text: lessons[n].title,}));
解决方法
只需为您添加的每个圆圈添加一个动画...
for (var n = 0; n < lessons.length; n++) {
var j = n % 2 + 2;
var circle = new Konva.Circle({
name:""+lessons[n].id,x: x + (n * 90),y: y * j,sides: 6,radius: 50,fill: 'red',stroke: 'black',strokeWidth: 4,text: lessons[n].title,});
// example animation from konvajs.org
var anim = new Konva.Animation(function(frame) {
var time = frame.time,timeDiff = frame.timeDiff,frameRate = frame.frameRate;
// update stuff e.g.:
circle.x(frame);
},layer);
layer.add(circle);
anim.start();
}