正文

Getting Started with Processing 第五章的easing问题

IP云
IP云V管理员/1 阅读
09/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

分析 使用 easing

easing 的感官目的是为了 draw 的时候，画的图形不是即时 mouseX 的值，而是稍有落后一点。
从算法分析，就是让所画图形的 x 坐标 落后于 mouseX 的值，并且朝 mouseX 的方向进行运动。
程序如下：

float x;
float easing = 0.01;void setup(){
size(220,120);
}void draw(){
float targetX = mouseX;
x+=(targetX-x)*easing;
ellipse(x,40,12,12);
println(targetX+":"+x);
}

draw()的第一行中，将 mouseX 的即时的值储存在 targetX 中，然后进行下一行。
这里回顾一下这个程序的目的：是为了画笔的笔触慢于mouse,并且向 mouseX 方向移动，而且最好还有一个效果，那就是越靠近 targetX 的坐标时，点的速度越慢：

  1. 当鼠标移动到一点的时候，起初的那一点的原坐标为x。经过第二行，x的值变成了原值加上变化的值，所以是x+=,用于在上一个值的基础上增加x坐标的值。
  2. 然后 target-x 是两点之间的距离，easing 目前是移动的倍率，目前是 0.01.即相前的每帧前行的距离。
  3. 最后，通过 ellipse()函数进行输出。

整个程序有两个重要的要素：原始位置和向前移动的距离。这里向前移动的距离通过 (targetX-x)*easing 计算，下面为两种特殊情况

  1. 当x=target 的时候，这个值等于 0，不再移动
  2. 当easing=1的时候，相当于加上 targetX-x,这个时候没有延时。