Android Tutorial Android views animation tutorial

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.

animation_2.png


animation_1.png


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:
B4X:
    Dim a1, a2, a3, a4, a5 As Animation
    Activity.LoadLayout("1")
    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
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:
B4X:
    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
In this case we do not want to repeat each animation.

Starting the animations:
B4X:
Sub Button_Click
    Dim b As Button
    b = Sender
    'Safety check. Not really required in this case.
    If Not(b.Tag Is Animation) Then 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:
B4X:
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.
 

Attachments

  • AnimationExample.zip
    10.6 KB · Views: 6,596
  • Animation.apk
    77.1 KB · Views: 2,871

susu

Well-Known Member
Licensed User
Longtime User
I use Animation library to animate the activity (main layout, screen size 480x800)

Ani.InitializeScaleCenter("", 0,0,1,1, Activity)

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

ashrafidkaidek

Member
Licensed User
Longtime 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
 

Erel

B4X founder
Staff member
Licensed User
Longtime 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.
 

Standa

Member
Licensed User
Longtime 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
For now you can't keep it rotated.
You can use the Canvas object to draw rotated bitmaps and rotated drawables.
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?
 

anaylor01

Well-Known Member
Licensed User
Longtime 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.
 

metrick

Active Member
Licensed User
Longtime 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.

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

anaylor01

Well-Known Member
Licensed User
Longtime 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
 

anaylor01

Well-Known Member
Licensed User
Longtime 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
 

anaylor01

Well-Known Member
Licensed User
Longtime 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
 

anaylor01

Well-Known Member
Licensed User
Longtime 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)
 
Top