Easing list

[dotnetCarpenter]

I have looked everywhere on Extjs.com for a list of easing effects but haven't found anything. So I googled for YUI Easing and found this list:
easeNone Uniform speed between points.
easeIn Begins slowly and accelerates towards end. (quadratic)
easeOut Begins quickly and decelerates towards end. (quadratic)
easeBoth Begins slowly and decelerates towards end. (quadratic)
easeInStrong Begins slowly and accelerates towards end. (quartic)
easeOutStrong Begins quickly and decelerates towards end. (quartic)
easeBothStrong Begins slowly and decelerates towards end. (quartic)
elasticIn Snap in elastic effect.
elasticOut Snap out elastic effect.
elasticBoth Snap both elastic effect.
backIn Backtracks slightly, then reverses direction and moves to end.
backOut Overshoots end, then reverses and comes back to end.
backBoth Backtracks slightly, then reverses direction, overshoots end, then reverses and comes back to end.
bounceIn Bounce off of start.
bounceOut Bounces off end.
bounceBoth Bounces off start and end.

I think that's what EXT use. Can someone put it in the docs, please?
Cheers, Jon.

The list is from: http://developer.yahoo.com/yui/docs/Easing.js.html

[JeffHowden]

I have looked everywhere on Extjs.com for a list of easing effects but haven't found anything. [...]

I think that's what EXT use. Can someone put it in the docs, please?

It's not quite as easy as you suggest actually. The easing effects available depend on the core library you're using with Ext.

If Ext-base or YUI, then the list you provided is what's available.

If you're using prototype/scriptaculous, then you have only easeIn and easeOut (prototype/scriptaculous do not appear to support any sort of easing effects built-in). An industrious soul could add support for others, thanks to the work of Curtis Edmond.

If you're using jQuery, Ext doesn't currently support any type of easing. From looking at the adapter, there's a note about researching the easing plugin (on line 424).

// TODO: find out about easing plug in?

It seems there'd be a slight bit of conversion necessary to get the easing plug-in to play nicely (ie change some easing method names so your code would play nice with underlying framework changes and require no modifications to easing method names you've used in your projects). The easing methods supported by the jQuery plugin are: easein, easeinout, easeout, expoin, expoout, expoinout, bouncein, bounceout, bounceinout, elasin, elasout, elasinout, backin, backout, backinout, linear. From reviewing the demos, I suspect expo would map to ease*Strong and elas* to elastic*.

FWIW, pretty much every JS framework that supports easing effects does so thanks to the work of Robert Penner.

[Animal]

Interesting.

I've looked at his equations:

// quintic easing in - accelerating from zero velocity
// t: current time, b: beginning value, c: change in value, d: duration
// t and d can be frames or seconds/milliseconds
Math.easeInQuint = function (t, b, c, d) {
	return c*(t/=d)*t*t*t*t + b;
};

I'd like to know how to apply that to the ClickRepeater class.

When I submitted the original code to Jack, I had a horrible, kludgy easin algorithm where I just decreased the delay until the next click depending on how long the mouse button had been down for.

In fact, what is needed is a quintic (or quadratic - depending on how it feels to use) easin for the acceleration.

But I've no idea how to use that function to implement it within the ClickRepeater code.

[dotnetCarpenter]

Ahh, I see. I thought that all the underlaying libraries supported the same easing effects. Can you guys confirm that the ext base support the same easing effects as YUI?

[steffenk]

simple no. You can look to the API and fx to see which effects are integrated in Ext, these easing-effects are not included.

[JeffHowden]

Ahh, I see. I thought that all the underlaying libraries supported the same easing effects. Can you guys confirm that the ext base support the same easing effects as YUI?

If Ext-base or YUI, then the list you provided is what's available.

http://ext.vosandhowden.com/deploy/e...ion/easing.cfm

You'll notice that jQuery and Prototype+Scriptaculous both do not offer anything in the way of easing. That's a bit misleading, however. The jQuery adapter does offer easeIn and easeOut, but doesn't expose them in a way I can access for this example page. Additionally, I investigated adding the jQuery easing plug-in to the list of includes when using the jQuery lib on the example page, but actually making it work with the adapter would require modifying the adapter, which I'm not up for at the moment. I've no clear idea what it'd take to get Prototype+Scriptaculous to support easing, if it's even possible at this time.

[brian.moeskau]

Nice Jeff, I like your example page.

[JeffHowden]

Thanks. Feel free to add it to the examples. Holler if you need anything specific from me that you can't get from viewing it.

[J.C. Bize]

Thanks very much. This was incredibly helpful.

Cheers,
JC

[Gabor Turi]

Examples with chart: http://stack.hu/extjs/easing_list.html