Android Tutorial Android views animation tutorial

Discussion in 'Tutorials & Examples' started by Erel, Dec 19, 2010.

  1. Erel

    Erel Administrator Staff Member Licensed User

    The Animation library allows you to animate views.
    These small animations are really nice and can affect the user overall impression of your application.

    The attached program demonstrates the available types of animations which are:
    Alpha - Causes a fading in or fading out effect.
    Scale - The view's size smoothly changes.
    Rotate - The view rotates.
    Translate - The view moves to a different position.

    [​IMG]

    [​IMG]

    Creating an animation is done in four steps:
    - Declare the animation object.
    - Initialize the object based on the required animation.
    - Set the animation parameters (duration, repeat and repeat mode).
    - Start the animation by calling Start with the target view.

    In this program an animation is attached to each button as its Tag value.
    All the buttons click events are caught with Sub Button_Click.
    In this sub we take the attached animation from the sender button and start it.
    The code for the first five animations and buttons:
    Code:
    Dim a1, a2, a3, a4, a5 As Animation
        
    Activity.LoadLayout("1")
        a1.InitializeAlpha(
    ""10)
        Button1.Tag = a1
        a2.InitializeRotate(
    ""0180)
        Button2.Tag = a2
        a3.InitializeRotateCenter(
    ""0180, Button3)
        Button3.Tag = a3
        a4.InitializeScale(
    ""1100)
        Button4.Tag = a4
        a5.InitializeScaleCenter(
    ""1100, Button4)
        Button5.Tag = a5
        
    Dim animations() As Animation
        animations = 
    Array As Animation(a1, a2, a3, a4, a5)
        
    For i = 0 To animations.Length - 1
            animations(i).Duration = 
    1000
            animations(i).RepeatCount = 
    1
            animations(i).RepeatMode = animations(i).REPEAT_REVERSE
        
    Next
    We are using a temporary array to avoid writing duplicate code.
    Setting RepeatCount to 1 means that each animation will play twice.
    The REPEAT_REVERSE means that the second time the animation will play it will play backwards.

    The animation attached to Button6 is made of 4 chained animations. The button moves down, then left, then up and then right back to the start.
    We are using these animations:
    Code:
    a6.InitializeTranslate("Animation"000dip200dip'we want to catch the AnimationEnd event for these animations
        a7.InitializeTranslate("Animation"0dip200dip, -200dip200dip
        a8.InitializeTranslate(
    "Animation", -200dip200dip, -200dip0dip
        a9.InitializeTranslate(
    "Animation", -200dip0dip0dip0dip)
        Button6.Tag = a6
        animations = 
    Array As Animation(a6, a7, a8, a9)
        
    For i = 0 To animations.Length - 1
            animations(i).Duration = 
    500
        
    Next
    In this case we do not want to repeat each animation.

    Starting the animations:
    Code:
    Sub Button_Click
        
    Dim b As Button
        b = 
    Sender
        
    'Safety check. Not really required in this case.
        If Not(b.Tag Is AnimationThen Return
        
    Dim a As Animation
        a = b.Tag
        a.Start(b)
    End Sub
    Last part if the usage of AnimationEnd event to start the next animation for Button6:
    Code:
    Sub Animation_AnimationEnd
        
    If Sender = a6 Then
            a7.Start(Button6)
        
    Else If Sender = a7 Then
            a8.Start(Button6)
        
    Else If Sender = a8 Then
            a9.Start(Button6)
        
    End If
    End Sub
    This program looks really nice on a real device. It also works on the emulator but the animations are less smooth.
     

    Attached Files:

    walt61 and jsanchezc like this.
  2. susu

    susu Well-Known Member Licensed User

    I use Animation library to animate the activity (main layout, screen size 480x800)

    It works but not scale from center, it's inclined to the right. Can you check again?
     
  3. Erel

    Erel Administrator Staff Member Licensed User

  4. ashrafidkaidek

    ashrafidkaidek Member Licensed User

    :sign0085: Good library, but is there a way to rotate an object (view) around itself for a certain angel (say 45 degrees) and keep it rotated (I don’t want the object to get back to its initial state)? Thanks
     
  5. Erel

    Erel Administrator Staff Member Licensed User

    For now you can't keep it rotated.
    You can use the Canvas object to draw rotated bitmaps and rotated drawables.
     
  6. John de Murga

    John de Murga Member Licensed User

    Is there any way to combine the animations ?

    Say to move to the right and fade away ?
     
  7. John de Murga

    John de Murga Member Licensed User

    Actually, on reading the SDK docs ... I am assume you are using this ?

    2D Graphics | Android Developers

    Even if I could use the xml as in "AnimationUtils.loadAnimation" that would be awesome.

    Then again I guess I can use the reflection API to do this ...
     
  8. Erel

    Erel Administrator Staff Member Licensed User

    Yes, this is the package used. I did intent to include AnimationSet object that will allow animating multiple animations concurrently. However both myself and others have found it to be too buggy at the moment.

    It seems like the complete Android animations package still require some work. The current B4A Animations library is more than a wrapper as it works around an underlying bug related to the views refreshing.
     
  9. Standa

    Standa Member Licensed User

    I want to use this library for animated resizing of button. I think it is the same problem as with rotating, so it is not possible - view is always going back to its initial size/position, right?
    Will it be possible in future?
     
  10. Erel

    Erel Administrator Staff Member Licensed User

    The proper way to do it is to use the EndAnimation event and set the button position and size manually.
     
  11. anaylor01

    anaylor01 Well-Known Member Licensed User

    I have a button that I am trying to do the animation on button5. But I want it to grow to full size and wait a second and then shrink back down to invisible. I am not having much luck. Any help would be greatly appreciated.
     
  12. metrick

    metrick Active Member Licensed User

    Can you post your code to see what kind of help is required.
     
  13. anaylor01

    anaylor01 Well-Known Member Licensed User

    Here is my code. What am I missing?
    Sub Button_Click
    Dim a1, a2, a3, a4, a5 As Animation
    a5.InitializeScaleCenter("", 1, 1, 0, 0, button5)
    Button5.Tag = a5
    Dim animations() As Animation
    animations = Array As Animation(a1, a2, a3, a4, a5)
    For i = 0 To animations.Length - 1
    animations(i).Duration = 1000
    animations(i).RepeatCount = 1
    animations(i).RepeatMode = animations(i).REPEAT_REVERSE
    Next
    a6.InitializeTranslate("Animation", 0, 0, 0dip, 200dip) 'we want to catch the AnimationEnd event for these animations
    a7.InitializeTranslate("Animation", 0dip, 200dip, -200dip, 200dip)
    a8.InitializeTranslate("Animation", -200dip, 200dip, -200dip, 0dip)
    a9.InitializeTranslate("Animation", -200dip, 0dip, 0dip, 0dip)
    ' Button6.Tag = a6
    animations = Array As Animation(a6, a7, a8, a9)
    For i = 0 To animations.Length - 1
    animations(i).Duration = 500
    Next
    Dim b As Button
    b = Sender
    'Safety check. Not really required in this case.
    If Not(b.Tag Is Animation) Then Return
    Dim c As Animation
    c = b.Tag
    c.Start(b)
    End Sub
     
  14. kickaha

    kickaha Well-Known Member Licensed User

    You are missing a basic grasp of what is going on.
     
  15. anaylor01

    anaylor01 Well-Known Member Licensed User

    LOL. Tell me something I don't know. I was able to get the following code to work. My problem is that I want it to start small and grow wait a second and then shrink back down and then go invisible. It also looks like it shrinks up and to the left and I want it to go straight. This is also a button click and I want to be able to just call it without clicking. I am focused on Button5. Any help you can give me would be nice. Besides stating the obvious.

    Sub Button5_Click

    Dim a1, a2, a3, a4, a5 As Animation
    a1.InitializeAlpha("", 1, 0)
    Button1.Tag = a1
    a2.InitializeRotate("", 0, 180)
    Button2.Tag = a2
    a3.InitializeRotateCenter("", 0, 180, Button3)
    Button3.Tag = a3
    a4.InitializeScale("", 1, 1, 0, 0)
    Button4.Tag = a4
    a5.InitializeScaleCenter("", 1, 1, 0, 0, Button4)
    Button5.Tag = a5
    Dim animations() As Animation
    animations = Array As Animation(a1, a2, a3, a4, a5)
    For i = 0 To animations.Length - 1
    animations(i).Duration = 1000
    animations(i).RepeatCount = 1
    animations(i).RepeatMode = animations(i).REPEAT_REVERSE
    Next
    a6.InitializeTranslate("Animation", 0, 0, 0dip, 200dip) 'we want to catch the AnimationEnd event for these animations
    a7.InitializeTranslate("Animation", 0dip, 200dip, -200dip, 200dip)
    a8.InitializeTranslate("Animation", -200dip, 200dip, -200dip, 0dip)
    a9.InitializeTranslate("Animation", -200dip, 0dip, 0dip, 0dip)
    Button6.Tag = a6
    animations = Array As Animation(a6, a7, a8, a9)
    For i = 0 To animations.Length - 1
    animations(i).Duration = 2500
    Next
    Dim b As Button
    'Msgbox(Sender,"test")
    b = Sender
    'Safety check. Not really required in this case.
    If Not(b.Tag Is Animation) Then Return
    Dim c As Animation
    c = b.Tag
    c.Start(b)
    End Sub
     
  16. anaylor01

    anaylor01 Well-Known Member Licensed User

    I got it.
     
  17. anaylor01

    anaylor01 Well-Known Member Licensed User

    I need some help with this. I am trying to call the button click event from a timer event. But I do not understand how the sender event and tag work. Here is my code.

    Dim b As Button
    Msgbox(Sender,"test")
    b = Sender
    'Safety check. Not really required in this case.
    If Not(b.Tag Is Animation) Then Return
    Dim c As Animation
    c = b.Tag
    c.Start(b)
    button5.Visible=False
    End Sub
    Sub tmr_Tick
    tmrtick = tmrtick + 1
    'Msgbox(tmrtick,"test")
    If tmrtick = 3 Then
    button5.Text = tp & " Level " & difficulty
    button5_click
    tmr.Enabled = False
    End If
    End Sub
     
  18. agraham

    agraham Expert Licensed User

    You can call the Click event Sub as a normal Sub but you can't set the Sender. Sender is set by the Basic4android event handling code when real events are raised by a View.
     
  19. anaylor01

    anaylor01 Well-Known Member Licensed User

    So if you look at my code is there anyway to make that work?
     
  20. anaylor01

    anaylor01 Well-Known Member Licensed User

    Can someone help me turn this code into a single panel instead of a button click? Or help me where I can call the button click from another sub.

    Sub Button5_Click
    'button5.Visible = True
    Dim a1, a2, a3, a4, a5 As Animation
    a1.InitializeAlpha("", 1, 0)
    Button5.Tag = a1
    a2.InitializeRotate("", 0, 10)
    button5.Tag = a2
    a3.InitializeRotateCenter("", 0, 0, button5)
    button5.Tag = a3
    a4.InitializeScale("", 1, 1, 0, 0)
    button5.Tag = a4
    a5.InitializeScaleCenter("", 0,0, 1, 1, button5)
    Button5.Tag = a5
    Dim animations() As Animation
    animations = Array As Animation(a1, a2, a3, a4, a5)
    button5.Visible=False
    For i = 0 To animations.Length - 1
    animations(i).Duration = 2500
    animations(i).RepeatCount = 1
    animations(i).RepeatMode = animations(i).REPEAT_REVERSE
    Next

    'Msgbox(animations.Length,"test")
    For i = 0 To animations.Length - 1
    animations(i).Duration = 2500
    Next

    Dim b As Button
    b = Sender
    'Safety check. Not really required in this case.
    If Not(b.Tag Is Animation) Then Return
    Dim c As Animation
    c = b.Tag
    c.Start(b)
     
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