Animations don't always end on target

[akiersky]

Continuing from the post over here: https://forum.processing.org/topic/ani-animation-overrun

Having issues with animations not always ending on the targets I set. It seems to be most prevalent when when using easing and delays.

Here's some sample code:

import de.looksgood.ani.*;
import de.looksgood.ani.easing.*;

float x1, x2, x3, x4, x5;
float y1, y2, y3, y4, y5;

float target;

void setup() {
  size(500, 500);
  Ani.init(this);
  target = 0;

  y1 = 0;
  y2 = 100;
  y3 = 200;
  y4 = 300;
  y5 = 400;

  x1 = 400;
  x2 = 400;
  x3 = 400;
  x4 = 400;
  x5 = 400;
}

void draw() {
  background(255);
  fill(0);
  rect(x1, y1, 100, 100);
  rect(x2, y2, 100, 100);
  rect(x3, y3, 100, 100);
  rect(x4, y4, 100, 100);
  rect(x5, y5, 100, 100);

}

void mousePressed() {
  Ani.to(this, 1, 0.1, "x1", target, Ani.EXPO_IN_OUT);
  Ani.to(this, 1, 0.2, "x2", target, Ani.EXPO_IN_OUT);
  Ani.to(this, 1, 0.3, "x3", target, Ani.EXPO_IN_OUT);
  Ani.to(this, 1, 0.4, "x4", target, Ani.EXPO_IN_OUT);
  Ani.to(this, 1, 0.5, "x5", target, Ani.EXPO_IN_OUT);
  if(target == 0) {
    target = 400;
  } else {
    target = 0;
  }
}

I find that the center square is always a few pixels left of the other four when animating to the right side.

hopefully this helps track down the issue.
Thanks!
ak