One Easing Curve to Rule Them All

Modern UI frameworks (iOS’s spring animations, Facebook’s Pop, Material Design’s Authentic Motion, etc) follow animation principles that go beyond the standard mathematical examples of easing curves to create lively, fully reversible, highly legible animations.

 

While implementations differ, the results are similar: smoothly bring the animation up to high speed, and complete the majority of the animation by 50% of its duration. So, I’ve made an alternative transition effect for Corona, which generates an easing curve like this:

SpringCurve.png

Using it is as simple as replacing your easing.* calls with the new function. A few key parameters are exposed to make it easy to customize as well. Example transition:

morph.gif

 

I’ve replaced essentially all of the transitions in my apps with this - it makes for a great default (though especially for games there’s plenty of reason to use other curves in specific instances). Using a custom easing curve like this allows for native-feeling animations. For example, you might want to slide an element up alongside the iOS keyboard.

 

Check it out on the Code Exchange

Thanks Kyle!

Was just looking for the Spring animation :slight_smile:

Cool!

Very nice.  You rock!

Thanks Kyle!

Was just looking for the Spring animation :slight_smile:

Cool!

Very nice.  You rock!