Android Question [Solved]Is there strategy get css to creating b4xcustomview?

[Theera]

Refer.to this website. https://prismic.io/blog/css-button-animations

 

[DonManfred]

They may only work in a Webview. it will not work in a Customview probably.
But i´m not sure about it will work in an android webview at all.

Probably best is to forget about it.

 

[LucaMs]

Delegate the work to some AI (ChatGPT?), pass it a CSS file, and tell it to create the same animation in B4X.

Ways to use CSS directly... I don't know, probably only in B4J.

 

[Theera]

Delegate the work to some AI (ChatGPT?), pass it a CSS file, and tell it to create the same animation in B4X.

Ways to use CSS directly... I don't know, probably only in B4J.

Perhaps, I will try to.send B4XUISwitch and css file to ChatGPT, helps create animation some code addition in B4XUISwitch. Many thanks all of you.

 

[LucaMs]

Perhaps, I will try to.send B4XUISwitch and css file to ChatGPT, helps create animation some code addition in B4XUISwitch. Many thanks all of you.

Please note that it is not "very correct" to mark your posts as "Solution"

 

[Theera]

It 's better, if having tool.

' ===============================================
' Convert.CSS Animations to be B4X Code.
' ===============================================

' 1. CSS FADE IN/OUT → B4X
' CSS:
' .fade-in {
'   opacity: 0;
'   animation: fadeIn 1s ease-in-out forwards;
' }
' @keyframes fadeIn {
'   to { opacity: 1; }
' }

Sub FadeInAnimation(View As View)
    View.Alpha = 0  ' เริ่มต้นที่โปร่งใส
   
    ' สร้าง Animation
    Dim fadeIn As Animation
    fadeIn.InitializeAlpha("fadeIn", 0, 1)  ' จาก 0 ไป 1
    fadeIn.Duration = 1000  ' 1 วินาที
    fadeIn.Start(View)
End Sub

Sub FadeOutAnimation(View As View)
    Dim fadeOut As Animation
    fadeOut.InitializeAlpha("fadeOut", 1, 0)  ' จาก 1 ไป 0
    fadeOut.Duration = 1000
    fadeOut.Start(View)
End Sub

' ===============================================
' 2. CSS SLIDE ANIMATION → B4X
' CSS:
' .slide-left {
'   transform: translateX(-100%);
'   animation: slideIn 0.5s ease-out forwards;
' }
' @keyframes slideIn {
'   to { transform: translateX(0); }
' }

Sub SlideInFromLeft(View As View)
    ' เริ่มต้นที่ตำแหน่งซ้าย
    View.Left = -View.Width
   
    Dim slideIn As Animation
    slideIn.InitializeTranslate("slideIn", -View.Width, 0, 0, 0)
    slideIn.Duration = 500
    slideIn.Start(View)
End Sub

Sub SlideOutToRight(View As View)
    Dim slideOut As Animation
    slideOut.InitializeTranslate("slideOut", 0, View.Width, 0, 0)
    slideOut.Duration = 500
    slideOut.Start(View)
End Sub

' ===============================================
' 3. CSS SCALE ANIMATION → B4X
' CSS:
' .scale-up {
'   transform: scale(0);
'   animation: scaleUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
' }
' @keyframes scaleUp {
'   to { transform: scale(1); }
' }

Sub ScaleUpAnimation(View As View)
    Dim scaleUp As Animation
    scaleUp.InitializeScale("scaleUp", 0, 0, 1, 1)  ' จาก scale 0 ไป 1
    scaleUp.Duration = 300
    scaleUp.Start(View)
End Sub

Sub ScaleDownAnimation(View As View)
    Dim scaleDown As Animation
    scaleDown.InitializeScale("scaleDown", 1, 1, 0, 0)
    scaleDown.Duration = 300
    scaleDown.Start(View)
End Sub

' ===============================================
' 4. CSS ROTATION → B4X
' CSS:
' .rotate {
'   animation: rotate 2s linear infinite;
' }
' @keyframes rotate {
'   from { transform: rotate(0deg); }
'   to { transform: rotate(360deg); }
' }

Sub RotateAnimation(View As View)
    Dim rotate As Animation
    rotate.InitializeRotate("rotate", 0, 360)  ' หมุน 360 องศา
    rotate.Duration = 2000  ' 2 วินาที
    rotate.RepeatCount = -1  ' วนซ้ำไม่สิ้นสุด
    rotate.Start(View)
End Sub

' ===============================================
' 5. CSS COMPLEX ANIMATION → B4X Sequential
' CSS:
' .complex {
'   animation:
'     fadeIn 0.5s ease-in,
'     slideUp 0.5s 0.5s ease-out,
'     bounce 0.3s 1s ease-in-out;
' }

Sub ComplexAnimation(View As View)
    ' Step 1: Fade In
    View.Alpha = 0
    Dim fadeIn As Animation
    fadeIn.InitializeAlpha("", 0, 1)
    fadeIn.Duration = 500
    fadeIn.Start(View)
   
    ' Step 2: Slide Up (หลังจาก 500ms)
    Sleep(500)
    Dim slideUp As Animation
    slideUp.InitializeTranslate("", 0, 0, 0, -50)
    slideUp.Duration = 500
    slideUp.Start(View)
   
    ' Step 3: Bounce (หลังจาก 1000ms)
    Sleep(500)
    BounceAnimation(View)
