Android Question [B4X] Scale Animation with SetLayoutAnimated

Discussion in 'Android Questions' started by Alexander Stolte, Nov 14, 2018.

Tags:
  1. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    Hello, how can i Do this Animation with myview. SetLayoutAnimated?
    ezgif.com-video-to-gif.gif
     
  2. Erel

    Erel Administrator Staff Member Licensed User

    Are you asking about the scaling effect or the damping (spring) effect?
     
  3. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    about the damping effect.
     
  4. Star-Dust

    Star-Dust Expert Licensed User

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

    Erel Administrator Staff Member Licensed User

    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, 00)
       
    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.
     
  6. LucaMs

    LucaMs Expert Licensed User

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

    LucaMs Expert Licensed User

    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: Apr 28, 2019
  8. Erel

    Erel Administrator Staff Member Licensed User

    The B4J gif looks fine except of the first frame. Is that the problem?
     
  9. LucaMs

    LucaMs Expert Licensed User

    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: Apr 28, 2019
    Alexander Stolte likes this.
  10. LucaMs

    LucaMs Expert Licensed User

    Using an ImageView (B4XView, of course) this is the result (B4J): b4j.gif
     
  11. Erel

    Erel Administrator Staff Member Licensed User

    Please start a new thread in the B4J forum and upload the code that produces the above gif.
     
  12. LucaMs

    LucaMs Expert Licensed User

    Solved by @LordZenzo: in B4J you have to deselect "Preserve Ratio".
     
    Alexander Stolte, Erel and LordZenzo like this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice