Android Question BitmapCreator Effect

ilan

Expert
Licensed User
Longtime User
hi

yesterday was the first time i used BitmapCreator. I used a transition effect between 2 pages (from this thread) and it works awesome.
now i am trying to create more transition effects between pages.

i try to make a simple Door Open/Close transition but have a hard time understanding how to do that.

so basically what i need is to draw half of the left part of the screen and the second half and then move the left part to the left and right part to the right and create an opening transition effect.

i use it in one of my SpriteKit games (Space Defender)

thank you!

EDIT: i know how i could do it with canvas but i want to use BitmapCreator because it seems to be a monster library and i want to use it for more stuff in the future so understanding how it works is a big advantage for creating effects..
 
Last edited:

ilan

Expert
Licensed User
Longtime User
after thinking about it and making some test i created those effects with simple b4xcanvas and the results is not bad at all (tested on android simulator)

i added for now 4 animations, Door_Open, Door_Close, Radius_In, Radius_Out
Radius_Out is the same Effect as @Erel did with his BitmapCreator library in post #1
Radius_in is the Opposite of that effect (as can be seen in the video)



example code of how i call it in my app:

Make sure to remove the default b4xpages transition effect with this code:

(put it in B4xmainpage B4XPage_Created sub)
B4X:
B4XPages.GetManager.TransitionAnimationDuration = 0

then add the Page and create it like this:

B4X:
B4XPages.AddPageAndCreate("multi",Multi_Page.Initialize)

now you can open the page like this:

B4X:
Private Sub multitable_Click 'open multi table page
    Multi_Page.loadpageinadvance 'load first colors and data
    B4x_Transition.PrepareTransition_RadiusIn(xui, Root.Width, Root.Height,Root, Multi_Page.Root)
    B4XPages.ShowPageAndRemovePreviousPages("multi")
End Sub

EDIT: 4 more animations added (PrepareTransition_FadeOut, PrepareTransition_SpiralOut, PrepareTransition_BurnOut, PrepareTransition_SlideOut)
download the spritesheet for the BurnOut animation and put it in File.DirAssets Folder!

EDIT: small fix in the class. without this change the views will load before the transition is finished if they are not inside a panel.
B4X:
pnl.As(Panel).Elevation = 10dip

EDIT: B4X Example App available here: https://www.b4x.com/android/forum/threads/b4x-xui-b4xpages-transition-class.135595/
 

Attachments

  • B4x_Transition.bas
    9.4 KB · Views: 126
  • fire2.png
    fire2.png
    498 KB · Views: 138
  • B4x_Transition v2.bas
    8.5 KB · Views: 121
Last edited:
Upvote 0

ilan

Expert
Licensed User
Longtime User
added 2 more animations:

PrepareTransition_FadeOut, PrepareTransition_SpiralOut

(file updated in post #1)
 
Upvote 0

Xfood

Expert
Licensed User
after thinking about it and making some test i created those effects with simple b4xcanvas and the results is not bad at all (tested on android simulator)

i added for now 4 animations, Door_Open, Door_Close, Radius_In, Radius_Out
Radius_Out is the same Effect as @Erel did with his BitmapCreator library in post #1
Radius_in is the Opposite of that effect (as can be seen in the video)



example code of how i call it in my app:

Make sure to remove the default b4xpages transition effect with this code:

(put it in B4xmainpage B4XPage_Created sub)
B4X:
B4XPages.GetManager.TransitionAnimationDuration = 0

then add the Page and create it like this:

B4X:
B4XPages.AddPageAndCreate("multi",Multi_Page.Initialize)

now you can open the page like this:

B4X:
Private Sub multitable_Click 'open multi table page
    Multi_Page.loadpageinadvance 'load first colors and data
    B4x_Transition.PrepareTransition_RadiusIn(xui, Root.Width, Root.Height,Root, Multi_Page.Root)
    B4XPages.ShowPageAndRemovePreviousPages("multi")
End Sub

EDIT: 4 more animations added (PrepareTransition_FadeOut, PrepareTransition_SpiralOut, PrepareTransition_BurnOut, PrepareTransition_SlideOut)
download the spritesheet for the BurnOut animation and put it in File.DirAssets Folder!
truly spectacular,
but I didn't quite understand where I have to download this: download the spritesheet
could you please attach a mini project to that of the video.
Thanks
 
Upvote 0

ilan

Expert
Licensed User
Longtime User
truly spectacular,
but I didn't quite understand where I have to download this: download the spritesheet
could you please attach a mini project to that of the video.
Thanks
it is included in post #2 (the fire2.png file)

anyway i have included a simple example for you (and for everyone else) :)

 
Upvote 1

TILogistic

Expert
Licensed User
Longtime User
Another transition that could be added
 
Upvote 0
Top