0

https://processing.org/examples/easing.html

So I'm using this animation math for something, however if I run it on a computer that can get around 100FPS compared to one that gets 30FPS. The animation can either be a lot quicker or slower. I tried to mess around with the frame time but I'm still not sure how to do it, I'm not getting anything consistent.

  float targetX = mouseX;
  float dx = targetX - x;
  x += dx * easing;

Is the frametime the right thing to be using? Any snippets of code on how I could approach this would be greatly appreciated, thanks

Michael
  • 1
  • A good animation should, in almost all cases, be based on time, not a linear progression. That is, the animation can will run for 2 seconds, regardless of the capabilities of the system. This decouples the animation and allows it to do things like frame dropping auto magically. The difficulty then comes down to building a solution around this concept. In this case, what you need is something which can generate "ticks" at a high rate. Then you use a calculation to determine the progression point (ie frame) and calculate the change that needs to be applied – MadProgrammer Sep 09 '21 at 11:19
  • For [example](https://stackoverflow.com/questions/56300155/how-do-i-start-an-animation-move-a-circle-from-one-point-to-another-in-a-jpane/56309656#56309656), [example](https://stackoverflow.com/questions/50651974/sliding-effect-menu-with-jcomponents/50652660#50652660), [example](https://stackoverflow.com/questions/51903228/jbutton-hover-animation-in-java-swing/51904555#51904555), [example](https://stackoverflow.com/questions/23209060/how-to-animate-from-one-x-y-coordinate-to-another-java-processing/23210015#23210015) – MadProgrammer Sep 09 '21 at 11:24
  • Ok, but how is all that helping you? Well, quite a bit actually. You have a (nearly) constant update rate, which is generating ticks over a specified period of time. An "easement" is a modification of the progression over that time, so for "easy in/out", the "progression" points are closer together at the start and end of the animation, but are further apart in the middle, which all looks something like [this](https://stackoverflow.com/questions/28335787/how-can-i-implement-easing-functions-with-a-thread/28338188#28338188) – MadProgrammer Sep 09 '21 at 11:43

0 Answers0