Easing with JS

[vatza_a]

Hello,

I need something simple, hope someone got a clue how to do it:

for example the code is placed in specific frame in HTML5 canvas project:    this.Object.x = this.Object.x + 200

how can I make the change of Object.x to happen with easing.

Thanks!

[kglad]

https://joshondesign.com/2013/03/01/improvedEasingEquations

[vatza_a]

Thanks a lot - it looks like it is what I need but I will need a new diploma and 7 years to understand it. If you can help me out a bit

[kglad · Accepted solution]

the easiest to use is

speed = .5;  // closer to zero, the slower the ease.  closer to 1, faster the ease.

this.Object.x = (1-speed)*this.Object.x+speed*endX;  // endX for you might be 200.

[vatza_a]

Thanks a lot! Have a wonderfull day mate! By any chance if you have any idea about camera control ease will be nice - here is what I got:

positionX = 999;

cameraObj.setPosition(positionX, 0, 0)

I need the ease for here thou

[kglad]

positionX = 999;

function camerPositionF():void{

cameraObj.setPosition((1-speed)*camerObj.getPosition().x+speed*positionX, 0, 0);

}

[ClayUUID]

Just use the built-in tween library.

cjs.Tween.get(this.Object).to({x: this.Object.x + 200}, 1000, cjs.Ease.cubicOut);

https://www.createjs.com/docs/tweenjs/modules/TweenJS.html

https://www.createjs.com/docs/tweenjs/classes/Ease.html