Android Question [solved] "SetTextSizeAnimated" is too jerky

[fredo]

Remark: There have been several suggestions on this subject in the past that have not been successful in this particular case

In this usecase a text is to be moved from A to B over the screen, whereby the text size increases continuously.


"A Cosmic Laboratory: LHA 120-N 150" flickr photo by NASA Goddard Photo and Video shared under a Creative Commons (BY) license

anim2

World's leading screen capture + recorder from Snagit + Screencast by Techsmith. Capture, edit and share professional-quality content seamlessly.

www.screencast.com

Spoiler: The code

#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: portrait
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: true 
    #IncludeTitle: false 
#End Region

Sub Process_Globals
    Private xui As XUI
    Private ImageLoopIndex As Int
End Sub

Sub Globals
    Private Label1 As B4XView
    Private Label2 As B4XView
    Private ImageView1 As B4XView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout1")

    Label1.Text = "LHA 120-N 150"
    Label1.Top = 50%y -Label1.Height/2
    Label1.TextSize = 4
  
    Label2.Text = "NGC 2070"
    Label2.Top = 50%y -Label2.Height/2
    Label2.TextSize = 4

  
    FillImageToView(xui.LoadBitmap(File.DirAssets, "49674241522_657fb7a13d_c.jpg"), ImageView1) ' https://www.flickr.com/photos/gsfc/49674241522/
    #if B4A
    Dim iv As ImageView = ImageView1
    iv.Gravity = Gravity.FILL
    #End If
    Label1.TextColor = xui.Color_White
    Label2.TextColor = xui.Color_White
  

End Sub

Sub Activity_Resume

    Label1.SetLayoutAnimated(20000, Label1.Left, 0, Label1.Width, Label1.Height) ' Move to top
    Label1.SetTextSizeAnimated(20000, 36)
  
    Label2.SetLayoutAnimated(20000, Label2.Left, 100%y -Label2.Height, Label2.Width, Label2.Height) ' Move to bottom
  
    ImageLoop2
  
End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub FillImageToView(bmp As B4XBitmap, ImageView As B4XView)
    ' Erel --> https://www.b4x.com/android/forum/threads/b4x-xui-fill-and-fit-images-without-distortion.86627/#content
    Dim bmpRatio As Float = bmp.Width / bmp.Height
    Dim viewRatio As Float = ImageView.Width / ImageView.Height
    If viewRatio > bmpRatio Then
        Dim NewHeight As Int = bmp.Width / viewRatio
        bmp = bmp.Crop(0, bmp.Height / 2 - NewHeight / 2, bmp.Width, NewHeight)
    Else if viewRatio < bmpRatio Then
        Dim NewWidth As Int = bmp.Height * viewRatio
        bmp = bmp.Crop(bmp.Width / 2 - NewWidth / 2, 0, NewWidth, bmp.Height)
    End If
    Dim scale As Float = 1
    #if B4i
    scale = GetDeviceLayoutValues.NonnormalizedScale
    #End If
    ImageView.SetBitmap(bmp.Resize(ImageView.Width * scale, ImageView.Height * scale, True))
End Sub

' ---------------------------------------

Sub ImageLoop2 As ResumableSub
  
    Dim TextsizeBig As Float = 40
    Dim TextsizeDelta As Float = 0.03
    Dim TextsizeAct As Float = 4
    Dim Label2Complete As Boolean = False
  
  
    ImageLoopIndex = ImageLoopIndex + 1
    Dim MyIndex As Int = ImageLoopIndex
    Dim Scale As Float = 1
    Dim delta As Float = 0.0005 '<---- this defines the image zoom-rate
    Dim BaseWidth As Int = Activity.Width
    Dim BaseHeight As Int = Activity.Height
  
    Do While MyIndex = ImageLoopIndex
      
        ' --- Label2 "grows"
        If Not(Label2Complete) Then
            Label2Complete = ( TextsizeAct >= TextsizeBig )
            TextsizeAct = TextsizeAct + TextsizeDelta
            Label2.SetTextSizeAnimated(0, TextsizeAct)
        End If
      
        ' --- Image "zoom pump"
        If Scale >= 1.4 Then
            delta = -Abs(delta)
        Else If Scale <= 1 Then
            delta = Abs(delta)
        End If
        Scale = Scale + delta
        ImageView1.SetLayoutAnimated(0, BaseWidth / 2 - BaseWidth * Scale / 2, BaseHeight / 2 - BaseHeight * Scale / 2, BaseWidth * Scale, BaseHeight * Scale)

      
        Sleep(0)
    Loop
    Return Null
