Android Question [B4X] Scale Animation with SetLayoutAnimated

Alexander Stolte

Expert
Licensed User
Longtime User
Hello, how can i Do this Animation with myview. SetLayoutAnimated?
ezgif.com-video-to-gif.gif
 
They are more animation put together in sequence.
So you should separate each other from a pause so that each starts only after you have finished the previous comma for example
Code:
SetLayoutAnimated(200,Left,Top,w1,h1)
Sleep(220)
SetLayoutAnimated(150,Left2,Top2,w2,H2)
Sleep(170)
....
Clearly to have the effect that you see in the image the animations and breaks are very short, I think you have less than 150 milliseconds for each movement.

However, I tried to do something similar, on my library. With him quite complex because sometimes animation overlap and then I used the native command with JavaObject and NativeObject
 
Upvote 0
Code:
Sub AnimateView(View As B4XView, Duration As Int, Left As Int, Top As Int, Width As Int, Height As Int)
   Dim cx As Int = Left + Width / 2
   Dim cy As Int = Top + Height / 2
   View.SetLayoutAnimated(0, cx, cy, 0, 0)
   Dim start As Long = DateTime.Now
   Do While DateTime.Now < start + Duration
       Dim p As Float = (DateTime.Now - start) / Duration
       Dim f As Float = 1 - Cos(p * 3 * cPI) * (1 - p)
       Dim w As Int = Width * f
       Dim h As Int = Height * f
       View.SetLayoutAnimated(0, cx - w / 2, cy - h / 2, w, h)
       Sleep(16)
   Loop
   View.SetLayoutAnimated(0, Left, Top, Width, Height)
End Sub

Not exactly the same.
 
Upvote 0
Code:
Sub AnimateView(View As B4XView, Duration As Int, Left As Int, Top As Int, Width As Int, Height As Int)
   Dim cx As Int = Left + Width / 2
   Dim cy As Int = Top + Height / 2
   View.SetLayoutAnimated(0, cx, cy, 0, 0)
   Dim start As Long = DateTime.Now
   Do While DateTime.Now < start + Duration
       Dim p As Float = (DateTime.Now - start) / Duration
       Dim f As Float = 1 - Cos(p * 3 * cPI) * (1 - p)
       Dim w As Int = Width * f
       Dim h As Int = Height * f
       View.SetLayoutAnimated(0, cx - w / 2, cy - h / 2, w, h)
       Sleep(16)
   Loop
   View.SetLayoutAnimated(0, Left, Top, Width, Height)
End Sub

Not exactly the same.

I was trying a similar animation and got a strage different effect, using b4a & b4j.
Searching, I found this Erel's routine and... same problem: the animation is different on the two platforms.
 
Upvote 0
I was trying a similar animation and got a strage different effect, using b4a & b4j.
Searching, I found this Erel's routine and... same problem: the animation is different on the two platforms.
b4a.gif
b4j.gif


This is the Erel's routine (left: B4A - right: B4J). Mine gives even worse results (instead of widening and thinning, it move "itself" - same b4x routine, of course).
 
Last edited:
Upvote 0
The B4J gif looks fine except of the first frame. Is that the problem?
With your routine, as you can see, the problem occurs randomly.

Wtih my routine, which sets a wider and lower layout, after which it returns to the initial size, in a loop, the animation is perfect with B4A, while with B4J, instead of changing the size, the B4XView is moved (bottom left).

1.gif
b4j.gif



P.S. Here the original view is a Button, instead of an ImageView.
 
Last edited:
Upvote 0
Back
Top