Android Question Using SetLayoutAnimated to zoom in/out at a certain point

[wimpie3]

I'm trying to convert old code which was using nineoldandroids animations to the new SetLayoutAnimated function.

Nineoldandroids could zoom in and out around a certain point on the screen using setPivotX and setPivotY.

This isn't supported by SetLayoutAnimated - only left/top/width/height can be used - so I think I'll be needing transformation matrices.

I've already lost several hours trying to get the maths right... has anyone done this before?

 

[wimpie3]

Of course I have used the search function before asking my question. This is not what I'm looking for. I need to zoom in on a certain location, not on the center.

 

[Erel]

It will be simpler to use AnimationPlus: https://www.b4x.com/android/forum/threads/lib-animationplus.21313/#content

 

[LucaMs]

It will be simpler to use AnimationPlus: https://www.b4x.com/android/forum/threads/lib-animationplus.21313/#content

@wimpie3 used NineOldAndroids, which is better than AnimationPlus, but he wants to avoid using these libraries (I assume he wants to create a B4XPages project; I would )

 

[wimpie3]

Correct. What I want can be done with some maths using the standard functions of B4A, so I'd rather avoid using a library for that.

 

[Erel]

Private Sub Button1_Click
    Dim v As B4XView = Sender
    ScaleView(v, 1000, 2, v.Width, v.Height) 'bottom right corner
    Sleep(1000)
    ScaleView(v, 1000, 0.5, v.Width / 2, v.Height / 2) 'center
    Sleep(1000)
    ScaleView(v, 1000, 2, 0, 0) 'top left
End Sub

Private Sub ScaleView(View As B4XView, Duration As Int, ScaleRatio As Float, PivotX As Int, PivotY As Int)
    Dim dx As Float = ScaleRatio * PivotX - PivotX
    Dim dy As Float = ScaleRatio * PivotY - PivotY
    View.SetLayoutAnimated(Duration, View.Left - dx, View.Top - dy, _
        View.Width * ScaleRatio, View.Height * ScaleRatio)
End Sub

 

[LucaMs]

B4J - Strangely, there remain "shadows" of the positions/dimensions before the end of the animation.

 

[Erel]

I see it too. Looks like a bug in JavaFX related to the blue focus border.

It is not related to this specific code. You can force it to refresh with:

Root.As(Pane).Alpha = 0.99
Sleep(20)
Root.As(Pane).Alpha = 1.00

 

[LucaMs]

I see it too. Looks like a bug in JavaFX related to the blue focus border.

It is not related to this specific code. You can force it to refresh with:

Root.As(Pane).Alpha = 0.99
Sleep(20)
Root.As(Pane).Alpha = 1.00

.As(Pane)...
You've already memorized and... "metabolized" that new feature

 

[wimpie3]

Thank you so much @Erel, this works fine!

Just a little side-remark. I have no clue on how SetLayoutAnimated works behind the curtains, but since it's the only way we can animate views on all three platforms, would it be possible to add some kind of (optional) easing on the animation? That would give the animations a more professional look. Thanks!

Also: how can the animation be stopped? It seems that when the view gets removed WHILE the animation is playing, the animation is stopped as well. Is this correct?

 

[Erel]

Also: how can the animation be stopped? It seems that when the view gets removed WHILE the animation is playing, the animation is stopped as well. Is this correct?

There is no built-in stop method.
You will need to test it in all platforms.

If you want to create more custom animations then you can always create them yourself using Sleep.
Example with in/out easing: https://www.b4x.com/android/forum/threads/b4x-xui-custom-view-circularprogressbar.81604/