Calling Label Animation

noclass1980

Active Member
Licensed User
Longtime User
Hi, I'm just tring to get to grips with label animation and have the following problem. Using the first code, the three labels fade in one after the other as expected when the animation is initiated by the Button Click event. However, in the 2nd code, I've called a sub which initiates the animation but what happens is the 3 labels fade together then the 2nd disappears and fades in, then the 3rd disappears and fades in. What is the difference in the two codes? Is it something to do with the LabelsSt array? Really need an answer for this because I know I will want to initiate animation depending on a variable in the future and not initiated from a Button Clic event. Thanks in advance>

B4X:
Sub Globals
   'These global variables will be redeclared each time the activity is created.
   'These variables can only be accessed from this module.
Dim lblst0,lblst1,lblst2 As Label
Dim LabelsSt() As Label
Dim a1,a2, a3 As Animation
Dim btn1 As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
   'Do not forget to load the layout file created with the visual designer. For example:
   'Activity.LoadLayout("Layout1")
Activity.LoadLayout("Main")
a1.InitializeAlpha("Animation",0,1)
'lblSt.Initialize("")
'a2.InitializeTranslate("Animation",100dip,100dip,200dip,200dip)
a2.InitializeAlpha("Animation",0,1)
a3.InitializeAlpha("Animation",0,1)
lblst0.Tag=a1
lblst1.Tag=a2
lblst2.Tag=a3
lblst0.Text="Animation Test"
lblst1.Text="Animation Test 2"
lblst2.text="Animation Test 3"
LabelsSt=Array As Label(lblst0,lblst1,lblst2)
Dim animations() As Animation
animations=Array As Animation(a1,a2,a3)
For i=0 To animations.Length-1
animations(i).Duration=5000
animations(i).RepeatCount=0
Next
lblst0.Visible=False
lblst1.Visible=False
lblst2.Visible=False
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub btn1_Click
Dim a As Animation
lblst0.Visible=True
a=lblst0.Tag
a.Start(lblst0)
End Sub

Sub Animation_AnimationEnd
If Sender = a1 Then 
   lblst1.Visible=True
   a2.Start(lblst1)
Else If Sender=a2 Then
   lblst2.visible=True
   a3.start(lblst2)
End If
End Sub

B4X:
Sub Globals
   'These global variables will be redeclared each time the activity is created.
   'These variables can only be accessed from this module.
Dim lblst0,lblst1,lblst2 As Label
Dim LabelsSt() As Label
Dim a1,a2, a3 As Animation
Dim btn1 As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
   'Do not forget to load the layout file created with the visual designer. For example:
   'Activity.LoadLayout("Layout1")
Activity.LoadLayout("Main")
a1.InitializeAlpha("Animation",0,1)
'lblSt.Initialize("")
'a2.InitializeTranslate("Animation",100dip,100dip,200dip,200dip)
a2.InitializeAlpha("Animation",0,1)
a3.InitializeAlpha("Animation",0,1)
lblst0.Tag=a1
lblst1.Tag=a2
lblst2.Tag=a3
lblst0.Text="Animation Test"
lblst1.Text="Animation Test 2"
lblst2.text="Animation Test 3"
LabelsSt=Array As Label(lblst0,lblst1,lblst2)
Dim animations() As Animation
animations=Array As Animation(a1,a2,a3)
For i=0 To animations.Length-1
animations(i).Duration=5000
animations(i).RepeatCount=0
Next
lblst0.Visible=False
lblst1.Visible=False
lblst2.Visible=False
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub btn1_Click
animate_Labels
End Sub

Sub animate_Labels
For i=0 To 2
Dim a As Animation
LabelsSt(i).Visible=True
a=LabelsSt(i).Tag
a.Start(LabelsSt(i))
Next
End Sub

Sub Animation_AnimationEnd
If Sender = a1 Then 
   lblst1.Visible=True
   a2.Start(lblst1)
Else If Sender=a2 Then
   lblst2.visible=True
   a3.start(lblst2)
End If
End Sub
 

Cableguy

Expert
Licensed User
Longtime User
Since all 3 animations are the same, I would sugest using 1 single instance of Animation, and set a flag to know wich Label is animated in the Animation_Ended event..
I used the same aproach on my pairs4android game, and using a single animation object, I animate up to 100 views(buttons)
 
Upvote 0

sorex

Expert
Licensed User
Longtime User
never used the animations like that but looking at your code I think this is what happends


