Jump to content

Animations easing functions


Recommended Posts

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 :

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 BABYLONhttp://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 :)



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...