Search the Community

HI guys: am trying to use customized easing function but not seeing any difference whether it has been used or not. and the CircleEase() function does not see any change any behavior. Thanks in advance. <canvas id="RenderTarget"></canvas> <script type="text/javascript"> var Canvas = document.getElementById("RenderTarget"); var Engine = new BABYLON.Engine(Canvas); var Scene = CreateScene(); Engine.runRenderLoop(function () { Scene.render(); }); window.addEventListener("resize", function () { Engine.resize(); }); function CreateScene() { var scene = new BABYLON.Scene(Engine); scene.clearColor = new BABYLON.Color3(125 / 255.0, 50 / 255.0, 0); var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene); var arc = new BABYLON.ArcRotateCamera("arc", 3 * Math.PI / 2, Math.PI / 8, 40, BABYLON.Vector3.Zero(), scene); arc.attachControl(Canvas, true); var mGreen = new BABYLON.StandardMaterial("green", scene); mGreen.diffuseColor = BABYLON.Color3.Green(); mGreen.wireframe = true; var mRed = new BABYLON.StandardMaterial("red", scene); mRed.diffuseColor = BABYLON.Color3.Red(); var Ground = BABYLON.Mesh.CreateTiledGround("Ground", -20, -20, 20, 20, { h: 8, w: 8 }, { h: 1, w: 1 }, scene); Ground.material = mGreen; var box = BABYLON.Mesh.CreateBox("box", 5, scene); box.material = mRed; var animationX = new BABYLON.Animation("animx", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); var animationZ = new BABYLON.Animation("animz", "position.z", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); var keysX = [{ frame: 0, value: -30 }, { frame: 100, value: 30 }, { frame: 200, value: -30 }]; var keysY = [{ frame: 0, value: -30 }, { frame: 100, value: 30 }, { frame: 200, value: -30 }]; animationX.setKeys(keysX); animationZ.setKeys(keysY); var easingFunctionX = new BABYLON.CircleEase(); 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 box.material = mGreen; return Math.pow(Math.pow(gradient, 4), gradient)*1000; }; return FunnyEase; })(BABYLON.EasingFunction).EASINGMODE_EASEINOUT; easingFunctionX.setEasingMode(FunnyEase); animationX.setEasingFunction(easingFunctionX); box.animations.push(animationX); box.animations.push(animationZ); var animatable = scene.beginAnimation(box, 0, 200, true); return scene; } </script>