1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      0  

    Default Unanswered: On Animation end, component snaps back

    Unanswered: On Animation end, component snaps back


    I'm using the animation below to slide my toolbar up and it slides it , but it doesn't stay.
    It slides back to its original position. Is this normal behavior?......if so do I have to explicitly set the new top value for the toolbar? Also in my toolbar config , I specify: top: 1536.

    Code:
    Ext.Anim.run(toolbar,'slide',{
                            direction: 'up',
                            duration: 1000,
                            from:{top:1536},
                            to:{top:1432}
                         });
    Last edited by Mike6679; 26 Jul 2012 at 6:09 AM. Reason: added more info

  2. #2
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      0  

    Default


    Ok I got it working but not sure its a solution really. I found a stackoverflow thread (here) that suggested to use Ext.Animator.run . Like I said, it does work , but I could not find it documented anywhere and the after function does not get called. Can someone from Sencha clarify?


    Code:
    Ext.Animator.run({
                                element: toolbar.element,
                                duration: 325,
                                easing: 'ease-in',
                                preserveEndState: true,
                                from:{top:1536},
                                to:{top:1432}
                                //after:function(){
                                //    me_navicon.setSrc('resources/images/nav/nav_activate_down.png');
                                //}
                             });

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      0  

    Default


    Hello? anyone??

  4. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    I noticed on that thread that rdougan did comment on it again:
    Currently, no. The reason was that we (Sencha) wanted to look at it in more detail in 2.1, and perhaps change how it works. We didn't want to break peoples applications with the 2.1 update, so we resorted to keeping the existing animation system (Ext.Anim) which is buggy (as you have experienced) until we fix up Ext.Animator. For now, your best bet is to look at the source and look at the available properties. Your best start is looking atsrc/fx/animation/Abstract.js.

    rdougan

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      0  

    Default


    Thanks for that.

  6. #6
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Answers
    1
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    A little late, but I think I can help you out, Mike. I owe it to you as your post is what turned me onto the Ext.Animator solution. It's possible to hook into several events, one of which is animationend. You can do this on individual animations or on Ext.Animator as a whole. Here's an example of hooking into an individual animation. To do this, you have to instantiate the animation yourself instead of just passing in the config for Ext.Animator to instantiate. Then you can add the event:
    Code:
    label = this.getLabel();
    var dx = 100;
    
    var a = new Ext.fx.Animation({
        element:label.element,
        duration:325,
        easing:'ease-in',
        preserveEndState:true,
        from:{top:label.getTop(), left:label.getLeft()},
        to:{top:label.getTop() + dx, left:label.getLeft() + dx}
    });
    
    a.on('animationend', function (animation, element, isInterrupted) {
        label.setTop(label.element.getTop());
        label.setLeft(label.element.getLeft());
    });
    
    Ext.Animator.run(a);
    I was doing something similar to you. I wanted to animate my hint when I clicked on different points on a series. I found that if I used Ext.anims I couldn't easily animate diagonally and I got the snap-back problem. But if I used Ext.Animator with preserveEndState=true, the element stayed where it needed to be. But at the end of the animation element.getTop()/getLeft() still had the old values, thus making it a little difficult the next time through and messing up other stuff. So I did the above and now it's quite happy.

    This is based on ST 2.1 RC2. Hopefully they'll just document what they have on Ext.Animator without making major changes that makes this code not work anymore.

Thread Participants: 2

Tags for this Thread