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,604
  • Animation.apk
    77.1 KB · Views: 2,879
Click to expand...
P

Pintinho

Member
Licensed User
Longtime User
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!
 
Last edited:
P

Pintinho

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

jyounger

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

kiki78

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

Informatix

Expert
Licensed User
Longtime User
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.
Click to expand...

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

kiki78

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

MaxApps

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

MaxApps

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

MaFu

Well-Known Member
Licensed User
Longtime User
Informatix said:
Note that I send to all donors of AnimationPlus a library for animations called NineOldAndroids that is not affected by this problem.
Click to expand...
When did you send the mail? I haven't receive one.
 
You must log in or register to reply here.
Top