p5.js mousePressed线路动画

Question

在p5.js中，我试图创建一个动画，当鼠标按下时，线条的底点(每帧5px)平滑地移动到画布的左下角。我可以使用lines.align让它们达到需要的程度，但它们会立即移动到那里，而不是动画。

​

    let lines = []

    function setup() {
      createCanvas(600, 400);
      for(let i = 0; i < 150; i++) {
          lines[i] = new Line(random(600), 0, random(600), 400, random(149,212), random(89, 146), 1);
        }
    }

    function draw() {
      background(32, 44, 57);
      for(let i = 0; i < lines.length; i++){
        lines[i].show();
      }
    }

    function mousePressed() {
      for(let i = 0; i < lines.length; i++){
        lines[i].align();
      }
    }

    class Line {
      constructor(xStart, yStart, xFinish, yFinish, g, b, w) {
        this.xStart = xStart;
        this.yStart = yStart;
        this.xFinish = xFinish;
        this.yFinish = yFinish;
        this.g = g;
        this.b = b;
        this.w = w;
      }

      show() {
        stroke(242, this.g, this.b);
        strokeWeight(this.w);
        line(this.xStart, this.yStart, this.xFinish, this.yFinish);
      }

      align() {
        while (this.xFinish > 0) {
          this.xFinish = this.xFinish - 5;
        }
      }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

​

Answer 1

您正在使用一个阻塞的while循环，这就是为什么您在视觉上可以看到从行的开始位置到结束位置的跳转。

一种选择是使用条件并递增draw()中的值

​

let lines = []

    function setup() {
      createCanvas(600, 400);
      for(let i = 0; i < 150; i++) {
          lines[i] = new Line(random(600), 0, random(600), 400, random(149,212), random(89, 146), 1);
        }
    }

    function draw() {
      background(32, 44, 57);
      for(let i = 0; i < lines.length; i++){
        lines[i].align();
        lines[i].show();
      }
    }

    class Line {
      constructor(xStart, yStart, xFinish, yFinish, g, b, w) {
        this.xStart = xStart;
        this.yStart = yStart;
        this.xFinish = xFinish;
        this.yFinish = yFinish;
        this.g = g;
        this.b = b;
        this.w = w;
      }

      show() {
        stroke(242, this.g, this.b);
        strokeWeight(this.w);
        line(this.xStart, this.yStart, this.xFinish, this.yFinish);
      }

      align() {
        if (this.xFinish > 0) {
          this.xFinish = this.xFinish - 5;
        }
      }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>

​

您可能还希望检查开始位置和结束位置之间的插值的lerp()。

此外，如果你需要更多的时间控制/缓动/等等，你可以使用像TweenLite这样的东西来为你做插值。(不过，这是一个很好的练习，首先手动获取增量值/插值/补间的挂起)