UIButton Animation in Swift 4
Animationen hauchen Apps Leben ein und können in der Gunst des Nutzers den feinen Unterschied machen. Für eine Todo-List-App habe ich deshalb einem Check-Button etwas Bouncyness verpasst.
Der Prototyp ist in einem Xcode Playground entstanden. Den File und den kompletten Code gibt‘s hier.
Der Knackpunkt der Animation ist wie so oft das richtige Timing.
Im ersten Animationsschritt muss der Button zunächst durch eine lineare Animation von seiner Ausgangsform des abgerundeten Rechtecks in einen Kreis transformiert werden. Zudem wird der Text des Titellabels ausgeblendet, da dieser zum einen zu groß für die neue Form ist und zum anderen unschöne Überlappungen verursacht. Auch die neue Hintergrundfarbe wird bereit im ersten Animationsschritt gesetzt. Der runde Button wird schließlich auf 80% seiner Größe skaliert, um ihn im nächsten Step schließlich wieder dynamisch vergrößern zu können.
Der zweite Animationsschritt wird durch den Completion Handler des UIViewPropertyAnimators getriggert. Hierbei wird der eigentliche Bounce des Buttons durch eine Spring Animation bewerkstelligt. Das Konzept hinter dieser Animationsart liegt darin, dass diese nicht linear verläuft, sondern mit einem hohen Ausschlag beginnt und basierend auf dem gegebenen Dämpfungsgrad (Damping) und der Anfangsgeschwindigkeit (Velocity) an Intensität verliert. Im gleichen Atemzug wird das Titellabel wieder eingeblendet, aufgrund der neuen Hintergrundfarbe weiß gefärbt und mit dem simplen Hakensymbol versehen. Das Label wird ebenso federnd skaliert und fügt sich somit nahtlos in die Animation ein.
Der Button kann dann durch das Setzen der Ausgangswerte in einer zweiten Funktion restoreButton() erneut in den Startzustand versetzt werden. Ich habe die Intensität der Spring Animation dabei durch das Herabsetzen der Velocity etwas reduziert, wodurch der Button etwas gediegener in seinen Initialzustand versetzt wird.
