Javascript pts.js:加速网格单元的动画?

Javascript pts.js:加速网格单元的动画?,javascript,animation,canvas,Javascript,Animation,Canvas,我正在使用创建单元格网格,然后根据单元格到鼠标指针的距离为这些单元格着色。我的代码主要基于 Pts.quickStart(“#pt”,“#123”); // 设pts=[]; var follower=new Pt(); space.add({ 开始:(绑定)=>{ pts=Create.gridCells(space.innerbund,40,20); follower=space.center; }, // 动画:(时间,时间)=>{ follower=follower.add(空格.指针

我正在使用创建单元格网格,然后根据单元格到鼠标指针的距离为这些单元格着色。我的代码主要基于

Pts.quickStart(“#pt”,“#123”);
//
设pts=[];
var follower=new Pt();
space.add({
开始:(绑定)=>{
pts=Create.gridCells(space.innerbund,40,20);
follower=space.center;
},
//
动画:(时间,时间)=>{
follower=follower.add(空格.指针.$减法(follower).divide(20));
表格.笔划(“#123”);
//
设rects=pts.map((p)=>{
让颜色;
设mag=follower.$subtract(矩形.中心(p)).magnity();
设r=Rectangle.fromCenter(Rectangle.center(p),Rectangle.size(p));
//
如果(磁极>=100){
color=“#000”
}否则{
color=“#f00”
}
//
表单。填充(颜色)。矩形(r);
})
//
form.fillOnly(“#fff”).点(space.pointer,10,“圆”);
}
})
//
space.bindMouse().bindTouch().play()
#pt{
宽度:800px;
高度:600px;
利润率:30px自动0;
}

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

follower = follower.add(space.pointer.$subtract(follower).divide(20));
提供给
.divide()
的值控制红色区域跟随光标的速度。将其参数从
20
更改为
1
(甚至完全删除
.divide(20)
)会立即导致“following”行为


(尽管如此,如果您打算删除该行为的功能,我怀疑整条线路都可以简化。)

感谢您的关注。你能解释一下这个值为什么/如何控制速度吗?@JoSch我猜他们独立地跟踪红色中心(作为
跟随者
),并通过添加它和光标位置之间的一小部分差异来更新它。
.divide(20)
表示更新会将红色中心移动每帧当前距离的1/20。通过将
20
更改为
1
,可以在一帧内移动整个距离。