1. #1
    Ext User dotnetCarpenter's Avatar
    Join Date
    Mar 2007
    Location
    Copenhagen, Denmark
    Posts
    271
    Vote Rating
    0
    dotnetCarpenter is on a distinguished road

      0  

    Exclamation Easing list

    Easing list


    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

  2. #2
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    Quote Originally Posted by dotnetCarpenter View Post
    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.
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Interesting.

    I've looked at his equations:

    Code:
    // 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.

  4. #4
    Ext User dotnetCarpenter's Avatar
    Join Date
    Mar 2007
    Location
    Copenhagen, Denmark
    Posts
    271
    Vote Rating
    0
    dotnetCarpenter is on a distinguished road

      0  

    Default


    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?

  5. #5
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    simple no. You can look to the API and fx to see which effects are integrated in Ext, these easing-effects are not included.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  6. #6
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    Quote Originally Posted by dotnetCarpenter View Post
    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?
    Quote Originally Posted by JeffHowden View Post
    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.
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Nice Jeff, I like your example page.

  8. #8
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    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.
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  9. #9
    Ext JS - Development Team J.C. Bize's Avatar
    Join Date
    May 2007
    Location
    Bay Area, CA
    Posts
    179
    Vote Rating
    0
    J.C. Bize is on a distinguished road

      0  

    Default


    Thanks very much. This was incredibly helpful.

    Cheers,
    JC

  10. #10
    Ext User
    Join Date
    Aug 2008
    Location
    Hungary
    Posts
    80
    Vote Rating
    0
    Gabor Turi is on a distinguished road

      0