B4J Tutorial [BANano] SetLayoutAnimated & Other Animations

Ola

NB: Updated Demo & B4xlib on this post:

BANanoCSSUtils - Utility Helpers & Animations on any BANanoElement

Hi there Demo on Vercel This b4xlib does similar functions as the CSSUtils in terms of enabling one to change BANanoElement styling. Added to that we have added some animation classes so that you can animate your BANano WebApps without any extra dependencies except anime.js. For a demo about...

www.b4x.com

We will use BANanoAnimeJS..

Private Sub btnSetLayoutAnimated_Click (e As BANanoEvent)
    SHIonBaseElement1.SetLayoutAnimated(2000, "20px", "20px", "400px", "200px")
End Sub

 

[Mashiane]

SetLayoutAnimatedRadius

This is the same as SetLayoutAnimated but includes the radius so that you can change it.

Private Sub btnSetLayoutAnimatedRadius_Click (e As BANanoEvent)
    SHIonBaseElement1.SetLayoutAnimatedRadius(2000, "20px", "20px", "400px", "200px", "20px")
End Sub

 

[Mashiane]

SetTopAnimated

Change the Top position of the Element

Private Sub btnSetTopAnimated_Click (e As BANanoEvent)
    SHIonBaseElement1.SetTopAnimated(2000, "100px")
End Sub

 

[Mashiane]

SetLeftAnimated

Private Sub btnSetLeftAnimated_Click (e As BANanoEvent)
    SHIonBaseElement1.SetLeftAnimated(2000, "100px")
End Sub

 

[Mashiane]

SetWidthAnimated & SetHeightAnimated

Private Sub btnSetWidthAnimated_Click (e As BANanoEvent)
    SHIonBaseElement1.SetWidthAnimated(2000, "300px")
End Sub

Private Sub btnSetHeightAnimated_Click (e As BANanoEvent)
    SHIonBaseElement1.SetHeightAnimated(2000, "100px")
End Sub

 

[Mashiane]

SetColorAnimated

NB: Should be hex value

Private Sub btnSetColorAnimated_Click (e As BANanoEvent)
    SHIonBaseElement1.SetColorAnimated(2000, "#b0e0e6".ToUpperCase, "#fe4a49".ToUpperCase)
End Sub

 

[Mashiane]

SetAlphaAnimated

Private Sub btnSetAlphaAnimated_Click (e As BANanoEvent)
    SHIonBaseElement1.SetAlphaAnimated(2000, 0.5)
End Sub

 

[Mashiane]

SetRotationAnimated

Private Sub btnSetRotateAnimated_Click (e As BANanoEvent)
    SHIonBaseElement1.SetRotationAnimated(2000, 45)
End Sub

 

[Mashiane]

SetRadiusAnimated

Private Sub btnSetRadiusAnimated_Click (e As BANanoEvent)
    SHIonBaseElement1.SetRadiusAnimated(2000, "50%")
End Sub

 

[Mashiane]

SetTextSizeAnimated

Private Sub btnTextSizeAnimated_Click (e As BANanoEvent)
    Log(BANanoCSSUtils.GetStyleProperty(SHIonBaseElement1.Element, "font-size"))
    SHIonBaseElement1.SetTextSizeAnimated(2000, "60px")
End Sub

 

[Mashiane]

SetVisibleAnimated

This changes the "opacity" of the element between 1 (visible) and 0 (not visible)

 

[Mashiane]

SetScaleAnimated

Private Sub btnSetScaleAnimated_Click (e As BANanoEvent)
    imgDiv.SetScaleAnimated(2000, 1, 2)
End Sub

For this we set a background image to a div and then scale it.