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,437
  • Animation.apk
    77.1 KB · Views: 2,754

kl3inh3nz

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

PharCyDeD

Active Member
Licensed User
Longtime User
Can you make button 6 move to a specified location without using dip? Like using .Top and .Left?
 

PharCyDeD

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

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

Vabz

New Member
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:
 

Vabz

New Member
Buttons

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

sioconcept

Active Member
Licensed User
Longtime User
Can we make 2 animations in same time as :

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

?
 

noclass1980

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

B4X founder
Staff member
Licensed User
Longtime User
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

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

ykucuk

Well-Known Member
Licensed User
Longtime User
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 ?
 

Pintinho

Member
Licensed User
Longtime User
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
B4X:
  '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
 

Attachments

  • Original Screen lr.png
    Original Screen lr.png
    173.8 KB · Views: 483
  • After M selected lr.png
    After M selected lr.png
    171.6 KB · Views: 475
Last edited:
Top