Hacker News .hnnew | past | comments | ask | show | jobs | submitlogin

I think it's crazy how one guy's static interpolation curves (http://www.robertpenner.com/easing/) keep showing up verbatim in an ever increasing array of tweening frameworks over a decade since he first posted them.

These interpolation curves can be nice in a pinch, but like I said before, the curves the curves are static, and so you can run into problems if you want to interrupt an action with another, or layer multiple tweens together.

One particularly effective way to get natural eased motion is to use a function that outputs something like the movement of a simple damped harmonic spring. With a system like this, you specify a target position relative to the current position, the sponginess of the spring, and the speed of which it oscillates. This can give you very natural results and feels a lot closer to a real physical system than a lot of these interpolation curves (EaseInOutExp, etc).

Here's some code for a damped spring system that can work really well as an alternative to predefined tween curves in user interfaces and games: http://www.ryanjuckett.com/programming/damped-springs/

And for more non-Penner interpolation alternatives, check out: http://sol.gfxile.net/interpolation/



Nice spring stuff, I hadn't seen it written up like that before. I did my own in JS recently (also based on solving the damped spring equation as a 2nd order ode; I copied my solution out of a physics textbook): https://github.com/iamralpht/iamralpht.github.io/blob/master...

I think the main advantage of using physical models is that you can feed velocity (from a touch gesture) into them. You can't really do that with the Penner equations (you could compute duration based on the derivative at t=0, but it won't feel very nice).

I wrote up some of the advantages of using physical models for UI animations and interactions here: http://iamralpht.github.io/physics/


I agree — transitions are a really bad way to think about animations. Another approach is to think of an interpolation curve as the step response to an LTI filter. This approach lets you turn any interpolation curve into a FIR filter that can handle interrupted transitions seamlessly.


Can you elaborate on this?


Verlet has worked better for me than damped springs. Velocity is implicit in verlet, meaning you can manipulate the position of a particle directly, which allows for direct control that is automatically included in velocity.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: