Results 1 to 7 of 7

Thread: Looking for a nice sliding animation

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    Katzenellenbogen
    Posts
    51
    Answers
    1
    Vote Rating
    1
      0  

    Default Looking for a nice sliding animation

    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.

    Code:
          
        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!

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    504
      0  

    Default

    Do you mean something like this?
    http://dev.sencha.com/deploy/ext-4.1...ut/border.html

    Regards,
    Scott

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Location
    Katzenellenbogen
    Posts
    51
    Answers
    1
    Vote Rating
    1
      0  

    Default

    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!

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    504
      0  

    Default

    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.

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Location
    Katzenellenbogen
    Posts
    51
    Answers
    1
    Vote Rating
    1
      0  

    Default

    Hi,

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

    and this is the sliding procedure.

    Code:
          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!

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Location
    Katzenellenbogen
    Posts
    51
    Answers
    1
    Vote Rating
    1
      0  

    Default

    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 ???

  7. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    504
      0  

    Default

    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •