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.

enrique1 · Aug 7, 2011

Stop Animation

Hi,

A question: I want to do a rotate animation, but when the animation has finished, the view return to the originial position.

What can I do to set the final view position??

Thx!

enrique1 · Aug 7, 2011

Ok

enrique1 said:
Hi,

A question: I want to do a rotate animation, but when the animation has finished, the view return to the originial position.

What can I do to set the final view position??

Thx!

Ok.. Sorry, I answer to myself reading again:

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

I'll try to set the new position with EndAnimation event.

enrique1 · Aug 7, 2011

enrique1 said:
Ok.. Sorry, I answer to myself reading again:

I'll try to set the new position with EndAnimation event.

And sorry, could you write the EndAnimation event?

Something like this?:

¿¿ Sub eventName_EndAnimation
End Sub ??

Erel · Aug 8, 2011

It is AnimationEnd not EndAnimation. You can see the list of events here: Basic4android - Animation
Or in the IDE you can write Sub followed by space and then tab. It will show you the available events.

Widget · Aug 26, 2011

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 AnimationEnd works fine for animating a few views. But I am animating 50 objects and each object may have 5 or 6 animations. I have two lists, lstView that contains a type structure describing the object, and this structure has another list called lstAnim that contains the animations that this View will go through.

When an animation ends, how can I easily determine which View the animation belongs to? The Sender in _AnimationEnd is Animation and there is no Animation.Tag property so I can't point back to the View that was animated. The only thing I can think of is to have two nested loops. The first loop traverses through lstView and for each lstView entry then loop through each lstAnim looking for Sender. I don't know if this will be fast enough. Is there a faster way to find the View for Sender inside of _AnimationEnd?

Widget

Hint: It would be nice if Animation had a View or Parent property so I could easily know what was being animated.

Erel · Aug 27, 2011

Hint: It would be nice if Animation had a View or Parent property so I could easily know what was being animated.

I agree, however it is technically not possible due to the way that the native Animation objects work.

You can create a Map object that will store the animations as keys and the views as values. It will allow you to easily find the view.

Widget · Aug 29, 2011

Erel,
I took your advice and used a Map (for the first time) and it worked like a charm. Many thanks. It didn't occur to me a Map could index an object (very neat) because I thought it was restricted to only strings and numbers.

I have a question that is more related to Lists/Maps but also concerns Animations, so I thought I'd ask it here. I have a List that I add Animation objects to using something like:

B4X:

sub Globals
  dim lstAnims as List
  lstAnims.Initialize
end sub

Sub Define_Anim
  lstAnims.Clear            'IS THIS HOW I CLEAR THE OLD ENTRIES?
  dim LocAnimation as Animation
  locAnimation.InitializeTranslate(...)
  lstAnims.Add(locAnimation)
     .... ' A dozen animations can be added here
  dim LocAnimation as Animation
  locAnimation.InitializeTranslate(...)
  lstAnims.Add(locAnimation)
end sub

sub Button6_Click
  Define_Anim
  dim LocAnimation as Animation
  LocAnimation = lstAnims.Get(0)
  LocAnimation.Start(Button6)
end sub

When I use Delphi I have to remember to clear the old objects that I've created and added to a list whenever the list is reused or when the list is disposed of. B4A doesn't seem to have this constraint. So my question is, when & how do I release the LocAnimation that was created and added to lstAnims in Define_Anim?

1) Do I simply clear the list using lstAnims.Clear?
2) Or do I have to use lstAnims.Initialize?
3) Or do I have to destroy each locAnimation that was added to lstAnims (like I would in Delphi)?

The Button6_Click could be run dozens of times (or in a continuous loop), and I want to make sure I free up the previously allocated memory (locAnimation) before starting a new list of animations. Like I said earlier, this question applies to any object added to a list or map, not just the Animation object.

Can you shed some light on freeing or releasing memory for objects that have been added to a list/map and are no longer needed?

TIA
Widget

Erel · Aug 30, 2011

The rule is quite simple. An object with no references will be released. It will not be released immediately but eventually the GC will release its resources.

Assuming that the only reference to the animation object is held in the list, then by clearing the list you are releasing the animation resources.

Gigatron · Oct 16, 2011

You are very great men Erel ' have not changed )

With my bad english a have read all post about anim, and found the solution.

'anim win

B4X:

   animwin.InitializeAlpha("", 1, 0)
   animwin.Duration = 1500
    animwin.RepeatCount = 0
    animwin.RepeatMode = animwin.REPEAT_REVERSE



Sub animwin_AnimationEnd
   animwin.Stop(pic1)
End Sub

Thanks alot again Erel

GTR

walterf25 · Nov 19, 2011

Animation

Hello everyone, i was wondering if buttons are the only things that can be animated with the animation library, can we animate imageviews, etc.... if so can anyone provide me with a code sample as to how to do this, what i'm actually trying to do is load a picture of a soccer ball and have the ball rotate in one place, i know someone here created an app that does this, but i'm trying to find out how he acomplished this, if anyone can provide me in the right direction that will be very well appreciated

Thanks.

Gigatron · Nov 20, 2011

Here the project , you can play with imageview animation.

Have Fun.

buras3 · Nov 29, 2011

problem with frame

hello Erel and all

i programed a game "number puzzle"
i took the animation from this tutorial

but when i put frame in the panel - the up and right sides of the frame are become black when the button is moving .

i tried to make the image smaller or put the frame in different panel - but it's still the same .

if i don't put image in the button - it's OK
but if i put image or color like the tutorial the problem with the frame come's back.

what can i do?

tank you

Erel · Nov 29, 2011

You should check it with a real device. It may solve it.
I don't see this issue in the screenshot you posted. You can use the new Screenshot tool to take a screenshot of the emulator or a real device.

buras3 · Nov 29, 2011

tank you for answer

i have checked already in real device and it's the same problem

buras3 · Nov 30, 2011

can't you see in the screenshot that the frame is missing a part?

Erel · Nov 30, 2011

The image is too small (it is resized by the forum automatically).
If you like you can upload your project.

buras3 · Dec 1, 2011

project

i post my project
push play and after move some button

tanks

Erel · Dec 1, 2011

I checked it on a 3.1 device and it looks good. It may be a bug in older versions of Android.

buras3 · Dec 2, 2011

tank you for checking

is there no way to fix it
like redraw the frame or something?

Erel · Dec 4, 2011

It is probably a bug in the Android OS. I wasn't able to reproduce it.

The animation feature is implemented by the OS.

Android Tutorial Android views animation tutorial

Attachments

Member

Member

Member

B4X founder

Well-Known Member

B4X founder

Well-Known Member

B4X founder

Member

Expert

Member

Attachments

Active Member

Attachments

B4X founder

Active Member

Active Member

B4X founder

Active Member

Attachments

B4X founder

Active Member

B4X founder

Privacy & Transparency

Privacy & Transparency