时间戳

首页 > 解决方案 > pts.js：加速网格单元的动画？

javascript - pts.js：加速网格单元的动画？

问题描述

我正在使用Pts.js创建一个单元格网格，然后根据它们与鼠标指针的距离为这些单元格着色。我的代码主要基于Pts.js 官方网站的演示。

Pts.quickStart("#pt", "#123");
//
let pts = [];
var follower = new Pt();

space.add({
  start: (bound) => {
    pts = Create.gridCells(space.innerBound, 40, 20);
    follower = space.center;
  },
  //
  animate: (time, ftime) => {
    follower = follower.add(space.pointer.$subtract(follower).divide(20));
    form.stroke("#123");
    //
    let rects = pts.map((p) => {
      let color;
      let mag = follower.$subtract(Rectangle.center(p)).magnitude();
      let r = Rectangle.fromCenter(Rectangle.center(p), Rectangle.size(p));
      //
      if (mag >= 100) {
        color = "#000"
      } else {
        color = "#f00"
      }
      //
      form.fill(color).rect(r);
    })
    //
    form.fillOnly("#fff").point(space.pointer, 10, "circle");
  }
})
//
space.bindMouse().bindTouch().play();
#pt {
  width: 800px;
  height: 600px;
  margin: 30px auto 0;
}
<script src="https://unpkg.com/pts@0.9.4/dist/pts.min.js"></script>

<div id="pt"></div>

实施工作绝对正常。但我想提高单元格的»着色«»跟随«光标的速度，即减少光标周围红色空间的动画延迟。理想情况下，我不想耽搁。

我是 Pts.js 的新手，所以我仍然在关注文档，我找不到关于如何控制动画速度的选项或解释。如果有人能指出我需要在这里做什么，那就太好了。

标签： javascriptanimationcanvas

解决方案

似乎这条线控制了红色网格区域的行为：

follower = follower.add(space.pointer.$subtract(follower).divide(20));

提供的值.divide()控制红色区域跟随光标的速度。将其参数从20to更改1（甚至.divide(20)完全删除）会导致“跟随”行为立即发生。

（不过，如果您打算删除该行为的功能，我怀疑可以简化整行。）

推荐阅读