如何在p5.js中实现逐段绘制、循环播放的线段动画效果

你可以通过全局变量记录当前绘制进度，结合帧计数控制线段逐段出现、循环播放的效果，修改后的完整代码如下：

// 记录当前绘制到第几段线段
let currentLine = 0;
// 每段线段的显示间隔，单位为帧，默认60帧/秒，30帧就是0.5秒切换一段
const lineInterval = 30;
// 预先定义所有线段的起止坐标
const lines = [
  [150, 108, 56, 75],
  [56, 75, 121, 185]
];
// 点坐标列表
const points = [
  [150, 108],
  [56, 75],
  [121, 185]
];

function setup() {
  createCanvas(400, 400);
  textSize(8);
}

function temp(){
  strokeWeight(5);
  // 绘制所有固定点
  points.forEach(p => point(p[0], p[1]));
  strokeWeight(1);
  // 只绘制到当前进度对应的线段
  for(let i = 0; i < currentLine; i++) {
    const l = lines[i];
    line(l[0], l[1], l[2], l[3]);
  }
}

function draw() {
  clear();
  background(220);
  translate(35,60);
  temp();
  // 每到间隔帧数就更新绘制进度
  if(frameCount % lineInterval === 0) {
    currentLine++;
    // 所有线段绘制完成后重置进度，实现循环
    if(currentLine > lines.length) {
      currentLine = 0;
    }
  }
}

核心逻辑说明：

• 用currentLine变量跟踪当前需要显示的线段数量，初始为0表示不显示任何线段
• 每经过lineInterval设定的帧数，就将currentLine加1，多显示一段线段
• 当currentLine超过总线段数时，重置为0，就可以实现清屏后重新逐段绘制的循环效果
• 你可以调整lineInterval的数值来控制线段出现的速度，数值越大间隔越长，动画速度越慢

内容的提问来源于stack exchange，提问作者akldsjk