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.

 

[kl3inh3nz]

... I did intent to include AnimationSet object that will allow animating multiple animations concurrently...

This answer was from 2010, so i would like to know if it is still not possible to run multiple animations?

 

[Erel]

You can run several animations one after another. Not at the same time.
I previously tested it with Android 2.2.

 

[PharCyDeD]

Can you make button 6 move to a specified location without using dip? Like using .Top and .Left?

 

[Erel]

'200dip' means that the number of pixels will change based on the device scale. You should always use dip units when specifying a dimension measured in pixels.

 

[PharCyDeD]

Is there any way to determine the 'dip' of a certain area then? I have a lot of imageviews that I want to move with this animation due to its very visual nature, but the location they are moved too is determined at random. I have a sub that currently handles all of this, but in the sub imageviews move using '.Top' & '.Left'. Can I convert those values to dip somehow so I can use this animation?

 

[gkumar]

How to display the animated progress bar

I need to display the progress bar with some animation instead of default spinner progressbar. I have around 15 series of images to be shown as animated progressbar. Anybody worked on this kind of progressbar?

 

[Erel]

You will need to use an ImageView with a timer and cycle the images.
Please start a new thread if you need more help on this.

 

[Vabz]

When i do declare a1 as a "Animation", the program is not picking it up. Type Animation is not recognised on B4U. Can anyone tell me what is wrong?:sign0085:

 

[Erel]

You will need to reference the Animation library. However it is only possible with the full version.

 

[Vabz]

Buttons

In this tutorial, Do the Buttons need to be declared first because they are not being recognized when i'm trying. :sign0085:

 

[Erel]

For some reason you appear as an unlicensed user in the forum. Please contact support@basic4ppc.com in order to fix it.

 

[sioconcept]

Can we make 2 animations in same time as :

      anim1.InitializeRotateCenter("", Degres, Degres - Rnd(1, 90), dice)
      anim1.InitializeTranslate("", 0, 0, 300dip, 200dip)
      anim1.Duration = 1000
      anim1.Start(dice)

?

 

[Erel]

You can do it with this library: http://www.b4x.com/forum/additional...dates/21313-lib-animationplus.html#post123188

 

[noclass1980]

Hi, I'm very new to Basic4Android but enjoying it hugely so far! I've managed to set up labels that appear dependent on a variable value but would like to use animation to make them fade in/translate etc. I have a routine that makes visible 12 labels but the animation on the almost all the labels appear before the first label completes its animation. How is the AnimationEnd sub called to make sure the program effectively "pauses" until the animation is complete?
part of my code is

Dim lblflyin As Animation ' in process Globals
lblflyin.InitializeAlpha("", 1, 0) ' in Activity Create (First time as Boolean)

Sub Animate_St
Dim Reader As TextReader
Reader.Initialize(File.OpenInput(File.DirAssets,"text_st.txt"))
Dim line As String
For i = 0 To 2
line=Reader.ReadLine
lblSt0.Initialize("")
lblSt1.Initialize("")
lblSt2.Initialize("")
Select  i
Case 0
Activity.AddView(lblSt0,Imgv_Model1.Left+20,Imgv_Model1.Top+50,400,200)
lblSt0.Text=line
lblSt0.TextSize=20
lblSt0.TextColor=Colors.Green
lblSt0.Tag=lblflyin
lblflyin.Duration=1000
lblflyin.Start(lblSt0)
Case 1
Activity.AddView(lblSt1,Imgv_Model1.Left+20,Imgv_Model1.Top+75,400,200)
lblSt1.Text=line
lblSt1.TextSize=20
lblSt1.TextColor=Colors.Green
lblSt1.Tag=lblflyin
lblflyin.Duration=1000
lblflyin.Start(lblSt1)
Case 2
Activity.AddView(lblSt2,Imgv_Model1.Left+20,Imgv_Model1.Top+100,400,200)
lblSt2.Text=line
lblSt2.TextSize=20
lblSt2.TextColor=Colors.Green
lblSt2.Tag=lblflyin
lblflyin.Duration=1000
lblflyin.Start(lblSt2)
End Select
Next
Reader.Close
End Sub

so it reads a text file and I want each label to fade in over 1 second.

Any suggestions?

 

[Erel]

Your code can be significantly shorter. See this example: Tick-Tack-Toe: working with arrays of views

You should use 'dip' units when specifying dimensions (in Activity.AddView).

You cannot wait for an event. You should start the next animation in the AnimationEnd event of the previous one. See how Button6 handled in the Animations example.

 

[noclass1980]

Thank you for the quick reply. I think I understand your comment. Do you mean that I should put my labels in an array like in button 6 but with the same animation (fade)? even though the animation is started by clicking a button, is the Sender identifier the label name in my case? That is, if it is lblSt0 then it triggers the next animation in the AnimationEnd sub? Finally, how does the Button 6 animation know to run the Animation_AnimationEnd sub? sorry for appearing stupid! I'll rewrite my code along the lines of the Tick-Tack-Toe to shorten it as you suggest. Thanks again.

 

[Erel]

The AnimationEnd event is raised when the animation ends. You can use different animations. There are several possible implementations. The thing is that you should start the next animation when the previous one ends.

 

[ykucuk]

help for newbie

hello,

i start work with animation.

i can move some view to x1 to x2 or y1 to y2

my problem is when view arrive to target point it comes back to original point (x1)

any idea ?

 

[Erel]

Use the AnimationEnd event to move the view to the correct position.

 

[Pintinho]

Hi Erel and all
First of all, I would like to congratulate you on the fantastic software and forum you have running here - although this is my first question on the forum, I have been profitting from all the tips in this forum to sort my problems. And I have sucessfully completed my first app, a translation from an IOS app, for a friend of mine. It has loads of animations, so I have been playing around Animation and timers to accomplish the "translation".

There is unfortunately that last error that it seems that I cannot solve (unfortunately I cannot publish here my app, since it belongs to this friend of mine but hopefully you will understand this issue and might be able to help me):

On my screen, I have 15 buttons defined, with an image as background and a letter.
A word is said, chosen randomly from a list and then the sounds of the letters is said one by one, for the kid to press it.
If it takes too long, after 3 times repeating the letter sound and the kid has not managed to match the letter to the sound, I create an animationScaleCenter to highlight to the kid which letter he/she should press.

The problem I am having is that the first word, everything works fine but then the second word, the first letter image gets truncated after the animationScaleCenter

Please refer to the screenshots
the Original screen shot is how the button should look like after the scale

  'Define animation
   animLettScale.InitializeScaleCenter("animBtnReset",1, 1, 1.2, 1.2, btnSel)
   animLettScale.RepeatCount = 0
   animLettScale.Duration = 200

And the second screen shot is what happens with my image on letter M

On the animBtnReset_AnimationEnd I try to reset the buttons to their original statuz but to no avail.

Can you see what is happening here? i.e., has this kind of thing has happened before?
I know that this is very little information for you to help me but I really cannot post the application here.

Thanks for any help anyone can give me!
Best regards
Sofia