Highlighted

Easing with JS

Community Beginner ,
May 18, 2019

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

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.

Views

402

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Easing with JS

Community Beginner ,
May 18, 2019

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

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.

Views

403

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 18, 2019 0
Adobe Community Professional ,
May 18, 2019

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 18, 2019 2
Community Beginner ,
May 18, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 18, 2019 0
Adobe Community Professional ,
May 18, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 18, 2019 2
Community Beginner ,
May 18, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 18, 2019 0
kglad LATEST
Adobe Community Professional ,
May 18, 2019

Copy link to clipboard

Copied

positionX = 999;

function camerPositionF():void{

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

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 18, 2019 2
Adobe Community Professional ,
May 18, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 18, 2019 2