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.

luke2012 · Oct 16, 2014

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?

Erel · Oct 16, 2014

Yes.

See the SlidingPanels example.

fotosettore · Dec 19, 2014

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.

Erel · Dec 21, 2014

You can use AnimationPlus to persist the animation change.

SpinBower · Jun 5, 2015

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

Erel · Jun 5, 2015

What happens when this code is executed?

SpinBower · Jun 5, 2015

Erel said:
What happens when this code is executed?

Absolutely nothing happens. The cloud is drawn but stays in the same position.

Erel · Jun 7, 2015

You will need to upload the project or a smaller one with the relevant code only.

iCAB · Oct 4, 2015

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?

Erel · Oct 6, 2015

You can set the ToDegrees value to 5 * 360 and RepeatCount to 1 (and increase the duration).

iCAB · Oct 6, 2015

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

Erel · Oct 6, 2015

Start a new thread for this question and I'll post the code required to change the animation behavior.

Tayfur · Nov 3, 2015

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.

Erel · Nov 3, 2015

I'm not sure that I understand the question. However you should probably use Panel.SetLayoutAnimated. It is simpler.

Android Tutorial Android views animation tutorial

Attachments

luke2012

Well-Known Member

Erel

B4X founder

fotosettore

Member

Erel

B4X founder

SpinBower

Member

Erel

B4X founder

SpinBower

Member

Erel

B4X founder

iCAB

Well-Known Member

Erel

B4X founder

iCAB

Well-Known Member

Erel

B4X founder

Tayfur

Well-Known Member

Erel

B4X founder

Android Tutorial Android views animation tutorial

Attachments

Well-Known Member

B4X founder

Member

B4X founder

Member

B4X founder

Member

B4X founder

Well-Known Member

B4X founder

Well-Known Member

B4X founder

Well-Known Member

B4X founder

Privacy & Transparency

Privacy & Transparency