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:

 

Attachments

  • B4X-Transition.zip
    507.2 KB · Views: 724
Last edited:

wimpie3

Well-Known Member
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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:
B4X:
'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
 
Last edited:

ilan

Expert
Licensed User
Longtime User
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

Well-Known Member
Licensed User
Longtime User
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:
1636640859171.png

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.
 
Last edited:

ilan

Expert
Licensed User
Longtime User
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.

B4X:
'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

Expert
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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.
 
Top