1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    8
    Vote Rating
    2
    ccooollll is on a distinguished road

      0  

    Default Component Size Animation detail?

    Component Size Animation detail?


    Hi,

    I have a custom component which I need to do size animation,
    I use the
    me.animate(Ext.apply({
    duration: 500,
    easing: 'easeIn',
    to: to
    }, true));

    which is the function from AbstractComponent.animate;

    the animation works fine,

    however, I am not able to track for the progressively size change during the animation; which I need that for another resize object listen to the the custom component,

    I have read through the AbstractComponent.animate, it seems that it set the size to the final size and have no clue to get the progressively size change during the animation,

    is there any way to retrieve the information on the size change during the animation??

    Thanks

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Firing tween events on every frame would be quite excessive. This would also not be possible with CSS3 animations as there is no tweening timers available via javascript. What you can do is use a keyframe which does fire an event at a percentage basis. Something like this:

    Code:
    me.animate(Ext.apply({
        duration: 500,
        easing: 'easeIn',
        keyframe: {
            50: {
                opacity: 1 // Some dummy property that isn't going to change, but you get a keyframe event fired here, a blank object may work and I can look at supporting it just to get the keyframe event you want out here
            },
            100: {
                width: 100px
            }
    }, true));
    Then add a listener to the first 'keyframe' event which passes which keyframe it's on. You can change the 50 to whatever percent you wish.

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    8
    Vote Rating
    2
    ccooollll is on a distinguished road

      0  

    Default


    thanks for the information.

    and could you simply explain how to listen to the keyframe from the animate?

    thanks

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

      0  

    Default


    You should not really need tween events because you can specify dynamic:true in the animation config which will make the resize operate on the Component itself rather than its outer element.

    So you can then hook into resize events which will fire on each frame when the frame handler executes and sets the size to its calculated value for its point on the timeline.

    But what problem are you trying to solve?

  5. #5
    Sencha User
    Join Date
    Feb 2011
    Posts
    8
    Vote Rating
    2
    ccooollll is on a distinguished road

      0  

    Default


    what I want to do is while moving and resizing a container, an image inside will resize and adjust the position (to keep in the middle of container) with the container.

    because the current ImageComponent cannot resize itself to the container, so what I write is to use the component contains a image tag and scale the image to fit and center into the component


    Thank you,

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

      0  

    Default


    Use a layout. This is what they are for: Sizing child Components.

Similar Threads

  1. List Component and Detail View
    By Andrel in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 22 Jun 2011, 12:22 AM
  2. Replies: 1
    Last Post: 18 Aug 2010, 7:57 PM
  3. Handling Master-Detail-Detail displays with back button support
    By robertj98 in forum Sencha Touch 1.x: Discussion
    Replies: 5
    Last Post: 15 Jul 2010, 12:59 AM

Thread Participants: 2

Tags for this Thread