javascript - 如何修复 forloop 的动画效果
问题描述
如何在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();
}
推荐阅读
- java - 为什么这段代码没有按照 JSR133 的建议进入无限循环?
- c - 如何将 char cyrillic 数组转换为每个 char 符号的 unicode 代码数组?
- javascript - 如何让 Xterm.js 正确调整大小?
- python - 如何使用多个 css 选择器使我的代码更具可读性
- symfony4 - 错误消息编写器需要注释
- html - 如何修复悬停时自动翻转?
- queue - 为什么队列使用链表等其他数据结构?
- c++ - 从 C++ 中的 int 方法返回一个数组
- node.js - expressjs oracledb { [错误:ORA-12514:TNS:监听器当前不知道连接描述符中请求的服务] errorNum:12514,偏移量:0 }
- amazon-web-services - AWS 多个站点到站点 VPN 连接