1.
you add 3 animations with a duration of 5 seconds
you start the animation array at position 0 and they run in sequence


2.
you add an animation with a duration of 5 seconds
you start them all at once instead of in sequence

I'm not 100% sure about this since the add animation doesn't have a delay value like in most tween libs. so it might be correct that they all start at the given time. (direct)
 
Upvote 0

noclass1980

Active Member
Licensed User
Longtime User
ok how do i set the flag then? Thanks
 
Upvote 0

Cableguy

Expert
Licensed User
Longtime User
Hi have putted together a raw example of a 3 button sequencial animation...

I used buttons, but you can animate any other view...

While doing it, I came across an issue... Don't know if its a bug on the Animation Lib or a System bug, but there is an ABSOLUTE need to place a DoEvents after each animation end or the first animatted view will be re-animated...

I used a Flag (Animated) to know what was the last animated view, and so animate the next...
Several aproaches are viable, I remember using a for..next loop and using Sender to know wich view to animate (individual views)
 

Attachments

  • SeqAnim.zip
    7.1 KB · Views: 353
Upvote 0

noclass1980

Active Member
Licensed User
Longtime User
HI, thanks but your example didn't work for me. Button1 faded out and then nothing happened. I tried adding the Do Events to the second code but the result was just the same. With the second code all three labels appear and then the animation proceeds as it should. I just don't understand why the first code works when the animation is initiated with a button click but doesn't when its initiated by a sub routine.
 
Upvote 0

Cableguy

Expert
Licensed User
Longtime User
It works flawlessly in my Note2...tested it before posting... What device are you using?
 
Upvote 0

noclass1980

Active Member
Licensed User
Longtime User
Galaxy tab 10.1 (7510) running android 4 (I think).
 
Upvote 0

Cableguy

Expert
Licensed User
Longtime User
Here's the complete code:

B4X:
Sub Process_Globals
   'These global variables will be declared once when the application starts.
   'These variables can be accessed from all modules.

End Sub

Sub Globals
   'These global variables will be redeclared each time the activity is created.
   'These variables can only be accessed from this module.
   Dim Anim As Animation
   Dim Button1 As Button
   Dim Button2 As Button
   Dim Button3 As Button
   Dim Animated As String 'Flag to know wich view is animated
End Sub

Sub Activity_Create(FirstTime As Boolean)
   'Do not forget to load the layout file created with the visual designer. For example:
   Activity.LoadLayout("1")
   Anim.InitializeAlpha("Anim",1,0)
   Anim.Duration = 2000
   Animated = "0"
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub


Sub Button1_Click
   Anim.start(Button1)
End Sub

Sub Button2_Click
   Anim.start(Button1)
End Sub

Sub Button3_Click
   Anim.start(Button1)
End Sub

Sub Anim_AnimationEnd
   If Animated = "0" Then
      Button1.Visible = False
      Animated = "1"
      DoEvents 'This is absolutly necessary to prevent button1 from re-animating everytime Anim.Start is called on another view.
      Anim.Start(Button2)
   Else If Animated = "1" Then
      Button2.Visible = False   
      Animated = "2"
      DoEvents
      Anim.Start(Button3)
   Else If Animated = "2" Then
      Button3.Visible = False   
      Animated = "0"
   End If
End If
 
Upvote 0

Cableguy

Expert
Licensed User
Longtime User
I can figure why it needs the First animation to either be Stopped of to request the processing of system events to be freed...but at least it works either way
 
Upvote 0

noclass1980

Active Member
Licensed User
Longtime User
HI, thanks for the efforts guys but they are not answering my question which is, why does the animation in my first code work when started by a button click but doesn't work if started by a sub which is called by the button click? It's essentilly identical code except for the starting point. Any clues? Thanks.
 
Upvote 0

thedesolatesoul

Expert
Licensed User
Longtime User
HI, thanks for the efforts guys but they are not answering my question which is, why does the animation in my first code work when started by a button click but doesn't work if started by a sub which is called by the button click? It's essentilly identical code except for the starting point. Any clues? Thanks.
How are they identical? You are using a For loop in the second example and not in the first. So you are running 3 animations in the second case, and this is what i expect to happen.
 
Upvote 0

noclass1980

