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.

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:

    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:

    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:

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:

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.

 

[susu]

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?

 

[Erel]

Again you are correct. This bug is now fixed: http://www.b4x.com/forum/additional...tes/6968-new-animation-library.html#post40138

 

[ashrafidkaidek]

: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]

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

 

[John de Murga]

Is there any way to combine the animations ?

Say to move to the right and fade away ?

 

[John de Murga]

Is there any way to combine the animations ?

Say to move to the right and fade away ?

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

 

[Erel]

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]

: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?

 

[Erel]

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

 

[anaylor01]

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]

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]

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

 

[kickaha]

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

 

[anaylor01]

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]

I got it.

 

[anaylor01]

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

 

[agraham]

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.

 

[anaylor01]

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

 

[anaylor01]

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)