B4A Class [B4X] [XUI] B4XPages - Transition Class

hi everyone, i include here a simple example on how to use the b4xpages transition class (as asked from @Xfood here)

have fun




EDIT: An improved version can be purchased here:

Sagital Coding

Hi, my name is Ilan and I am a mobile/desktop app and web developer. I made over 70 apps for the Apple app store and Google Play store together. I love to code and that's why i made many free source codes you can download from my Github page and on b...

payhip.com

 

[Mashiane]

Awesome, what are you using for the "device"?

 

[ilan]

Awesome

Thanks

what are you using for the "device"?

do you mean Emulator? i use the emulator from Android Studio

 

[Xfood]

hi everyone, i include here a simple example on how to use the class.

have fun

wow. great thanks ..

 

[wimpie3]

The slide out animation currently doesn't animate the page that becomes visible. The old page slides out and reveals the new page which was already present under the old one. Would it be possible to slide the old page out and at the same time slide the new page in?

 

[ilan]

The slide out animation currently doesn't animate the page that becomes visible

this is why it is called slide-out!

Would it be possible to slide the old page out and at the same time slide the new page in?

this will mean that for some frames there will be an empty space on the screen. it won't look nice in my opinion but of course, you can add such an effect.
i have included the class so it should be very simple to implement it.

here is an example on how to slide in the nextpage:

'Direction, choose between "LEFT" "TOP" "RIGHT" "BOTTOM"
Public Sub PrepareTransition_SlideIn (Xui As XUI, RootWidth As Float, RootHeight As Float, CurrentPageRoot As B4XView, NewPageRoot As B4XView, Direction As String) As ResumableSub
    Dim pnl As B4XView = Xui.CreatePanel("")
    Dim pnl2 As B4XView = Xui.CreatePanel("")
    NewPageRoot.AddView(pnl, 0, 0, RootWidth, RootHeight)
    NewPageRoot.AddView(pnl2, RootWidth, RootHeight, RootWidth, RootHeight) 'put the panel outside the screen
    pnl.As(Panel).Elevation = 10dip
    pnl2.As(Panel).Elevation = 12dip

    Dim cnv, cnv2 As B4XCanvas
    cnv.Initialize(pnl)
    Dim backBmp As B4XBitmap = CurrentPageRoot.Snapshot
    cnv.ClearRect(cnv.TargetRect)
    cnv.DrawBitmap(backBmp,getRect(0,0,RootWidth,RootHeight))
    cnv.Invalidate
  
    pnl.Visible = False 'we need to hide pnl so the snapshot of nextpage will not include it
    cnv2.Initialize(pnl2)
    Dim backBmp2 As B4XBitmap = NewPageRoot.Snapshot
    cnv2.ClearRect(cnv2.TargetRect)
    cnv2.DrawBitmap(backBmp2,getRect(0,0,RootWidth,RootHeight))
    cnv2.Invalidate
    pnl.Visible = True 'now we can show it again
  
    Select Direction.ToUpperCase
        Case "LEFT"
            pnl2.Left = RootWidth
            pnl2.Top = 0
        Case "TOP"
            pnl2.Left = 0
            pnl2.Top = RootHeight
        Case "BOTTOM"
            pnl2.Left = 0
            pnl2.Top = -RootHeight
        Case "RIGHT" 
            pnl2.Left = -RootWidth
            pnl2.Top = 0
    End Select
    pnl2.BringToFront
    pnl2.SetLayoutAnimated(400,0,0,pnl2.Width,pnl2.Height)
    Sleep(400)
    pnl.RemoveViewFromParent
    pnl2.RemoveViewFromParent
    Return True
End Sub

 

[ilan]

btw i have updated the class so it will also work with b4i and also with panels (or any views inside a single page). like this, i can add animation when switching between images for example. it is really simple to implement that is why i included the source for everyone

NOTE: the first post DOESNOT include the latest version, i may add it in the future if people want to.

 

[wimpie3]

