时间戳

首页 > 解决方案 > p5.j​​s 鼠标压线动画

javascript - p5.j​​s 鼠标压线动画

问题描述

在 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>

标签： javascriptp5.js

解决方案

您正在使用阻塞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之类的东西为您进行插值。（这是一个很好的练习，尽管首先手动掌握递增值/插值/补间）

推荐阅读