End Sub

Sub BounceAnimation(View As View)
    ' จำลอง CSS bounce effect
    Dim bounce As Animation
    bounce.InitializeScale("", 1, 1, 1.1, 1.1)
    bounce.Duration = 150
    bounce.RepeatMode = "REVERSE"
    bounce.RepeatCount = 1
    bounce.Start(View)
End Sub

' ===============================================
' 6. สร้าง Designer Properties สำหรับ Animation
' ===============================================

#DesignerProperty: Key: AnimationType, DisplayName: Animation Type, FieldType: String, DefaultValue: fade, List: fade|slide|scale|rotate
#DesignerProperty: Key: AnimationDuration, DisplayName: Duration (ms), FieldType: Int, DefaultValue: 500
#DesignerProperty: Key: AnimationDelay, DisplayName: Delay (ms), FieldType: Int, DefaultValue: 0
#DesignerProperty: Key: AutoStart, DisplayName: Auto Start, FieldType: Boolean, DefaultValue: True

Private Sub DesignerCreateView (Base As Panel, Lbl As Label, Props As Map)
    ' อ่านค่าจาก Designer Properties
    Dim animType As String = Props.Get("AnimationType")
    Dim duration As Int = Props.Get("AnimationDuration")
    Dim delay As Int = Props.Get("AnimationDelay")
    Dim autoStart As Boolean = Props.Get("AutoStart")
   
    ' เริ่ม animation ตาม properties
    If autoStart Then
        If delay > 0 Then Sleep(delay)
       
        Select animType
            Case "fade"
                FadeInAnimation(Base)
            Case "slide"
                SlideInFromLeft(Base)
            Case "scale"
                ScaleUpAnimation(Base)
            Case "rotate"
                RotateAnimation(Base)
        End Select
    End If
End Sub

' ===============================================
' 7. CSS KEYFRAMES → B4X Sequential Animations
' ===============================================

' CSS:
' @keyframes pulse {
'   0% { transform: scale(1); opacity: 1; }
'   50% { transform: scale(1.1); opacity: 0.7; }
'   100% { transform: scale(1); opacity: 1; }
' }

Sub PulseAnimation(View As View)
    ' สร้าง AnimationSet สำหรับ animation หลายตัว
    Dim pulseScale As Animation
    Dim pulseAlpha As Animation
   
    ' 0% → 50%
    pulseScale.InitializeScale("", 1, 1, 1.1, 1.1)
    pulseAlpha.InitializeAlpha("", 1, 0.7)
    pulseScale.Duration = 250
    pulseAlpha.Duration = 250
   
    ' เริ่ม animation พร้อมกัน
    pulseScale.Start(View)
    pulseAlpha.Start(View)
   
    ' 50% → 100% (หลังจาก 250ms)
    Sleep(250)
    pulseScale.InitializeScale("", 1.1, 1.1, 1, 1)
    pulseAlpha.InitializeAlpha("", 0.7, 1)
    pulseScale.Duration = 250
    pulseAlpha.Duration = 250
    pulseScale.Start(View)
    pulseAlpha.Start(View)
End Sub

' ===============================================
' 8. CSS EASING → B4X Interpolator
' ===============================================

Sub EasingAnimation(View As View)
    Dim anim As Animation
    anim.InitializeTranslate("", 0, 100, 0, 0)
    anim.Duration = 1000
   
    ' CSS ease-in-out ≈ AccelerateDecelerateInterpolator
    ' CSS ease-in ≈ AccelerateInterpolator 
    ' CSS ease-out ≈ DecelerateInterpolator
    ' CSS linear ≈ LinearInterpolator
   
    anim.Start(View)
End Sub

' ===============================================
' 9. การใช้งานใน Custom View
' ===============================================

Sub Class_Globals
    Private mBase As Panel
    Private mEventName As String
    Private mCallBack As Object
   
    ' Animation related
    Private currentAnimation As Animation
    Private animationQueue As List
End Sub

Public Sub Initialize (Callback As Object, EventName As String)
    mEventName = EventName
    mCallBack = Callback
    animationQueue.Initialize
End Sub

Public Sub StartCSSLikeAnimation(animationType As String, duration As Int)
    Select animationType.ToLowerCase
        Case "fadein"
            FadeInAnimation(mBase)
        Case "slideup"
            SlideUpAnimation(mBase)
        Case "zoomin"
            ScaleUpAnimation(mBase)
        Case "rotate"
            RotateAnimation(mBase)
        Case "pulse"
            PulseAnimation(mBase)
    End Select
End Sub

' ===============================================
' 10. ตัวอย่างการใช้งานจริง
' ===============================================

' ใน Activity หรือ Fragment
Sub Button1_Click
    ' เรียกใช้ animation จาก Custom View
    CustomView1.StartCSSLikeAnimation("fadeIn", 500)
End Sub

' สร้าง chain animations (เหมือน CSS animation-delay)
Sub ChainAnimations
    FadeInAnimation(Panel1)
    Sleep(200)  ' delay 200ms
    SlideInFromLeft(Panel2)
    Sleep(200)
    ScaleUpAnimation(Panel3)
End Sub