1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    65
    Answers
    8
    Vote Rating
    0
    ehboym is on a distinguished road

      0  

    Default Answered: controlling slide animation

    Answered: controlling slide animation


    Hi,

    I'm trying to create a slide animation for a panel using :
    Code:
    Ext.Anim.run(this, 'slide', {
        direction: 'right',
        from: {left: 100},
        to: {left: 200},
        after: function() {this.setLeft(200);}
    });
    I do get the defined animation but the values 'from' and 'to' are ignored.
    The animation always runs from the element's origin to the (Origin + element width).

    What am I doing wrong here ?

    Is there a way to make is stay at the 'to' position (it is jumping back to it's origin) ?

    Thanks

    Erez

  2. Finally I have a working pice of code:
    Code:
    		Ext.Animator.run({
    			element: LMapcontrol.element,
    			easing: 'ease-in',
    			preserveEndState: true,
    			from: {left: -62},
    			to: {left: 0}
    		});
    I'm not shore what made the difference but it is working now.

    Erez

  3. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    You forgot to append 'px', and, probably, to slide your panel you should run your animation to the panel element and the direction config is not needed.

    Code:
    new Ext.Anim.run(this.element, {
        from: {
            left: 100 + 'px'
        },
        to: {
            left: 200 + 'px'
        }
    });
    PS: Be sure your panel is floating or that it has an absolute positioning.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  4. #3
    Sencha User
    Join Date
    May 2012
    Posts
    65
    Answers
    8
    Vote Rating
    0
    ehboym is on a distinguished road

      0  

    Default


    Hi,

    Code:
    var LMapcontrol = Ext.getCmp('viewMapControls_L');
    Ext.Anim.run(LMapcontrol, 'slide', {
    	direction: 'right',
    	from: {left: 100 + 'px'},
    	to: {left: 200 + 'px'},
    	after: function() {LMapcontrol.setLeft(0);}
    });
    The objet is animated from 0px to LMapcontrol.width ignoring the 'from' and 'to' values.
    The panels top and left parameters are set so it should be floating.

    and without the 'after function it jumps to it's starting position.

    Erez

  5. #4
    Sencha User
    Join Date
    May 2012
    Posts
    65
    Answers
    8
    Vote Rating
    0
    ehboym is on a distinguished road

      0  

    Default


    Finally I have a working pice of code:
    Code:
    		Ext.Animator.run({
    			element: LMapcontrol.element,
    			easing: 'ease-in',
    			preserveEndState: true,
    			from: {left: -62},
    			to: {left: 0}
    		});
    I'm not shore what made the difference but it is working now.

    Erez

Thread Participants: 1