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

luke2012

Well-Known Member
Licensed User
Longtime User
Hi @Erel.
Is it possible to make a vertical slide in / slide out animation with this library?
For example: show / hide panel with vertical slide effect?
 

fotosettore

Member
Licensed User
Longtime User
Hi erel !
Is it possible to stop animation of button3 in 180° ?
I'd need only to turn button in upside down and stop it in that position.
 

Mason

Member
Licensed User
Longtime User
Could someone please explain why this does not work? All I want to do is move the cloud from one edge of the screen to the other.

B4X:
Sub Globals
    Dim CloudAni As Animation
    Dim Cloud As ImageView
End Sub

Sub Clouds()
    Cloud.Initialize("main")
    Cloud.Bitmap = LoadBitmap(File.DirAssets, "Cloud.png")
    Cloud.Gravity = Gravity.FILL
    Activity.AddView(Cloud, 0, 0, 100dip, 100dip)
    CloudAni.InitializeTranslate("Cloud", 0%x, 50%y, 100%x, 50%y)
    CloudAni.Duration = 4000
    CloudAni.RepeatCount = -1
    CloudAni.RepeatMode = CloudAni.REPEAT_REVERSE
    CloudAni.Start(Cloud)
End Sub
 

iCAB

Well-Known Member
Licensed User
Longtime User
I have a question about this:
Is there a way to rotate the object without a pause in between. for example (based on the sample code attached to the first post):
B4X:
    For i = 0 To animations.Length - 1
        animations(i).Duration = 1000
        animations(i).RepeatCount = 5
        animations(i).RepeatMode = animations(i).REPEAT_RESTART
    Next

If I add the block above, the button rotates around itself repeating the action 5 times.
but the rotation is not smooth. After it completes 360 degrees, it pauses then restarts

Any ideas?
 

iCAB

Well-Known Member
Licensed User
Longtime User
Hi Erel

What I did is this:
B4X:
  aRotate.InitializeRotateCenter(ProcessingLayerEventName, 0, iTimeoutInSecond * 360, ProcessingPanel.GetView(ProcessingPanel.NumberOfViews - 1 ) )
            aRotate.Duration = iTimeoutInSecond * 1000
            aRotate.RepeatCount = 0

it seems to do the job, except that the rotation starts slow then increases speed. Is there anything I can do about it

Thanks
 

Tayfur

Well-Known Member
Licensed User
Longtime User
I try animie . And I can found problem.
My panel top-Left cooordinate is 10dip , 10dip

But;
Panel pozitions not same creating pozitions when anime start.

I must add some offset. After its ok. (avarge "10dip" added)
Why dont same anime start pozitions and Panel pozitions??


2 Questions.

Panel moving 100dip. After compalate moving. and panel return back start pozitions.
I want to panels dont back (Start pozitions). I want to stay finish pozitions.(100dip left)
How can I do with anime.

B4X:
Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'Activity.LoadLayout("Layout1")
    If FirstTime Then
        lst.Initialize
        Log("lst size:"&lst.Size)
    End If
    Activity.LoadLayout("L1")
  
  
    PP2.Initialize("PP2")
    Activity.AddView(PP2,10dip,10dip,80%x,80%y)
    PP2.color=colors.yellow
  
    pp.Initialize("")
    Activity.AddView(pp,10dip,10dip,80%x,80%y)
    pp.Color=Colors.Green
    Activity.AddMenuItem("1-Touch panel Visible","x1")
    Activity.AddMenuItem("animasyon","x2")
    Activity.AddMenuItem("acitve up/down","x3")
    Activity.AddMenuItem("2--add web pages","x4")
    Activity.AddMenuItem("3--reload","x5")
    Activity.OpenMenu
End Sub


Sub x2_Click
    Log("PL:"&P.Left)
    Log("PT:"&P.Top)
    Anime.InitializeTranslate("Anime",pp.Left,pp.Top,pp.Left+100dip,pp.Top) '>>> not same coorner pozitions
'    Anime.InitializeTranslate("Anime",pp.Left-10dip,pp.Top-10dip,pp.Left+100dip,pp.Top-10dip) '>> same corner posizitons
    Anime.Duration=5000
    Anime.Start(pp)
End Sub

This is diffent of corner pozitions when start at anime.
Normaly, 2 panels are same corner pozitions.

Screenshot_2015-11-03-15-10-05_resized.png
 
Top