Component Size Animation detail?

[ccooollll]

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

[Jamie Avins]

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:

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.

[ccooollll]

thanks for the information.

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

thanks

[Animal]

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?

[ccooollll]

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,

[Animal]

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