B4J Code Snippet [B4X] [BitmapCreator] Layout implode animation

Discussion in 'B4J Code Snippets' started by Erel, Apr 20, 2018.

  1. Erel

    Erel Administrator Staff Member Licensed User



    The layout should be made of a "base panel" that holds all other views.
    The base panel is then replaced with an ImageView and returned back at the end of the animation.
    Code:
    'Type in globals:
    Type PixelGroup (SrcX As Int, SrcY As Int, x As Float, y As Float, dx As Float, dy As Float)

    Sub ImplodeLayout(BasePanel As B4XView, NumberOfSteps As Int) As ResumableSub
       
    #if debug
       Log("Animation disabled in debug mode.")
       Sleep(0)
       Return True
       
    #End If
       
    Dim scale As Float = 100dip / 100
       
    Dim bc As BitmapCreator
       
    Dim GroupSize As Int = 6 'you can play with this size to change the effect.
       Dim iv As ImageView
       iv.Initialize(
    "")
       
    Dim xiv As B4XView = iv
       
    Dim bmp As B4XBitmap = BasePanel.Snapshot
       BasePanel.Parent.AddView(xiv, BasePanel.Left, BasePanel.Top, BasePanel.Width, BasePanel.Height)
       BasePanel.RemoveViewFromParent
     
       
    Dim w As Int = xiv.Width / scale / GroupSize
       
    Dim h As Int = xiv.Height / scale / GroupSize
       bc.Initialize(w * GroupSize, h * GroupSize)
       
    Dim source As BitmapCreator
       source.Initialize(bc.mWidth, bc.mHeight)
       source.CopyPixelsFromBitmap(bmp)
     
       
    Dim steps As Int = NumberOfSteps
       
    Dim pgs(w, h) As PixelGroup
       
    For x = 0 To w - 1
           
    For y = 0 To h - 1
               
    Dim pg As PixelGroup = pgs(x, y)
               pg.SrcX = x * GroupSize
               pg.Srcy = y * GroupSize
               
    Select Rnd(04)
                   
    Case 0
                       pg.x = 
    0
                       pg.y = 
    Rnd(0, bc.mHeight)
                   
    Case 1
                       pg.x = bc.mWidth - 
    1
                       pg.y = 
    Rnd(0, bc.mHeight)
                   
    Case 2
                       pg.x = 
    Rnd(0, bc.mWidth)
                       pg.y = 
    0
                   
    Case 3
                       pg.x = 
    Rnd(0, bc.mWidth)
                       pg.y = bc.mHeight - 
    1
               
    End Select
             
               pg.dx = (pg.SrcX - pg.x) / steps
               pg.dy = (pg.SrcY - pg.y) / steps
           
    Next
       
    Next
       
    Dim r As B4XRect
       r.Initialize(
    0000)
       
    For i = 0 To steps - 1
           bc.FillRect(xui.Color_Transparent, bc.TargetRect)
           
    For x = 0 To w - 1
               
    For y = 0 To h - 1
                   
    Dim pg As PixelGroup = pgs(x, y)
                   pg.x = pg.x + pg.dx
                   pg.y = pg.y + pg.dy
                   r.Left = pg.SrcX
                   r.Right = pg.SrcX + GroupSize
                   r.Top = pg.SrcY
                   r.Bottom = pg.SrcY + GroupSize
                   bc.DrawBitmapCreator(source, r, pg.x, pg.y, 
    True)
               
    Next
           
    Next
           xiv.SetBitmap(bc.Bitmap)
           Sleep(
    16)
       
    Next
       xiv.Parent.AddView(BasePanel, xiv.Left, xiv.Top, xiv.Width, xiv.Height)
       xiv.RemoveViewFromParent
       
    Return True
    End Sub
    Depends on BitmapCreator (additional library for B4A and B4J: https://www.b4x.com/android/forum/threads/6787/#content)

    Tested in B4J. Should also work in B4A and B4i.
     

    Attached Files:

    • 1.zip
      File size:
      23 KB
      Views:
      173
    Last edited: Apr 22, 2018
    beacon, LucaMs, AnandGupta and 7 others like this.
  2. Star-Dust

    Star-Dust Expert Licensed User

    Can not change this?
    Code:
    Dim scale As Float = 100dip / 100
    With this?
    Code:
    Dim scale As Float = 1dip
     
  3. Erel

    Erel Administrator Staff Member Licensed User

    No. The dip unit returns an integer (output of DipToCurrent).
     
  4. Star-Dust

    Star-Dust Expert Licensed User

    Ok thanks :) a creative idea
     
    Last edited: Apr 20, 2018
  5. Star-Dust

    Star-Dust Expert Licensed User

    can I propose variations to this source?
    That is a slightly different effect
     
  6. Johan Hormaza

    Johan Hormaza Active Member Licensed User

    Simply magnificent, thanks @Erel :)
     
  7. Erel

    Erel Administrator Staff Member Licensed User

    Of course. You can do whatever you like with the code.
     
    Johan Hormaza likes this.
  8. Star-Dust

    Star-Dust Expert Licensed User

    these are my three variants:

    Variant 1:
    Variant1.gif
    Code:
    For x = 0 To w - 1
            
    For y = 0 To h - 1
                
    Dim pg As PixelGroup = pgs(x, y)
                pg.SrcX = x * GroupSize
                pg.Srcy = y * GroupSize

                
    If (y/2)=Floor(y/2Then
                    pg.x = -bc.mWidth
                    pg.y = pg.SrcY
                
    Else
                    pg.x = bc.mWidth*
    2
                    pg.y = pg.srcy
                
    End If
                
                pg.dx = (pg.SrcX - pg.x) / steps
                pg.dy = (pg.SrcY - pg.y) / steps
            
    Next
    Variant 2:
    video2.gif
    Code:
    For y = 0 To h - 1
                
    Dim pg As PixelGroup = pgs(x, y)
                pg.SrcX = x * GroupSize
                pg.Srcy = y * GroupSize

                
    If (y/2)=Floor(y/2And (x/2)=Floor(x/2Then
                    pg.x = -bc.mWidth
                    pg.y = -bc.mHeight
                
    Else
                    pg.x = bc.mWidth*
    2
                    pg.y = bc.mHeight*
    2
                
    End If
                
                pg.dx = (pg.SrcX - pg.x) / steps
                pg.dy = (pg.SrcY - pg.y) / steps
            
    Next
    Variant 3:
    Video3.gif
    Code:
    For y = 0 To h - 1
                
    Dim pg As PixelGroup = pgs(x, y)
                pg.SrcX = x * GroupSize
                pg.Srcy = y * GroupSize
                
                pg.x = pg.SrcX + 
    Rnd(0,60) - 30
                pg.y = pg.SrcY + 
    Rnd(0,60) - 30
                
                pg.dx = (pg.SrcX - pg.x) / steps
                pg.dy = (pg.SrcY - pg.y) / steps
     
  9. Johan Hormaza

    Johan Hormaza Active Member Licensed User

    Great job!!! THANK YOU!!
     
  10. Star-Dust

    Star-Dust Expert Licensed User

    Erel did the important job, I only modified a little bit, but the idea is his ;)
     
    GMan and Johan Hormaza like this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice