Animations easing functions

[Mimetis]

Hi everyone !

 

Today I want to show a pre-version of a pretty cool feature incoming in the next version of BABYLON : The easing functions.

 

But before starting, just to presenting myself, I'm Sebastien, I work for Microsoft France, and like David and David, I'm a technical evangelist.

Ok, no more, let's start !

 

You can add some behaviors to your animations, using easing functions. If you want more informations about easing functions, here are some useful links :

• MSDN Easing functions documentation
• Easing functions cheat sheet

All those easing functions are implemented in BABYLON allowing you to apply custom mathematical formulas to your animations.

 

Here is a small demonstration using the 2.0 alpha version of BABYLON : http://jsfiddle.net/897cjccg/3/

 

Ok A screenshot is not so obvious to show how an easing function work

 

Here are the predefined easing functions you can use : 

• BABYLON.CircleEase()
• BABYLON.BackEase(amplitude)
• BABYLON.BounceEase(bounces, bounciness)
• BABYLON.CubicEase()
• BABYLON.ElasticEase(oscillations, springiness)
• BABYLON.ExponentialEase(exponent)
• BABYLON.PowerEase(power)
• BABYLON.QuadraticEase()
• BABYLON.QuarticEase()
• BABYLON.QuinticEase()
• BABYLON.SineEase()

You can use the EasingMode property to alter how the easing function behaves, that is, change how the animation interpolates. There are three possible values you can give for EasingMode:

 

• BABYLON.EasingFunction.EASINGMODE_EASEIN  : Interpolation follows the mathematical formula associated with the easing function.
• BABYLON.EasingFunction.EASINGMODE_EASEOUT  : Interpolation follows 100% interpolation minus the output of the formula associated with the easing function.
• BABYLON.EasingFunction.EASINGMODE_EASEINOUT  : Interpolation uses EaseIn for the first half of the animation and EaseOut for the second half.

Here is a straightforward sample to animate a torus within a CirleEase easing function :
 

//Create a Vector3 animation at 30 FPSvar animationTorus = new BABYLON.Animation("torusEasingAnimation", "position", 30,                      BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);// the torus destination positionvar nextPos = torus.position.add(new BABYLON.Vector3(-80, 0, 0));// Animation keysvar keysTorus = [];keysTorus.push({ frame: 0, value: torus.position });keysTorus.push({ frame: 120, value: nextPos });animationTorus.setKeys(keysTorus);// Creating an easing functionvar easingFunction = new BABYLON.CircleEase();// For each easing function, you can choose beetween EASEIN (default), EASEOUT, EASEINOUTeasingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);// Adding the easing function to the animationanimationTorus.setEasingFunction(easingFunction);// Adding animation to my torus animations collectiontorus.animations.push(animationTorus);//Finally, launch animations on torus, from key 0 to key 120 with loop activatedscene.beginAnimation(torus, 0, 120, true);

You can play with bezier curve algorithm too, using the BezierCurveEase(x1, y1, x2, y2) function. For purpose, here is a good reference to create your curve algorithm : http://cubic-bezier.com
 
Here is a pretty cool implementation using the bezier curve algorithm :
 
 

var bezierEase = new BABYLON.BezierCurveEase(0.32, -0.73, 0.69, 1.59);

Finally, you can extend the EasingFunction base function to create your own easing function, like this :
 

var FunnyEase = (function (_super) {    __extends(FunnyEase, _super);    function FunnyEase() {        _super.apply(this, arguments);    }    FunnyEase.prototype.easeInCore = function (gradient) {        // Here is the core method you should change to make your own Easing Function        // Gradient is the percent of value change        return Math.pow(Math.pow(gradient, 4), gradient);    };    return FunnyEase;})(BABYLON.EasingFunction);

I really hope you will enjoy this new feature, and that you will create some cool animations in your games

 

Sebastien

[Temechon]

Awesome!! It was really missing in Babylon, and I can't wait to try it

[Dad72]

Wow this has have interest.

You should do a tutorial on the wiki and an example on the playground.

[Mimetis]

Wiki is already ready, you will find the tutorial in the animation section of the wiki : https://github.com/BabylonJS/Babylon.js/wiki/07-Animation

 

The playground will be updated when the next version of BABYLON will be release

 

Sebastien

[Dad72]

Thank you Mimetis

[Wingnut]

Fantastic!  What a great piece of work, Mimetis, and welcome!