1. I'd love to have a version which works with b4i!
2. The new SlideIn effect you've created is cool and certainly a good addition, but not what I'm looking for. I was looking for this:

The yellow screen slides to the left and at the same time, the green screen slides to the left as well until the green screen reaches the leftmost position.

 

[ilan]

1. I'd love to have a version which works with b4i!
2. The new SlideIn effect you've created is cool and certainly a good addition, but not what I'm looking for. I was looking for this:
View attachment 121537
The yellow screen slides to the left and at the same time, the green screen slides to the left as well until the green screen reaches the leftmost position.

'Direction, choose between "LEFT" "TOP" "RIGHT" "BOTTOM"
Public Sub PrepareTransition_Swipe(Xui As XUI, RootWidth As Float, RootHeight As Float, CurrentPageRoot As B4XView, NewPageRoot As B4XView, Direction As String) As ResumableSub
    Dim pnl As B4XView = Xui.CreatePanel("")
    Dim pnl2 As B4XView = Xui.CreatePanel("")
    NewPageRoot.AddView(pnl, 0, 0, RootWidth, RootHeight)
    NewPageRoot.AddView(pnl2, RootWidth, RootHeight, RootWidth, RootHeight) 'put the panel outside the screen
    pnl.As(Panel).Elevation = 10dip
    pnl2.As(Panel).Elevation = 12dip

    Dim cnv, cnv2 As B4XCanvas
    cnv.Initialize(pnl)
    Dim backBmp As B4XBitmap = CurrentPageRoot.Snapshot
    cnv.ClearRect(cnv.TargetRect)
    cnv.DrawBitmap(backBmp,getRect(0,0,RootWidth,RootHeight))
    cnv.Invalidate
 
    pnl.Visible = False 'we need to hide pnl so the snapshot of nextpage will not include it
    cnv2.Initialize(pnl2)
    Dim backBmp2 As B4XBitmap = NewPageRoot.Snapshot
    cnv2.ClearRect(cnv2.TargetRect)
    cnv2.DrawBitmap(backBmp2,getRect(0,0,RootWidth,RootHeight))
    cnv2.Invalidate
    pnl.Visible = True 'now we can show it again
    pnl2.BringToFront
   
    Select Direction.ToUpperCase
        Case "LEFT"
            pnl2.Left = RootWidth
            pnl2.Top = 0
            pnl.SetLayoutAnimated(400,-RootWidth,0,pnl.Width,pnl.Height)
        Case "TOP"
            pnl2.Left = 0
            pnl2.Top = RootHeight
            pnl.SetLayoutAnimated(400,0,-RootHeight,pnl.Width,pnl.Height)
        Case "BOTTOM"
            pnl2.Left = 0
            pnl2.Top = -RootHeight
            pnl.SetLayoutAnimated(400,0,RootHeight,pnl.Width,pnl.Height)
        Case "RIGHT"
            pnl2.Left = -RootWidth
            pnl2.Top = 0
            pnl.SetLayoutAnimated(400,RootWidth,0,pnl.Width,pnl.Height)
    End Select
    pnl2.SetLayoutAnimated(400,0,0,pnl2.Width,pnl2.Height)
    Sleep(400)
    pnl.RemoveViewFromParent
    pnl2.RemoveViewFromParent
    Return True
End Sub

it was super simple to implement what you asked, it should be very clear from the code how you could have done it. it is better to give it a try then let other do it for you.

 

[LucaMs]

Hi, Ilan. Great class (I gave you a Like already at the time).

You've always used ShowPageAndRemovePreviousPages but it seems to me that it works fine (B4A) even with ShowPage (quick test, very rough).

 

[ilan]

Hi, Ilan. Great class (I gave you a Like already at the time).

You've always used ShowPageAndRemovePreviousPages but it seems to me that it works fine (B4A) even with ShowPage (quick test, very rough).

It was ment to be for all platforms and in b4j if you use .showpage you will have multiple windows.

 

[WhiteWizard]

A zoom animation would be useful too.