UIView.animate: mi ez, UIView tulajdonságok animációja iOS-ben

Mi az UIView.animate?

UIView.animate — az UIView osztály statikus metódusa, amely iOS 4-ben (2010) jelent meg. Deklaratív API-t biztosít az UIView animálható tulajdonságainak animálásához: frame, bounds, center, alpha, transform, backgroundColor. A metódus egy blokkot (lezárást) fogad tulajdonságváltoztatásokkal — a rendszer automatikusan CABasicAnimation-t hoz létre minden megváltoztatott tulajdonsághoz.

A blokk szintaxis felváltotta a régi beginAnimations/commitAnimations-t (iOS 2-3), és az animáció szabványává vált UIKit-ben. Az UIView.animate animációk a fő szálon hajtódnak végre, és nem blokkolják a UI-t. Alapértelmezés szerint az animáció időtartama 0.25 másodperc easeInOut görbével.

Az Apple WWDC 2023 adatai szerint az új projektekben ajánlott animációs mód a SwiftUI .animation() és .transition() módosítókkal, de az UIKit.animate továbbra is a fő eszköz marad az iOS 16 és régebbi verziók támogatásához, valamint összetett egyedi átmenetekhez.

Animációs paraméterek és opciók

UIView.animate három kulcsfontosságú paramétert kínál: duration (időtartam másodpercben), delay (késleltetés indulás előtt) és options (UIView.AnimationOptions bitmaszkok halmaza). Az options tartalmazza: curve (easeInOut, easeIn, easeOut, linear), repeat (ismétlés), autoreverse (automatikus visszafordítás), allowUserInteraction, beginFromCurrentState és overrideInheritedDuration.

Az options paraméter tömbön keresztül kombinálható: [.curveEaseOut, .repeat, .autoreverse]. A repeat és autoreverse animáció simán visszaállítja a View-t a kezdeti állapotba, és végtelenül ismétlődik. Véges számú ismétléshez használja az animateKeyframes-t.

Spring animáció UIView.animate segítségével

Spring animáció fizikai rugóhatást ad: az objektum nem csak A pontból B-be mozog, hanem túllendül a célon csillapított rezgésekkel. Paraméterek: usingSpringWithDamping (csillapítás 0-1, ahol 0 — maximális rezgés) és initialSpringVelocity (a rugó kezdeti sebessége).

Az Apple a usingSpringWithDamping 0.4-0.8 tartományát ajánlja természetes UI animációkhoz. A 0.5 érték észrevehető visszapattanást hoz létre gumiszerű érzet nélkül. Az initialSpringVelocity = 1.0 1 pt/mp sebességnek felel meg. 0-nál az animáció nyugalmi állapotból indul.

// Példa spring és keyframe animációra
import UIKit

class AnimatedView: UIView {

    func springBounce() {
        // Spring animáció csillapítással
        UIView.animate(
            withDuration: 0.8,
            delay: 0,
            usingSpringWithDamping: 0.5,
            initialSpringVelocity: 1.0,
            options: [.allowUserInteraction],
            animations: {
                self.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
                self.alpha = 0.7
            },
            completion: { _ in
                UIView.animate(withDuration: 0.3) {
                    self.transform = .identity
                    self.alpha = 1.0
                }
            }
        )
    }

    func slideIn(from offset: CGFloat) {
        self.transform = CGAffineTransform(translationX: offset, y: 0)
        self.alpha = 0.0

        UIView.animate(
            withDuration: 0.6,
            delay: 0.1,
            options: [.curveEaseOut]
        ) {
            self.transform = .identity
            self.alpha = 1.0
        }
    }
}

Keyframe animáció

UIView.animateKeyframes lehetővé teszi az animáció több lépésre (keyframes) bontását, mindegyik saját relatív idővel és időtartammal. Az addKeyframe(withRelativeStartTime:relativeDuration:) metódus 0-tól 1-ig terjedő időértékeket fogad el a teljes animációs időtartamhoz viszonyítva.

A keyframe animációk hasznosak többlépéses effektekhez: gomb pulzálás (növekedés → szünet → visszatérés), elemek szekvenciális megjelenése, összetett deformációk köztes állapotokkal. Minden keyframe saját animációs görbével rendelkezhet az options segítségével.

// Keyframe animáció összetett szekvenciával
func complexPulse() {
    UIView.animateKeyframes(withDuration: 2.0, delay: 0, options: [.repeat]) {
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25) {
            self.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
            self.alpha = 0.5
        }
        UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25) {
            self.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
            self.alpha = 0.8
        }
        UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5) {
            self.transform = .identity
            self.alpha = 1.0
        }
    }
}

// Animáció egymásba ágyazott lezárásokkal
func animateCardTransition() {
    UIView.animate(withDuration: 0.4, delay: 0, options: [.curveEaseOut]) {
        self.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
    } completion: { _ in
        UIView.animate(withDuration: 0.3, delay: 0, options: [.curveEaseIn]) {
            self.transform = .identity
        }
    }
}

Belső felépítés: Core Animation a motorháztető alatt

A motorháztető alatt az UIView.animate az animációt a Core Animation (CAAnimation) segítségével az egyes UIView-ek CALayer-jéhez delegálja. Amikor módosítja a frame-t az animációs blokkon belül, a rendszer CABasicAnimation-t hoz létre a megfelelő réteg position és bounds tulajdonságaihoz. Ha az alpha változik — CABasicAnimation a réteg opacity tulajdonságához.

A Core Animation egy külön render server folyamatot (iOS-en backboardd) használ, amely 120 Hz (ProMotion) frekvencián dolgozza fel az animációkat. Az UIView.animate nem blokkolja a fő szálat — a tulajdonságváltoztatások a render server-hez kerülnek, amely az alkalmazás részvétele nélkül interpolálja a képkockákat.

Az Apple szerint az UIView.animate-en keresztüli animációk ~2-3% CPU többletterheléssel járnak minden módosított rétegnél 60 FPS-en. Tömeges animációkhoz (20+ objektum egyidejűleg) a CATransaction és a rétegek kézi kezelése ajánlott.

Az UIKit animációk hibakereséséhez és vizualizálásához használja az Xcode Debug View Hierarchy-t — megjeleníti az aktív CAAnimations-okat minden rétegen, azok időtartamát, görbéjét és aktuális állapotát. A Core Animation belső felépítésének megértése segít elkerülni a teljesítményproblémákat összetett animációknál, és kiválasztani az optimális megközelítést az UIView.animate és a CABasicAnimation közvetlen használata között.