B4J Tutorial [BANano] SetLayoutAnimated & Other Animations

Mashiane · Aug 24, 2023

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

B4X:

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

Mashiane · Aug 24, 2023

SetLayoutAnimatedRadius

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

B4X:

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

Mashiane · Aug 24, 2023

SetTopAnimated

Change the Top position of the Element

B4X:

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

Mashiane · Aug 24, 2023

SetLeftAnimated

B4X:

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

Mashiane · Aug 24, 2023

SetWidthAnimated & SetHeightAnimated

B4X:

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 · Aug 24, 2023

SetColorAnimated

NB: Should be hex value

B4X:

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

Mashiane · Aug 24, 2023

SetAlphaAnimated

B4X:

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

Mashiane · Aug 24, 2023

SetRotationAnimated

B4X:

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

Mashiane · Aug 24, 2023

SetRadiusAnimated

B4X:

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

Mashiane · Aug 24, 2023

SetTextSizeAnimated

B4X:

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

Mashiane · Aug 24, 2023

SetVisibleAnimated

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

Mashiane · Aug 24, 2023

SetScaleAnimated

B4X:

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.

B4J Tutorial [BANano] SetLayoutAnimated & Other Animations

BANanoCSSUtils - Utility Helpers & Animations on any BANanoElement

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Similar Threads

B4J Tutorial [BANano] SetLayoutAnimated & Other Animations

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency