Forum Xamarin Xamarin.Forms

How to show Animation in Page Transitions ?

Hi All,

I'm building a XForms app where I'm using Tabbed Page control.
But while Navigating to another page the transition of the space occupied by tabbed page is observable quite clearly which actually looks kind of odd.
So what I was thinking is to implement some Animation kind of thing which will hide this transition of the tabbed page space.

What I need is to show some kind of Animation while transition(navigation) happens from the Tabbed page to Another & vice-versa.
Any help would be appreciated.

Thanks,
Priyabrata

Posts

  • Thanks, this is helpful for something similar I am trying to do (transition a view from the top down).

    One question though, what is happening with the (1 - s) * Width argument? When I debug it looks like s returns 0, 0, 1, 1. This is black magic to me, and if I change the values it behaves erratically. Could you elaborate on this?

  • PriyabrataDashPriyabrataDash USMember ✭✭

    Here is what I understand. I might be not 100% correct though.
    1-s : Here '1' means the entire screen resolution of the phone & 's' means the resolution of application screen. This is the X coordinate of the screen i.e. Width of screen.

    By using this statement I'm trying to get the Width of the rectangle I'm creating for showing the Animation.
    I hope this explains you up to an extent.

  • Ahh, I have not seen bounds set like that before. I was able to get a slide down transition working with your explanation, so thanks again.

    If anyone needs it -

    this.Animate("", (s) => Layout(new Rectangle(X, (s - 1) * Height, Width, Height)), 0, 600, Easing.SpringIn, null, null); //slide down

    this.Animate("", (s) => Layout(new Rectangle(X, (1 - s) * Height, Width, Height)), 0, 600, Easing.SpringIn, null, null); // slide up

  • So it turns out that slide up code only works as an initial animation, but will not slide up out of view if the view was animated to slide down previously.

    I get that 1 is the device width or height depending on which param you are in (X or Y), and s is the screen resolution, but my screen resolution is the same as the device resolution, so it seems you would be subtracting the same number from itself. Yet if you replace this with a 0 it doesn't work. Clearly something I'm not getting here, but I can't seem to find any documentation which covers this.

    Does anyone know how this could be accomplished, or know of any documentation for the Forms version of .animate?

  • jacobloschenjacobloschen USMember

    I second DustinDittmer's question. How come my appearing animation behaves as expected but onDisappearing does nothing?

        protected override void OnAppearing(){
            base.OnAppearing ();
            this.Animate("",(s)=> Layout(new Rectangle(X,(1-s)*Height,Width,Height)),0,600,Easing.SpringIn,null,null);
        }
    
        protected override void OnDisappearing(){
            base.OnDisappearing ();
            this.Animate("",(s)=> Layout(new Rectangle(X,(s-1)*Height,Width,Height)),0,600,Easing.SpringIn,null,null);
        }
    
  • kalyanikalyani USMember
    edited October 2015

    @PriyabrataDash ,Hi Priyabrata,

    i have 2 frames .when am tapping on 1st frame i need to perform flip animation on the 1st frame and 1st frame sit in 2nd frame place and 2nd frame will sit in 1st frame place.

    means after tap they need to change their position while changing need to perform flip animation.

    Please guide me how to achieve the flip animation on frames.

  • Rohit_ArnavRohit_Arnav USMember ✭✭
    edited July 2017

    @PriyabrataDash @DustinDittmer.8607
    i am using your solution it works but the problem is that when the animation is completed the whoile page takes some margin from the right in width which means the actual width is get reduced to something like 30px or 20px ? please help on this why is this so?

  • OfaimOfaim Member ✭✭

    @jacobloschen said:
    ... my appearing animation behaves as expected but onDisappearing does nothing?

      protected override void OnAppearing(){
          base.OnAppearing ();
          this.Animate("",(s)=> Layout(new Rectangle(X,(1-s)*Height,Width,Height)),0,600,Easing.SpringIn,null,null);
      }
    
      protected override void OnDisappearing(){
          base.OnDisappearing ();
          this.Animate("",(s)=> Layout(new Rectangle(X,(s-1)*Height,Width,Height)),0,600,Easing.SpringIn,null,null);
      }
    

    @jacobloschen, any solution for that issue? I'm in the same situation :(

  • DJNovaDJNova USMember ✭✭

    May want to try calling base.OnDisappearing(); after the animation. Possible that calling it prior means page is gone before animation is shown.

  • OfaimOfaim Member ✭✭

    Hey @GrahamHickson.4124! :smile:
    I thought about it and tried it, doesn't work :(

  • HarwinderHarwinder USMember

    hey, @Rohit_Arnav Facing similar issue. In my case, the view is animating from right to left, after completion its taking margin on the left side. Please let me know if you found any solution for this. Thank you in advance.

Sign In or Register to comment.