Spring Animation Curve Easing

A drop-in replacement easing curve for transition.to animations, based on a damped spring.

It is similar to easeInOut, but provides a much more natural feel. This is because it quickly animates into places (95% complete at 50% of the time) and then slowly settles into position, providing a smooth animation that also minimizes the amount of time content is unintelligible to the user (one of the biggest drawbacks to animations).

Example animation curve

Usage

local SpringEasing = require "SpringEasing"

local objectTransition = SpringEasing.transition(myObject, {y=200, delta=true})

The module is mostly intended for demoing - I recommend just grabbing the lines in the -- EASING block and dropping it in where it makes sense for you.

transition.to:
Simply replace any desired easing.* calls with the springEase function.

Composer:

 composer.effectList.fade.to.transition = springEase
 composer.effectList.fade.from.transition = springEase

Where "fade" is the effect you pass.

System animations

For those familiar with Cocoa Touch, It mimics the effects of the extremely useful UIView animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion: when called with standard damping and initial velocity values of 1.0 and 0.0 respectively (i.e. no bouncing effect).

As a result, you can use this to match the animations of iOS 7+, while also fitting in well with Material Design.

Tweaking

• inflectX and inflectY are the point where the curve switches from easing in to easing out (the standard easeInOut curve would have values of 0.5, 0.5, for example).
• Increasing decay causes the curve to approach 100% faster