Android Tutorial Android views animation tutorial

Erel · Dec 19, 2010

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:

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.

Erel · Aug 5, 2013

Can you post the code in AnimationEnd?

Pintinho · Aug 5, 2013

Hi Erel
Here it goes...
The orig.. values, I save them before I call the animation and ImgBtn is a BitMapDrawable. I have ran it in Debug and put a breakpoint here to make sure it would go through, and it does, but as if nothing... I wonder if it has to do with the Imgbtn.. I define it earlier like this:

B4X:

Imgbtn.Initialize(LoadBitmap(File.DirAssets, "App_SoundMatch_Creambutton.png"))

B4X:

Sub animBtnReset_AnimationEnd
   'Because there is a strange problem to the scale, the button is truncated
   'we are resetting the button at the end of the animation to make sure it does not
   'happen
     btnSel.Height = origBtnHeight
     btnSel.Width = origBtnWidth
     btnSel.Background = Imgbtn 
 
End Sub

Thanks for your help!

Erel · Aug 5, 2013

Please use [ code ] [ /code ] tags (without spaces) when posting code.

wonder if it has to do with the Imgbtn

Most probably.
1. The default button background is made of a StateListDrawable.
2. The image is probably larger than the previous background.

Pintinho · Aug 9, 2013

Indeed it seems that the problem was to do with the image itself!
I apologize to have entered this issue under this thread - somehow the image was being "corrupted" elsewhere in the program - I reloaded the image and it works fine now.
Thanks for your help!

jyounger · Mar 4, 2014

Erel,

I have a panel that is hiding down below the activity. I have a button click event start an animation to slide the panel up. About 40-50% of the time, if not more, the animation to slide up does not start. The animation start is hung waiting for something, who knows what. Sometimes it starts, and it looks great. However, it is not reliable. Why is this? Something seems to be preempting the animation from starting. I do have an adview in the main activity. I wonder if it is a threading thing?

Interestingly, the slide down animation works every time.

Erel · Mar 5, 2014

Please start a new thread for this question and if possible upload your project (File - Export as zip).

kiki78 · Mar 31, 2014

Hi Erel,

May we expect, in future release of Animation, that we can pass "EventObject" in Initialize, and so receive Animation event inside Class, and so use it, for example, in custom views ?

I suppose you use Animator as base for this library.
I see that we must implement AnimatorListener interface to receive events, but I don't know how to do that, if possible, with reflexion.

Regards

Erel · Apr 1, 2014

You can already use it with custom views. Just declare the animation object in the class.

Informatix · Apr 1, 2014

kiki78 said:
May we expect, in future release of Animation, that we can pass "EventObject" in Initialize, and so receive Animation event inside Class, and so use it, for example, in custom views ?

I suppose you use Animator as base for this library.
I see that we must implement AnimatorListener interface to receive events, but I don't know how to do that, if possible, with reflexion.

The Animation lib (and my AnimationPlus library) are not based on the Animator class. They use the animation methods of the View class and thus are limited to what this class provides.

kiki78 · Apr 1, 2014

I put Animation in class to move object and stay in end position.
I had problem of flashing at the end, and stupidly in think AnimationEnd doesn't fire in class.
It just fired to late to correctly change position of view.

Thank you Informatix, AnimationPlus PersistAfter property solve my problem.

Kind Regards

MaxApps · Jun 15, 2014

Hi

When moving an imageview, with animation translate, I am unable to use ImageView_Click.
It seem like the position is not updated, until the animation has ended.
Is there a way around this?

Kind regards
Jakob

Erel · Jun 15, 2014

This is correct. The actual position is not updated during the animation. You should use AnimationEnd event to update the position to the target position.

MaxApps · Jun 15, 2014

Ok.
I have 20 items (imageviews) that floats slowly around. Is there any way to register, if the user clicks any of them?

Erel · Jun 15, 2014

You will need to use a timer to break the animation into several smaller animations.

Informatix · Jun 16, 2014

Note that I send to all donors of AnimationPlus a library for animations called NineOldAndroids that is not affected by this problem.

MaFu · Jun 16, 2014

Informatix said:
Note that I send to all donors of AnimationPlus a library for animations called NineOldAndroids that is not affected by this problem.

When did you send the mail? I haven't receive one.

Informatix · Jun 16, 2014

MaFu said:
When did you send the mail? I haven't receive one.

I didn't send any email. As said on the first post of the thread: "Past donors will receive a free copy of the library on request."

MaFu · Jun 16, 2014

Sorry, i have overlooked that. Please can you send me the lib?

Informatix · Jun 16, 2014

MaFu said:
Sorry, i have overlooked that. Please can you send me the lib?

Of course.

LucaMs · Oct 6, 2014

Maybe I'm wrong, but it seems to me that the AnimationEnd event do not raises if the view is initially set to invisible or if it is off the screen.

Android Tutorial Android views animation tutorial

Attachments

B4X founder

Member

B4X founder

Member

Member

B4X founder

Active Member

B4X founder

Expert

Active Member

Active Member

B4X founder

Active Member

B4X founder

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Expert

Privacy & Transparency

Privacy & Transparency