Power Apps Hacks - Animationen in Power Apps mit Timern erstellen

Herzlich willkommen und Moin Moin zu diesem Beitrag in der Videoserie "Power Apps Hacks".

In dieser Serie behandeln wir einen bunten Blumenstrauß an Power Platform Tipps, Tricks und Funktionen.

In diesem Beitrag zeigen wir Euch, wie Ihr kleine Animationen mit dem Timer-Steuerelement in Power Apps erstellen könnt.

Wenn Ihr Ideen für diese Videoreihe habt, hinterlasst uns einfach einen Kommentar unter dem Video!

Im Video stellen wir drei Use Cases vor. In diesem Blogbeitrag geben wir dazu nochmal eine Schritt-für-Schritt-Anleitung, wie Ihr alle drei Use Cases nachbauen könnt.

---

Notify über einen Timer ein- und ausblenden

1. Lable einfügen und als "lblNotify" benennen

Anschließen in der Text-Eigenschaft den Text eingeben, den der User ausgespielt bekommen soll.

2. Timer "tmrNotify" einfügen und die Duration/Dauer auf 3000 (3 Sekunden) einstellen.

Diese Dauer ist später dafür verantwortlich, wie lange die Mitteilung sichtbar ist.

Die Duration wird dabei stets in Millisekunden angegeben.

3. Einen Button einfügen und als "btnSend" benennen

4. OnSelect-Eigenschaft des "btnSend" mit einer Kontextvariable "locStartTimer" füllen

UpdateContext({locStartTimer:true})

5. Auf der Start-Eigenschaft des Timer - tmrNotify.Start - die Kontextvariable "locStartTimer" hinterlegen

So wird der Timer nur gestartet, wenn diese Variable = true ist, also der Nutzer den "btnSend" betätigt.

6. Die Fill-Eigenschaft unseres "lblNotify" anpassen, sodass diese mit Ablauf des Timers stückweise von grün auf durchsichtig/transparent wechselt

Mit der Laufzeit (Value) des Timers erhöht sich der Wert von "tmrLocStart.Value/tmrLocStart.Duration" von 0 (Timer hat noch nicht begonnen) auf 1 (Timer ist einmal durchgelaufen).

Am Ende eines Timer-Durchlaufs haben wir so das Ergebnis 0.

Sobald der Timer startet, wird die Füllung zunehmend transparent, bis sie schließlich, sobald der Timer einmal durchgelaufen ist, vollständig transparent ist. (Berechnung: 1-1 = 0)

RGBA(54, 176, 75, 1 - tmrLocStart.Value/tmrLocStart.Duration)

7. Dasselbe Prinzip wenden wir auf die Schriftfarbe (Color-Eigenschaft) unseres "lblNotify" an

Bevor der Timer gestartet wird, ist die Schriftfarbe schwarz und wird dann zunehmend transparent.

RGBA(0, 0, 0, 1 - tmrLocStart.Value/tmrLocStart.Duration)

---

Slider mittels Timer über die Bildschirmfläche laufen lassen

1. Lable "lblSlider" einfügen und mit gewünschtem Text füllen, z.B. "+++Timer sind super+++"

2. Timer "tmrSlider" einfügen

3. Eigenschaften "Autostart" und "Repeat"/"Wiederholen" für "tmrSlider" = true setzen

So wird der Timer automatisch gestartet, sobald der Nutzer auf dem Bildschirm ist, wo dieser Timer liegt. Das Ganze kann natürlich auch über eine Kontextvariable, wie im oberen Beispiel, gestartet werden. Die Repeat oder Wiederholen-Eigenschaften setzen wir =true, damit der Timer immer wieder von vorne startet, wenn er beendet wurde.

4. Duration/Dauer des "tmrSlider" auf = 1 setzen (=1 ms Laufzeit für den Timer)

5. Auf der OnTimerEnd-Eigenschaft setzt Ihr eine Kontextvariable "locX" mit der UpdateContext()-Funktion

Der Code unterhalb sorgt dafür, dass jedes Mal, wenn der Timer beendet wird, der Wert für locX sich verändert (ähnlich wie bei einer Loop/Schleife).

Solange der Slider auf dem Bildschirm ist, also locX kleiner ist als die Breite der App (App.Width), werden in jedem Durchlauf 10 auf den Wert von locX (locX + 10) addiert.

Sobald er aus dem Bildschirm wandert, soll der Slider wieder von links einlaufen. (locX=0)

UpdateContext(
    {
        locX: If(
//Solange Slider auf dem Bildschirm
            locX <= App.Width,
            locX + 10,
//Ansonsten wieder von links einlaufen
            0
        )
    }
)

6. Den X-Wert für den lblSlider mit locX füllen.

Somit wird Euer X-Wert mit jedem Timerdurchlauf neu definiert, locX verändert jede Millisekunde seinen Wert und der "lblSlider" wandert über den Bildschirm.

---

Einen Ladebalken in Power Apps animieren

1. Timer "tmrLoading" einfügen und die Duration/Dauer auf 2000 (2000ms = 2 Sekunden) setzen

2. Lable "lblLoadingBar" einfügen, Text entfernen, Füllfarbe auf Blau und Breite = 600

3. Darüber einen Lable "lblLoadingHeader" einfügen und mit dem Text "Ladevorgang: " versehen

4. Einen Button "btnSpeichern" einfügen, der eine Kontextvariable auf seiner OnSelect-Eigenschaft erstellt

UpdateContext({locStartLoading:true})

5. Start-Eigenschaft des Timers mit der Kontexvariable "locStartLoading" füllen

So wird der Timer ausgelöst, sobald diese Variable = true ist bzw. der Button "btnSpeichern" betätigt wird.

6. Die Breite des lblLoadingBar auswählen und folgende Funktion einfügen:

600 * tmrLoading.Value/tmrLoading.Duration

Diese Funktion sorgt dafür, dass die Länge des Lable stückweise (mit der Laufzeit des Timers) zunimmt, bis der Wert für tmrLoading.Value/tmrLoading.Duration = 1 ist, der Timer also abgeschlossen ist und der Lable seine volle Breite (600*1) erreicht hat.

7. In die Text-Eigenschaft des "lblLoadingHeader" folgende Funktion einfügen:

"Ladevorgang: "& Round(tmrLoading.Value/tmrLoading.Duration,2)*100& " %"

So wird während der Timerlaufzeit der Fortschritt in Prozent ausgegeben.