End Sub

Since "SetTextSizeAnimated" gives a jerky result (see upper label), a continuous change was tried for the lower label by means of a loop. Unfortunately without significant improvement.


Does anyone have an idea how to achieve a smoother change in position and size?



[Testproject attached]

 

[Erel]

Try to draw the large text with B4XCanvas, get the bitmap, put it in an ImageView and use ImageView.SetLayoutAnimated.

You can also use Label.Snapshot instead of the canvas.

 

[fredo]

use Label.Snapshot

Thank you! The movement is very smooth and the bitmap even respects the transparency...

Spoiler: The new code

#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: portrait
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: true   
    #IncludeTitle: false   
#End Region

Sub Process_Globals
    Private xui As XUI
    Private ImageLoopIndex As Int
    
End Sub

Sub Globals
    Private ImageView1 As B4XView
    Private Label1 As B4XView
    Private Label2 As B4XView
    Private ImageView2ForLabel2 As B4XView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout1")

    Label1.Text = "LHA 120-N 150"
    Label1.Top = 50%y -Label1.Height/2
    Label1.TextSize = 4
    
    Label2.Text = "NGC 2070"
    Label2.Top = 50%y -Label2.Height/2

    ' -- Make snapshot of maximized text
    Label2.TextSize = 40
    ImageView2ForLabel2.Visible = False
    ImageView2ForLabel2.SetLayoutAnimated(0, 50%x, 50%y, 1dip, 1dip)
    ImageView2ForLabel2.SetBitmap(Label2.Snapshot)
    ImageView2ForLabel2.Visible = True
    Label2.Visible = False
    
    FillImageToView(xui.LoadBitmap(File.DirAssets, "49674241522_657fb7a13d_c.jpg"), ImageView1) ' https://www.flickr.com/photos/gsfc/49674241522/
    #if B4A
    Dim iv As ImageView = ImageView1
    iv.Gravity = Gravity.FILL
    #End If
    

End Sub

Sub Activity_Resume

    ' --- Move and grow text via "SetLayoutAnimated"
    Label1.SetLayoutAnimated(20000, Label1.Left, 0, Label1.Width, Label1.Height) ' Move to top
    Label1.SetTextSizeAnimated(20000, 36)
    
    ' --- Move and grow via "snapshot of text "
    ImageView2ForLabel2.SetLayoutAnimated(20000, Label2.Left, 100%y -Label2.Height, Label2.Width, Label2.Height) ' Move to bottom
    
    ImageLoop2
    
End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub FillImageToView(bmp As B4XBitmap, ImageView As B4XView)
    ' Erel --> https://www.b4x.com/android/forum/threads/b4x-xui-fill-and-fit-images-without-distortion.86627/#content
    Dim bmpRatio As Float = bmp.Width / bmp.Height
    Dim viewRatio As Float = ImageView.Width / ImageView.Height
    If viewRatio > bmpRatio Then
        Dim NewHeight As Int = bmp.Width / viewRatio
        bmp = bmp.Crop(0, bmp.Height / 2 - NewHeight / 2, bmp.Width, NewHeight)
    Else if viewRatio < bmpRatio Then
        Dim NewWidth As Int = bmp.Height * viewRatio
        bmp = bmp.Crop(bmp.Width / 2 - NewWidth / 2, 0, NewWidth, bmp.Height)
    End If
    Dim scale As Float = 1
    #if B4i
    scale = GetDeviceLayoutValues.NonnormalizedScale
    #End If
    ImageView.SetBitmap(bmp.Resize(ImageView.Width * scale, ImageView.Height * scale, True))
End Sub

' ---------------------------------------

Sub ImageLoop2 As ResumableSub
    
    ImageLoopIndex = ImageLoopIndex + 1
    Dim MyIndex As Int = ImageLoopIndex
    Dim Scale As Float = 1
    Dim delta As Float = 0.0005 '<---- this defines the image zoom-rate
    Dim BaseWidth As Int = Activity.Width
    Dim BaseHeight As Int = Activity.Height
    
    Do While MyIndex = ImageLoopIndex
        
        ' --- Image "zoom pump"
        If Scale >= 1.4 Then
            delta = -Abs(delta)
        Else If Scale <= 1 Then
            delta = Abs(delta)
        End If
        Scale = Scale + delta
        ImageView1.SetLayoutAnimated(0, BaseWidth / 2 - BaseWidth * Scale / 2, BaseHeight / 2 - BaseHeight * Scale / 2, BaseWidth * Scale, BaseHeight * Scale)

        Sleep(0)
    Loop
    Return Null
End Sub