我可以用 p5.js 为一个圆从一个点移动到另一个点设置动画吗答案

【问题标题】：Can I animate a circle moving from one point to another with p5.js我可以用 p5.js 为一个圆从一个点移动到另一个点设置动画吗
【发布时间】：2020-05-18 14:01:23
【问题描述】：

我的画布上有两个点。 P0 和 P1。我想在给定的时间内将一个圆圈从 P0 移动到 P1，然后重复动画。这可能与p5.js有关吗？

【问题讨论】：

p5js.org/examples/hello-p5-animation.html 这看起来很相关
有可能，你真正需要的只是一个基本的三角公式来计算p0和p1之间的距离，然后如果它到达两个点的两端，然后做一个条件语句来改变圆的方向。 ..您将根据距离计算的物理理论将当前距离与指定时间相除

标签： javascript animation p5.js

【解决方案1】：

使用p5.Vector 进行计算。

通过createVector()定义P0和P1：

P0 = createVector(50, 50);
P1 = createVector(350, 150);

通过millis()获取开始时间，并以毫秒为单位计算动画的结束时间：

startTime = millis();
endTime = startTime + 3000; // 3 seconds

在draw()中不断获取当前时间：

let currentTIme = millis();

计算经过的时间和动画时间的关系，限制它最大为1：

let scale = min(1, (currentTIme - startTime) / (endTime - startTime));

计算从P0 到P1 的向量并根据经过的时间对其进行缩放：

let V_dist = p5.Vector.sub(P1, P0).mult(scale);

计算动画的当前中心点：

let PX = p5.Vector.add(P0, V_dist);

查看示例

let P0, P1;
let startTime, endTime;

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

    P0 = createVector(50, 50);
    P1 = createVector(350, 150);

    startTime = millis();
    endTime = startTime + 3000; // 3 seconds
}

function draw() {

    let currentTIme = millis();
    let scale = min(1, (currentTIme - startTime) / (endTime - startTime));

    let V_dist = p5.Vector.sub(P1, P0).mult(scale);
    let PX = p5.Vector.add(P0, V_dist);

    background(200);
    
    noFill();
    stroke(0);
    strokeWeight(3);
    ellipse(PX.x, PX.y, 40, 40)
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"&gt;&lt;/script&gt;

【讨论】：

这很好用！我将如何添加一个启动动画的按钮？我试图编辑您的示例以包含一个，但我无法使其工作。
@ErikNorberg 按钮回调必须设置startTime = millis(); endTime = startTime + 3000;