时间戳

首页 > 解决方案 > p5.j​​s - 在相关时间从两点动画一条线

javascript - p5.j​​s - 在相关时间从两点动画一条线

问题描述

我正在尝试为从一个点到另一个点的线设置动画。我想设置一个动画持续时间，例如 10 分钟，使用变量来传递行程持续时间：

let p1_x = 200;
let p1_y = 200;
let p2_x = 200;
let p2_y = 300;
let run_x = p1_x;
let run_y = p1_y;


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

function draw() {
  background(220);
  noFill();
  stroke(0);
  point(p1_x, p1_y);
  point(p2_x, p2_y);
  let d = int(dist(p1_x, p1_y, p2_x, p2_y));
  stroke(0, 153, 255);
  
  if(run_x < p2_x) {
    run_x = run_x + 0.1;
  } else if(run_y < p2_y) {
    run_y = run_y + 0.1;
  }
  
  line(p1_x, p1_y, run_x, run_y);
}
<script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"></script>

标签： javascriptanimationcanvasp5.js

解决方案

可变计时器是程序持续多少秒*10。每当刺激时，变量 t 就会上升。当 t 等于计时器时，绘图函数停止使用 noLoop(); function [要重新启动它，您必须执行 loop()]。我还使线路增加了距离除以计时器，因此当计时器结束时，线路应该完美地到达终点。告诉我这是否行不通。

    let p1_x = 200;
    let p1_y = 200;
    let p2_x = 200;
    let p2_y = 300;
    let run_x = p1_x;
    let run_y = p1_y;
    let timer = 600;
    let d = int(dist(p1_x, p1_y, p2_x, p2_y));
    let t = 0;    

    function setup() {
      createCanvas(400, 400);
      frameRate(10);

    }
    
 function draw()
{
      background(220);
      noFill();
      stroke(0);
      point(p1_x, p1_y);
      point(p2_x, p2_y);
      stroke(0, 153, 255);
      
      if(run_x < p2_x) {
        run_x = run_x + 0.1;
      } else if(run_y < p2_y) {
        run_y = run_y+(d/timer);
      }
      
      line(p1_x, p1_y, run_x, run_y);
  
      if(t>=timer)
        {
          noLoop();
          console.log("Works")
        }
      t++;
    }

推荐阅读