PDA

View Full Version : Looking for a nice sliding animation



Moinsen
18 May 2012, 2:42 AM
Hi,

im looking for a way to have a nice sliding animation in my application. There are two panels left and right. There is a button in the bbar to start this sliding. Normally you expand/collapse the panel left to the panel you pressed that button. And the panel on the other side is set visible or unvisible.



function form2Slide() {
var left = mainForm.getComponent("form1");
var right = mainForm.getComponent("form3");

if(!left.collapsed) {
if(!right.isVisible()){
right.setVisible(true);
}
left.collapse( Ext.Component.DIRECTION_LEFT , true );
} else {
if(right.isVisible()){
right.setVisible(false);
}
left.expand( true );
}
}



That works perfect but it looks ugly. A bit bucking or something like that. Does anybody know a way to have a smooth and soft sliding animation?

Thank you!

scottmartin
18 May 2012, 8:41 PM
Do you mean something like this?
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/layout/border.html

Regards,
Scott

Moinsen
21 May 2012, 3:36 AM
Hi Scott,

nearly thank you. I have a panel with a 'hbox' - 'stretch' layout. In this panel are multiple other panels. So not a fixed number of panels but a least 4. So it is difficult to do this with one border layout. But, just to imagine, if the sliding button is pressed those panels did a horizontal move.

It helped a bit to use collapse/expand instead of visible. But the whole sliding consists of 3 parts. Collapse or expand the panels on the edges and move the panel in the middle. Now these 3 actions done by expanding one neighbour and collapse the other neighbour looks really bucking. So the best would be something like one animation for all 3 actions ... anyhow. I tried an animation with opacity but it looks bad.

Any ideas? Thank you!

scottmartin
21 May 2012, 6:22 AM
You may have to create a small working example or use one of our example and create a small video (jing) of what you are referring to. It a bit difficult to image what the issue is regarding animation based on a description.

Scott.

Moinsen
21 May 2012, 7:07 AM
Hi,

this is my movie: http://screencast.com/t/Xr0SL5WE

and this is the sliding procedure.


function form2Slide(show) {
var left, right;
if(show == 'form2'){
left = mainForm.getComponent("form1");
right = mainForm.getComponent("form3");
} else {
left = mainForm.getComponent("form2");
right = mainForm.getComponent("form4");
}

if(!left.collapsed) {

if(right.collapsed){
right.expand( true );
}

left.collapse( Ext.Component.DIRECTION_LEFT , true );

} else {
if(!right.collapsed){
right.collapse( Ext.Component.DIRECTION_RIGHT , true );
}

left.expand( true );

}
}



Hope this makes it clear. Thank you!

Moinsen
22 May 2012, 6:16 AM
Hi Scott,

no idea? I have to change the layout because height: '100%' or autoheight doesn't work anymore. So i figured out to put a hbox - stretch panel in my viewport. The panels inside have a vbox - stretch layout. So they appear as aspected. The layout for the inner panel before was absolute and it was easy to do nice animations by changing the left value and using a z-index.

??? Maybe there is another way to do this sliding than expand/collapse ???

scottmartin
22 May 2012, 6:44 AM
In discussing this with another tech, it was suggested that using border layout instead of hbox layout would correct some of the animation problems that you are facing. You are are collectively animating items at once and this is causing a strain.

Scott.