Text eines UILabels animieren (Inhalt nicht Position, Größe, etc.)

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Text eines UILabels animieren (Inhalt nicht Position, Größe, etc.)

    Hallo,

    in mehreren UILabel wird eine Reihe von Messwerten angezeigt, also z.B "240 V". Ändern sich die Messwerte würde ich diese Änderung in den Labeln gerne animiert anzeigen. Der Text soll also nicht einfach von "240 V" zu "400 V" springen sondern quasi hochzählen.

    Bei der Suche nach Animiationen für UILabel findet man sehr viel um Größe, Position, Farbe, Ausrichtung, etc. zu ändern. Für die Animation des Inhaltes findet man aber fast nichts. Was ich gefunden habe ist alles schon ziemlich alt (2010 + 11) und läuft eigentlich immer auf die Verwendung eines Timers mit eigener Easing-Funktion heraus. Das geht natürlich, ist aber nicht sehr elegant.

    Gibt es mittlerweile in iOS 7+ eine bessere Alternative um das zu bewerkstelligen?


  • Nein, dass ist nur ein Fade zwischen den beiden Textwerten. Es würde also "240 V" aus- und gleichzeitig "400 V" eingeblendet. Ich sucht aber etwas, dass hochzählt. Also etwa:
    240 V
    260 V
    280 V
    ...
    395 V
    396 V
    ...
    400 V

    Ich brauche quasi eine Funktion der ich einen Start und einen Endwert geben, dazu eine Dauer und eine Easing-Funktion. Als Ergebnis soll sich der Text des Labels über die Dauer der Animation vom Startwert zum Endwert ändern.
  • macmoonshine schrieb:

    Ist zwar kein Label, aber im Buch gibt es im 6. Kapitel ein Beispiel für einen animierten Zähler.


    Danke für den Hinweis, aber dabei werden auch nur Layer-Animationen behandelt oder habe ich etwas übersehen? Es geht ja nicht darum etwas graphisch zu verändert. Unter Android wäre das z.B. ganz einfach:

    Quellcode

    1. ValueAnimator animation = ValueAnimator.ofFloat(0f, 1f);
    2. animation.setInterpolation(new EaseOutInterpolator());
    3. animation.setDuration(2500);
    4. animation.setStartDelay(500);
    5. animation.addUpdateListener(new AnimatorUpdateListener() {
    6. @Override
    7. public void onAnimationUpate(ValueAnimator animator) {
    8. float currentValue = animator.getAnimatedValue.floatValue();
    9. label1.setText(String.format("%.2", fromValue1 + ((toValue1 - fromValue1) * currentValue));
    10. label2.setText(String.format("%.2", fromValue2 + ((toValue2 - fromValue2) * currentValue));
    11. ...
    12. }
    13. });
    14. animation.start();
    Alles anzeigen
  • Natürlich kann man das mit einem Timer nachbauen. Einem Timer kann ich aber nur sagen wann er ticken soll und nicht wie lange er insgesamt laufen soll. Ein Timer hat keine vorgefertigten Easing Funktionen, die muss man sich auch erst selber bauen...

    Die Frage ist ja nicht, ob man sich das irgendwie nachbauen kann (natürlich geht das), sondern ob iOS dazugelernt hat und eigene Funktionen dafür anbietet. Für graphische Animationen gibt es Tonnen von Funktionen und Möglichkeiten. Da wundert es mich, das es so etwas einfaches wie wie obiges Beispiel nicht geben soll und selbst gebaut werden muss.

    macmoonshine schrieb:


    Wie gesagt: Das ist kein Label. Schau Dir mal Abbilung 6.24 an; die zeigt den Zähler. Der komplette Code steht auch nicht im Buch. Den findest Du aber im Git.


    Wie gesagt, damit geht es ja "nur" um graphische Animation. Das ist auf diesen Fall nicht anwendbar. Oder sehe ich etwas falsch?
  • Agenor schrieb:

    Natürlich kann man das mit einem Timer nachbauen. Einem Timer kann ich aber nur sagen wann er ticken soll und nicht wie lange er insgesamt laufen soll. Ein Timer hat keine vorgefertigten Easing Funktionen, die muss man sich auch erst selber bauen...

    Die Frage ist ja nicht, ob man sich das irgendwie nachbauen kann (natürlich geht das), sondern ob iOS dazugelernt hat und eigene Funktionen dafür anbietet. Für graphische Animationen gibt es Tonnen von Funktionen und Möglichkeiten. Da wundert es mich, das es so etwas einfaches wie wie obiges Beispiel nicht geben soll und selbst gebaut werden muss.


    weil es eine "schwache" idee ist das so zu ändern. bei einem fade-out-fade-in sehe ich den originalwert und den neuen wert. wenn der aber anfängt zu zählen sehe ich die längste zeit beides nicht. wo gibts denn sowas in der realität? einziges beispiel das mir grad einfällt sind die alten flip-clocks (aber wenn die angefangen hat zahlen raufzurattern dann wusste man eben dass eine stunde rum ist - das war auch kein design element sondern einfach eine technische voraussetzung)
  • gritsch schrieb:


    weil es eine "schwache" idee ist das so zu ändern. bei einem fade-out-fade-in sehe ich den originalwert und den neuen wert. wenn der aber anfängt zu zählen sehe ich die längste zeit beides nicht. wo gibts denn sowas in der realität? einziges beispiel das mir grad einfällt sind die alten flip-clocks (aber wenn die angefangen hat zahlen raufzurattern dann wusste man eben dass eine stunde rum ist - das war auch kein design element sondern einfach eine technische voraussetzung)


    Darüber ob diese Idee nun toll oder eher "schwach" ist kann man ganz bestimmt unterschiedlicher Meinung sein. Wenn z.B. der alte Wert egal ist, ist eine stark bewegte Änderung zum neuen Inhalte besser um die Aufmerksamkeit zu lenken als ein weniger sichtbares Fade. Wenn der Wert z.B. gleichzeitig durch einen Zeiger auf einer Skala dargestellt wird, ist es besser wenn sich Zeiger und Wert gleichmäßig bewegen. Etc... Es geht hier aber nicht darum ob die Lösung toll ist sondern schwach, sondern wie man diese umsetzten kann. Wenn es der Sache dienlich ist, formuliere ich die Frage auch gerne um:

    Gibt es unter iOS 7+ ein Äquivalent zu zum ValueAnimator von Android? Oder kann man das nur selber implementieren und nachbauen?
  • Agenor schrieb:

    Wie gesagt, damit geht es ja "nur" um graphische Animation. Das ist auf diesen Fall nicht anwendbar. Oder sehe ich etwas falsch?

    Das Beispiel animiert doch die Anzeige analog zum einem UIPicker. Wenn Du unbedingt die Zahlen austauschen willst, kannst Du ruhig die Timer-Lösung verwenden. Der Überblendeffekt lässt sich aber wahrscheinlich nur schwer mit einem Label umsetzen. Wenn Du zwei Label verwendest, kannst Du den über View-Transitionen erzeugen.
    „Meine Komplikation hatte eine Komplikation.“
  • macmoonshine schrieb:


    Das Beispiel animiert doch die Anzeige analog zum einem UIPicker. Wenn Du unbedingt die Zahlen austauschen willst, kannst Du ruhig die Timer-Lösung verwenden. Der Überblendeffekt lässt sich aber wahrscheinlich nur schwer mit einem Label umsetzen. Wenn Du zwei Label verwendest, kannst Du den über View-Transitionen erzeugen.


    Es soll sich ja gar nichts "bewegen" wie bei einem UIPicker. Die Ziffern sollen also z.B. nicht nach oben oder unten wegrutschen um durch die jeweils nächste ersetzt zu werden. Im Label steht zunächst "200 V". Beim ersten Schritt der Animation wird der Text einfach durch "220 V" ersetzt, beim nächsten Schritt durch "240 V", etc. Grafisch tut sich da rein gar nichts. Es geht NUR um den Text. Bei dem Android Beispiel kann man das gut sehen. Da wird bei jedem Schritt der Animation einfach ein neuer Text gesetzt.
  • Agenor schrieb:

    macmoonshine schrieb:


    Das Beispiel animiert doch die Anzeige analog zum einem UIPicker. Wenn Du unbedingt die Zahlen austauschen willst, kannst Du ruhig die Timer-Lösung verwenden. Der Überblendeffekt lässt sich aber wahrscheinlich nur schwer mit einem Label umsetzen. Wenn Du zwei Label verwendest, kannst Du den über View-Transitionen erzeugen.


    Es soll sich ja gar nichts "bewegen" wie bei einem UIPicker. Die Ziffern sollen also z.B. nicht nach oben oder unten wegrutschen um durch die jeweils nächste ersetzt zu werden. Im Label steht zunächst "200 V". Beim ersten Schritt der Animation wird der Text einfach durch "220 V" ersetzt, beim nächsten Schritt durch "240 V", etc. Grafisch tut sich da rein gar nichts. Es geht NUR um den Text. Bei dem Android Beispiel kann man das gut sehen. Da wird bei jedem Schritt der Animation einfach ein neuer Text gesetzt.


    und woher soll das system die schritte kennen?
    also von 2 auf 5, von 10 auf 120, von 1000 auf 1003 etc...
  • gritsch schrieb:


    und woher soll das system die schritte kennen?
    also von 2 auf 5, von 10 auf 120, von 1000 auf 1003 etc...


    Durch die Easing Funktion natürlich. Mehr als einen Star- und Endwert und eine Laufzeit braucht man dafür eigentlich nicht. Das ist doch genau das selbe wie die Animation von irgendwelchen grafischen Elementen wie Position, Alpha, Winkel etc. Bei einer UIView Animation hat man auch nicht mehr Parameter und das System schaft es trotzdem das hinzubekommen. Wo ist also das Problem bei einer reinen Wertanimation?
  • macmoonshine schrieb:


    ...dann View-Transitionen.


    Es soll auch NICHT von View A zu View B gewechselt werden. Es geht nur darum den TEXT eines UILabels über einen Zeitraum mit verschiedenen Werten zu ändern............

    macmoonshine schrieb:

    Die Android-Animatoren sind im Prinzip auch nur Timer.


    Das ist wie schon gesagt klar und nicht verwunderlich. Letztlich steckt hinter jeder Animation ein Timer. Natürlich kann man das Ziel erreichen in dem man mit Timern selber etwas bastelt. Wenn ich nach besten Strecke zwischen Hamburg und München frage ist die Antwort "Bau dir selber eine Autobahn" sicherlich richtig, aber nicht wirklich das was gesucht war... Ich hätte einfach gedacht, dass iOS für so eine einfache Aufgabe eine fertige Lösung anbietet (wie alle anderen Plattformen auch) und man das Rad nicht neu erfinden muss. Aber dem ist wohl scheinbar nicht so.

    Vielen Dank für die Mühe und die rege Beteiligung!
  • Agenor schrieb:

    Es soll auch NICHT von View A zu View B gewechselt werden. Es geht nur darum den TEXT eines UILabels über einen Zeitraum mit verschiedenen Werten zu ändern............

    ...und wenn Du das animiert haben willst, brauchst Du dafür mindestens zwei Views oder Layer. Mit einem Label wirst Du es wahrscheinlich nur extrem schwer oder überhaupt nicht umgesetzt bekommen. Siehe oben.
    „Meine Komplikation hatte eine Komplikation.“
  • macmoonshine schrieb:


    ...und wenn Du das animiert haben willst, brauchst Du dafür mindestens zwei Views oder Layer. Mit einem Label wirst Du es wahrscheinlich nur extrem schwer oder überhaupt nicht umgesetzt bekommen. Siehe oben.


    Wozu soll ich eine zweite View oder Layer brauchen? Ich will weder von View A zu View B wechseln noch ein Layer irgendwie ändern/transformieren oder ansprechen. Ich will ausschließlich auf UILabel.text zugreifen. Sonst nichts. Wirklich nicht. Ganz bestimmt nicht :)

    Erst ist der Text "200 V", 50ms später ist der Text "220 V", wieder 50ms später ist der Text "240 V".... Dafür braucht man nur einen Timer der alle paar Millisekunden tickt, eine EasingFunktion die die vergangene Zeit in einen Wert zwischen Start- und Endwert umrechnet und Eine Laufzeit um den Timer irgendwann wieder zu stoppen. Mehr nicht. (Ja, das kann man selber bauen, müsste man aber nicht wenn iOS selber so komfortable wäre...).