Mimetis Posted December 10, 2014 Share Posted December 10, 2014 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 documentationEasing functions cheat sheetAll 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 Dad72, Wingnut and GameMonetize 3 Quote Link to comment Share on other sites More sharing options...
Temechon Posted December 10, 2014 Share Posted December 10, 2014 Awesome!! It was really missing in Babylon, and I can't wait to try it Quote Link to comment Share on other sites More sharing options...
Dad72 Posted December 10, 2014 Share Posted December 10, 2014 Wow this has have interest.You should do a tutorial on the wiki and an example on the playground. Quote Link to comment Share on other sites More sharing options...
Mimetis Posted December 10, 2014 Author Share Posted December 10, 2014 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 GameMonetize 1 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted December 10, 2014 Share Posted December 10, 2014 Thank you Mimetis Quote Link to comment Share on other sites More sharing options...
Wingnut Posted December 10, 2014 Share Posted December 10, 2014 Fantastic! What a great piece of work, Mimetis, and welcome! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.