Android Tutorial Android Views Animation Tutorial

klaus

Expert
Licensed User
Longtime User
Die Animation Library erlaubt Views zu animieren
Diese kleinen Animationen sind wirklich nett und können sich positiv auf den Gesamteindruck der Anwendung auswirken.

Das Beispielprogramm befindet sich am Ende.
Das Englische OriginalTutorial.

Das Beispielprogramm demonstriert die verschiedenen zur Verfügung stehenden Animationen:
Alpha - Verursacht einen Fading in oder Fading out Effekt.
Scale – Die Größe der View wird sanft verändert.
Rotate – Die View wird gedreht.
Translate – Die View bewegt sich zu einer anderen Stelle.


animation_2.png


animation_1.png


Eine Animation wird in vier Etappen erstellt:
- Deklaration eines Animation Objekt
- Initialisierung des Objektes gemäß der gewollten Animation
- Setzen der Animation-Parameter (Dauer, Wiederholung und Wiederholungsmodus)
- Die Animation starten durch Aufruf von Start mit der ZielView.

In dem Programm wird eine Animationsart jedem Button als Tag-Wert zugefügt.
Alle Button_Click Events sind in der Sub Button_Click Routine abgefangen.
In dieser Subroutine holen wir die Animationsart vom Tag Parameter mit der Sender Funktion und starten die Animation.
Der Code der ersten fünf Animationen und 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
Wir benutzen ein temporäres Array um zu vermeiden doppelten Code zu schreiben.
RepeatCount auf 1 setzen bedeutet daß jede Animation zweimal abgespielt wird.
REPEAT_REVERSE bedeutet, daß die jede zweite Animation rückwärts abgespielt wird.

Die Animation die Button6 zugefügt ist besteht aus 4 verketteten Animationen. Die Taste bewegt sich zu Erst nach unten, dann nach links, dann nach oben und dann nach rechts zurück zum Startpunkt.
Wir verwenden diese Animationen:
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 diesem Fall wollen wir nicht daß jede Animation wiederholt wird.

Starten der Animationen:
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
Der letzte Teil ist die Nutzung des AnimationEnd Events um die nächste Animation für den Button6 zu starten:
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
Dieses Programm sieht, einem realen Gerät, wirklich toll aus. Es funktioniert auch auf dem Emulator, aber die Animationen sind weniger sanft.

Sourcodes:
zip.gif
AnimationExample.zip

Animation.apk
 
Last edited:

mcmanu

Active Member
Licensed User
Longtime User
hi

hi,

Ist es möglich die animation von einen anderen button in gang zu setzen?
sprich ich drücke den button 1 und der button3 zeigt die animation?

Danke schonmal :)


habs so versucht -->

'Activity module
Sub Process_Globals

End Sub

Sub Globals
Dim a3 As Animation
Dim Button3 As Button
Dim Bitma As Bitmap
Dim button As Bitmap
Dim button4 As Button
Dim kreis As Bitmap
End Sub

Sub Activity_Create(FirstTime As Boolean)

Button3.Initialize("button3")
Activity.AddView(Button3,40dip,120dip,120dip,120dip)
Bitma.Initialize(File.DirAssets,"background.jpg")
button.Initialize(File.DirAssets,"test.png")
kreis.Initialize(File.DirAssets,"test2.png")

button4.Initialize("button4")
button4.SetBackgroundImage(test)
Activity.AddView(button4,40dip,120dip,120dip,120dip)
Activity.SetBackgroundImage(Bitma)
Button3.SetBackgroundImage(button)

a3.InitializeRotateCenter("", 0, 360, button4)
button4.Tag = a3

Dim animations() As Animation
animations = Array As Animation(a3)
For i = 0 To animations.Length - 1
animations(i).Duration = 1200
animations(i).RepeatCount = 5
animations(i).RepeatMode = animations(i).REPEAT_RESTART
Next
button4.Visible=False
End Sub

Sub Button3_Click 'Hier will ich das er in die sub button4_click springt, er braucht nochmal einen button4click um die animation zu starten
Button4_Click
End Sub

Sub Button4_Click
button4.Visible=True
Dim b As Button
b = Sender
If Not(b.Tag Is Animation) Then Return
Dim a As Animation
a = b.Tag
a.Start(b)

End Sub

wie kann man es machen das er wenn er in die sub button4_click springt auch gleich die animation durchführt? also so ne art performclick
 
Last edited:

mcmanu

Active Member
Licensed User
Longtime User
Hi

Habs doch hinbekommen, aber Danke das du mir Helfen wolltest :)

Ich werd heute abend mein beispiel hier Posten damit andere auch was davon haben.

Lg
 

mcmanu

Active Member
Licensed User
Longtime User
Hi

Hier mein ergebniss
Das startet die animation eines Buttons die von einem Anderen Button ausgelöst wurde.
sprich ich drücke button eins und button2 beginnt sich zu drehen(ect..)

code -->

Sub Button3_Click <-- Button 3 wird geklickt
button4.SendToBack
button4.Visible=True
Button3 = Sender <-- button 3 ist der auslöser der Animation
If Not(button4.Tag Is Animation) Then Return <- hier drauf achten das der tag von dem button der animiert werden soll geschrieben werden muss.
Dim a As Animation
a = button4.Tag <- jetzt noch der animation den tag übergeben
a.Start(button4) <- und los gehts

End Sub
 
Top