Active Member
Licensed User
Longtime User
arrgh! the penny drops at last! I see the difference now but am still unclear why (in the 2nd code) the three labels appear together at the beginning. Is this because the for-next loop executes faster than the actual animation? so the for-next displays the 3 labels and then the 3 animations "catch up"? If this is the case, then to chain animations consequetively is to do it as in the first code by triggering the next animation at the end of the previous.Thanks for the help, very much appreciated. 'll be able to test this at the weekend when I get back to the UK.
 
Upvote 0

Cableguy

Expert
Licensed User
Longtime User
arrgh! the penny drops at last! I see the difference now but am still unclear why (in the 2nd code) the three labels appear together at the beginning. Is this because the for-next loop executes faster than the actual animation? so the for-next displays the 3 labels and then the 3 animations "catch up"? If this is the case, then to chain animations consequetively is to do it as in the first code by triggering the next animation at the end of the previous.Thanks for the help, very much appreciated. 'll be able to test this at the weekend when I get back to the UK.

Indeed using the for next loop will initiate the animations almos instatntly, so all 3 will occour at the same time...
To do it sequencially you MUST chech (use) the animation ended event...
To see how fast a for next loop executes try this simple code:
add a label to the activity...

B4X:
For i = 0 to 500
Label.text = i
activity.invalidade ' to refresh the screen
Next i
 
Upvote 0

noclass1980

Active Member
Licensed User
Longtime User
animation not working as expected

Hi, still struggling with this animation sequence. I want to animate 4 labels to appear one after the other as in the attached. The problem is that if the code runs as it is, the animations repeat themselves each time. that is, label1 appears, then label1 and label2 appear then label1, label2 and label 3 appear. I've followed the suggestions from Cableguy to put a flag in the Animation_AnimationEnd sub to know which animation has ended but that doesn't seem to wok. If I put in a DoEvents as suggested by cableguy (see earlier posts) then label1 appears and the code just stops without showing the next label(s). The DoEvents are commented out in the attached. Run the attachment and press the grey button to start the animation to see what happens. Can anyone help? Thanks.
:sign0085:
 

Attachments

  • AnimZip.zip
    7.4 KB · Views: 263
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
Here is a working example:
B4X:
Sub Globals
   'These global variables will be redeclared each time the activity is created.
   'These variables can only be accessed from this module.
   Dim lblst0,lblst1,lblst2 As Label
   Dim LabelsSt As List
   Dim btn1 As Button
   Dim lblst3 As Label
   Dim animations As List
End Sub

Sub Activity_Create(FirstTime As Boolean)
   'Do not forget to load the layout file created with the visual designer. For example:
   'Activity.LoadLayout("Layout1")
Activity.LoadLayout("Main")
LabelsSt.Initialize2(Array As Object(lblst0,lblst1,lblst2,lblst3))
animations.Initialize
For Each lbl As Label In LabelsSt
   Dim a As Animation
   a.InitializeAlpha("anim", 0, 1)
   a.Duration = 2000
   animations.Add(a)
   lbl.Visible = False
Next
lblst0.Text="Animation Test 1"
lblst1.Text="Animation Test 2"
lblst2.text="Animation Test 3"
lblst3.text="Animation Test 4"
End Sub

Sub btn1_Click
   animate_Labels
End Sub
Sub animate_Labels
   HandleAnimation(-1)
End Sub

Sub Anim_AnimationEnd
   Dim i As Int = animations.IndexOf(Sender)
   HandleAnimation(i)
End Sub
Sub HandleAnimation(CurrentOne As Int)
   If CurrentOne < animations.Size - 1 Then
      CurrentOne = CurrentOne + 1
      Dim a As Animation = animations.Get(CurrentOne)
      Dim lbl As Label = LabelsSt.Get(CurrentOne)
      lbl.Visible = True
      a.Start(LabelsSt.Get(CurrentOne))
   Else
      ToastMessageShow("all done",True)
   End If
End Sub
 
Upvote 0

noclass1980

Active Member
Licensed User
Longtime User
:sign0060:
Wow, amazing, would never have got this far, thanks!
 
Upvote 0

noclass1980

Active Member
Licensed User
Longtime User
Create Labels at runtime better than Designer?

ok, now I have the amimation working as I want but have come across an issue that I don't understand. If I create the labels using the Designer and Generate Members etc, the animation works but the label position is not as the Designer. If I then add the labels in Activity_Create everything is perfect. SO, is it better to use code to create the labels at runtime rather than using the designer? thanks.
 
Upvote 0
Top