Android Question BitmapCreator Effect

[ilan]

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..

 

[ilan]

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)

B4XPages.GetManager.TransitionAnimationDuration = 0

then add the Page and create it like this:

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

now you can open the page like this:

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.

pnl.As(Panel).Elevation = 10dip

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

 

[ilan]

added 2 more animations:

PrepareTransition_FadeOut, PrepareTransition_SpiralOut

(file updated in post #1)

 

[ilan]

added 2 more animations (one is really crazy)

PrepareTransition_BurnOut, PrepareTransition_SlideOut


(file updated in post #1)

 

[Xfood]

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)

B4XPages.GetManager.TransitionAnimationDuration = 0

then add the Page and create it like this:

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

now you can open the page like this:

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

 

[ilan]

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)

[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: https://payhip.com/SagitalCoding

www.b4x.com

 

[Xfood]

it is included in post #2 (the fire2.png file)

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

[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: https://payhip.com/SagitalCoding

www.b4x.com

thanks, it's really great

 

[ddefrain]

added 2 more animations (one is really crazy)

PrepareTransition_BurnOut, PrepareTransition_SlideOut


(file updated in post #1)

Nice!!!
Thank you very much

 

[TILogistic]

Another transition that could be added

[B4X] [BitmapCreator] Layout implode animation

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. 'Type in globals: Type PixelGroup (SrcX As Int, SrcY As Int, x As Float, y As Float, dx As Float, dy As Float) Sub...

www.b4x.com