UIView.animate: ano ito, animasyon ng mga katangian ng UIView sa iOS

Ano ang UIView.animate?

UIView.animate — isang static na pamamaraan ng klase ng UIView, na ipinakilala sa iOS 4 (2010). Nagbibigay ito ng deklaratibong API para sa pag-animate ng mga animatable na katangian ng UIView: frame, bounds, center, alpha, transform, backgroundColor. Ang pamamaraan ay tumatanggap ng bloke (pagsasara) na may mga pagbabago sa katangian — awtomatikong gumagawa ang system ng CABasicAnimation para sa bawat binagong katangian.

Ang syntax ng bloke ay pumalit sa lumang beginAnimations/commitAnimations (iOS 2-3) at naging pamantayan ng animasyon sa UIKit. Ang mga animasyon ng UIView.animate ay isinasagawa sa pangunahing thread at hindi hinaharangan ang UI. Bilang default, ang tagal ng animasyon ay 0.25 segundo na may kurba na easeInOut.

Ayon sa datos ng Apple WWDC 2023, ang inirerekomendang paraan ng animasyon sa mga bagong proyekto ay SwiftUI na may mga modifier na .animation() at .transition(), ngunit ang UIKit.animate ay nananatiling pangunahing kasangkapan para sa suporta ng iOS 16 at mas luma, pati na rin para sa mga kumplikadong custom na transition.

Mga parameter at opsyon ng animasyon

UIView.animate ay nagbibigay ng tatlong pangunahing parameter: duration (tagal sa segundo), delay (pagkaantala bago magsimula) at options (set ng bit mask na UIView.AnimationOptions). Kasama sa options ang curve (easeInOut, easeIn, easeOut, linear), repeat (pag-uulit), autoreverse (awtomatikong pagbaliktad), allowUserInteraction, beginFromCurrentState at overrideInheritedDuration.

Ang parameter na options ay pinagsama sa pamamagitan ng array: [.curveEaseOut, .repeat, .autoreverse]. Ang animasyon na may repeat at autoreverse ay maayos na ibinabalik ang View sa orihinal na estado at umuulit nang walang hanggan. Para sa limitadong bilang ng pag-uulit, gamitin ang animateKeyframes.

Animasyon ng spring sa pamamagitan ng UIView.animate

Animasyon ng spring ay nagdaragdag ng pisikal na epekto ng spring: ang bagay ay hindi lamang lumilipat mula sa punto A patungong B, kundi lumalampas sa target na may lumulubog na mga oscillation. Mga parameter: usingSpringWithDamping (pagpigil 0-1, kung saan 0 — pinakamataas na oscillation) at initialSpringVelocity (paunang bilis ng spring).

Inirerekomenda ng Apple ang usingSpringWithDamping sa saklaw na 0.4-0.8 para sa natural na mga animasyon ng UI. Ang halagang 0.5 ay lumilikha ng kapansin-pansing pagtalbog nang walang pakiramdam ng goma. Ang initialSpringVelocity = 1.0 ay tumutugma sa bilis na 1 pt/seg. Sa 0, nagsisimula ang animasyon mula sa estado ng pahinga.

// Halimbawa ng spring at keyframe na animasyon
import UIKit

class AnimatedView: UIView {

    func springBounce() {
        // Spring animasyon na may pagpigil
        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
        }
    }
}

Animasyon ng keyframe

UIView.animateKeyframes ay nagpapahintulot na hatiin ang animasyon sa maraming hakbang (keyframes), bawat isa ay may sariling relatibong oras at tagal. Ang pamamaraang addKeyframe(withRelativeStartTime:relativeDuration:) ay tumatanggap ng mga halaga ng oras mula 0 hanggang 1 na may kaugnayan sa kabuuang tagal ng animasyon.

Ang mga animasyon ng keyframe ay kapaki-pakinabang para sa maraming-hakbang na mga epekto: pagpintig ng button (paglaki → pause → pagbalik), sunud-sunod na paglitaw ng mga elemento, kumplikadong pagbabago na may mga intermediate na estado. Ang bawat keyframe ay maaaring magkaroon ng sariling kurba ng animasyon sa pamamagitan ng options.

// Keyframe animasyon na may kumplikadong pagkakasunod-sunod
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
        }
    }
}

// Animasyon na may nested na pagsasara
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
        }
    }
}

Panloob na istruktura: Core Animation sa likod ng eksena

Sa likod ng eksena, ang UIView.animate ay nagde-delegate ng animasyon sa CALayer ng bawat UIView sa pamamagitan ng Core Animation (CAAnimation). Kapag binago mo ang frame sa loob ng bloke ng animasyon, gumagawa ang system ng CABasicAnimation para sa mga katangiang position at bounds ng kaukulang layer. Kung babaguhin ang alpha — CABasicAnimation para sa katangiang opacity ng layer.

Ang Core Animation ay gumagamit ng hiwalay na proseso ng render server (backboardd sa iOS) na nagpoproseso ng mga animasyon sa frequency na 120 Hz (ProMotion). Hindi hinaharangan ng UIView.animate ang pangunahing thread — ang mga pagbabago sa katangian ay ipinapadala sa render server, na nag-i-interpolate ng mga frame nang walang partisipasyon ng app.

Ayon sa Apple, ang mga animasyon sa pamamagitan ng UIView.animate ay may overhead na ~2-3% CPU para sa bawat binagong layer sa 60 FPS. Para sa malawakang mga animasyon (20+ bagay nang sabay-sabay) inirerekomenda ang paggamit ng CATransaction at manu-manong pamamahala ng layer.

Para sa pag-debug at visualization ng mga animasyon ng UIKit, gamitin ang Xcode Debug View Hierarchy — ipinapakita nito ang mga aktibong CAAnimations sa bawat layer, ang kanilang tagal, kurba, at kasalukuyang estado. Ang pag-unawa sa panloob na istruktura ng Core Animation ay tumutulong na maiwasan ang mga problema sa pagganap sa mga kumplikadong animasyon at pumili ng pinakamainam na diskarte sa pagitan ng UIView.animate at direktang paggamit ng CABasicAnimation.