# Various ease in / ease out through functions

0 favourites
• 16 posts
From the Asset Store
Human/Character Base Pixel Art Sprites in various poses (nearly 100 files)
• I saw this link:

Easing Equations

or

Robert Penner Easing Equations

and was trying to get the quadratic ease out to work but couldn't figure out a certain section of code marked in bold :

// quadratic easing out - decelerating to zero velocity

Math.easeOutQuad = function (t, b, c, d) {

return -c *(t/=d)*(t-2) + b;

};

How do I translate 't/=d' to C2? I'm basically using trying to move a ball across the screen that eases out to zero velocity.

 I changed the title from 'Quadratic Easing' to 'Various ease in / ease out through functions'. While I was looking for a single form of ease out, the mighty Yann returned many types of ease ins/outs via functions with an excellent capx example file.

• t /= d means t = t / d. basically a shortcut for 'set t to t / d'.

It looks like you copied the function over wrong - the t /= d comes in a separate line on the linked website. I don't see why you put it into the algorithm.

• Check out easytween plugin too, has lots of easing functions in easy to use form!

• ## Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.

Construct 3 users don't see these ads
• I copied the info from the second link which shows it as being part of the code.

Strange that it's separate in the first link.

• Check out easytween plugin too, has lots of easing functions in easy to use form!

Was trying to avoid using a plugin.

• A more 'traditional' way to do ease out is to use this formula:

set x to lerp(self.x,destinationx,dt * factor)

same for y.

• Thanks sqiddster

I was hoping to create a function sheet collection of ease ins and outs based on Robert Penner's codes and to mimmic the sample screen on the first link.

• demo

capx

(Though it wouldn't be hard to make a plugin for that)

• Holy smokes Yann that's beautiful!

• Just rewrote the thing as in the first link o.o

• I'm all smiles <img src="smileys/smiley4.gif" border="0" align="middle" /> <img src="smileys/smiley4.gif" border="0" align="middle" /> <img src="smileys/smiley36.gif" border="0" align="middle" />

This is brilliant! I love the simplicity of your code. Mine looks like a garbage dump compared to yours <img src="smileys/smiley36.gif" border="0" align="middle" />

Tr?s excellente!

• Yann would it be too much to implement these last three easings: Elastic, Back and Bounce to your awesome interpolation.capx?

I made an attempt but was unsuccessful at it.

http://www.robertpenner.com/easing/penner_easing_as1.txt

• Darn they don't have the same signature as the others... It might break the cleanliness of my capx /o/

I'll try someday, ring me again in a few days if I didn't pop a new capx.

• I'll look for code that comes closer to the the one you based it on.

• Yann, found this for bounce, elastic & back. May be a little clearer than the first.

bounce, back & elastic

It starts at line 194.

Also this link

same?

as it looks a bit easier to read. Nonetheless for cross referencing.

It looks a little more involved. Taking a second look, I'm not sure if it could be done since the bounce ease out has multiple 'else's. Am I correct that C2 can only use a single else per condition?

For those who are curious about easing here's another visual example of the various types.

• 16 posts
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)