Frame Rate v mobilních aplikacích — co to je, fps a jak ji zvýšit

Co je Frame Rate

Frame Rate (snímková frekvence) — je metrika měřená ve snímcích za sekundu (fps), která ukazuje, kolikrát za sekundu aplikace aktualizuje obraz na obrazovce. Lidské oko vnímá pohyb jako plynulý od 24 fps (kino), ale pro interaktivní UI je zapotřebí minimálně 60 fps, aby dotyky a animace působily okamžitě. Každý snímek je úplný cyklus: zpracování vstupu uživatele, výpočet Layout, vykreslení hierarchie View a zobrazení na obrazovce. Pokud některá z fází překročí přidělený časový rozpočet (16.6 ms při 60 fps), snímek je zmeškán a uživatel vidí záškub.

Je důležité rozlišovat Frame Rate aplikace od obnovovací frekvence displeje (Refresh Rate). Obnovovací frekvence je charakteristika obrazovky: kolikrát za sekundu displej fyzicky obnovuje obraz (60, 90, 120 nebo 144 Hz). Frame Rate — je kolik snímků za sekundu aplikace stihne vykreslit. Pokud aplikace produkuje 60 fps na 120 Hz displeji, každý druhý snímek bude duplikován — obraz zůstane plynulý, ale ne tak citlivý, jak by mohl být. Podle Google I/O 2023 moderní vlajkové lodě dokážou udržet 120 fps v jednoduchých UI scénářích, ale při těžkém zatížení (hry, složité seznamy) frekvence klesá na 40–60 fps.

Jak funguje vykreslování snímků

Vykreslování snímku v mobilní aplikaci prochází potrubím několika fází. V Androidu potrubí zahrnuje: zpracování vstupu (Input), animaci (Animation), měření a rozmístění (Layout), kreslení (Draw), synchronizaci s GPU a zobrazení na obrazovce (Swap). Každá fáze se provádí na CPU nebo GPU a celkový čas všech fází nesmí překročit rozpočet snímku. Pro 60 fps je rozpočet 16.6 ms, pro 120 fps — 8.3 ms. Choreographer (Android) a CADisplayLink (iOS) synchronizují vykreslování s vertikálním obnovováním displeje (VSync), čímž zaručují, že snímek je zobrazen pouze v okamžiku obnovení obrazovky, čímž se zabrání trhání obrazu (tearing).

V iOS je potrubí podobné: Run Loop zpracovává události, Core Animation počítá vrstvy, Render Server (samostatný proces) vykresluje a odesílá snímek na GPU. Rozdíl iOS — samostatný proces Render Server, který izoluje vykreslování od hlavní aplikace. Pokud aplikace zablokuje hlavní vlákno, Render Server může stále zobrazit poslední známý snímek, ale animace se zastaví. Pokud Render Server sám nestíhá — GPU je nečinné a Frame Rate klesá. Podle Apple WWDC 2022 jsou nejčastějšími příčinami nízkého Frame Rate v iOS nadměrné vnoření CALayer, těžké shadowPath a vykreslování mimo obrazovku (offscreen rendering).

Sledování snímků přes Choreographer

Kód v Kotlin se přihlásí k odběru Choreographer.FrameCallback a loguje skutečný čas mezi snímky. Pokud interval přesahuje 16.6 ms — je zaznamenán zmeškaný snímek.

class FrameRateMonitor {

    private var lastFrameTime = 0L
    private val frameCallback =
        Choreographer.FrameCallback { frameTimeNanos ->
            if (lastFrameTime != 0L) {
                val deltaMs = (frameTimeNanos - lastFrameTime) / 1_000_000f
                if (deltaMs > 16.6f) {
                    Log.w("FrameRate",
                        "Skipped frame: $deltaMs ms")
                }
            }
            lastFrameTime = frameTimeNanos
            Choreographer.getInstance()
                .postFrameCallback(this)
        }

    fun start() {
        Choreographer.getInstance()
            .postFrameCallback(frameCallback)
    }
}

Obnovovací frekvence displeje a Frame Rate

Refresh Rate (obnovovací frekvence) — je hardwarová charakteristika displeje, která určuje, kolikrát za sekundu obrazovka fyzicky překresluje obraz. Standardní displeje mají 60 Hz, moderní vlajkové lodě — 90, 120 nebo 144 Hz. Frame Rate aplikace může být nižší, stejný nebo vyšší než obnovovací frekvence (v posledním případě jsou přebytečné snímky vyřazeny). Ideální scénář — Frame Rate se shoduje s Refresh Rate: každý hardwarový cyklus dostává nový snímek od aplikace a pohyb je maximálně plynulý. Pokud je Frame Rate nižší, displej opakuje poslední snímek, což je vnímáno jako mikro-záškuby (stutter).

Android a iOS podporují dynamické přepínání obnovovací frekvence. Android 12+ používá Smart Refresh Rate: při posouvání systém zvyšuje frekvenci na 120 Hz, při statickém obsahu ji snižuje na 60 Hz pro úsporu baterie. iOS ProMotion (iPhone 13 Pro a novější) funguje podobně — frekvence se pohybuje od 10 do 120 Hz v závislosti na obsahu. Vývojář by měl zkontrolovat, zda zařízení podporuje vysokou frekvenci, a přizpůsobit časový rozpočet na snímek. Pokud aplikace nestíhá vykreslit snímek za 8.3 ms (pro 120 Hz), je lepší vynutit práci na 60 Hz — to zajistí stabilní Frame Rate bez zmeškaných snímků.

Nástroje pro měření Frame Rate

Pro měření Frame Rate v mobilních aplikacích jsou k dispozici jak vestavěné nástroje platforem, tak externí profilery. V Androidu je hlavním nástrojem GPU Profiling (Developer Options → Profile GPU Rendering), který zobrazuje časovou osu každého snímku s rozpisem podle fází (Draw, Prepare, Process, Execute). Podrobnější analýzu poskytuje Android Studio Profiler — zaznamenává úplný profil vykreslování s uvedením konkrétních View, které způsobují překreslování. V iOS se používá Instruments se šablonou Core Animation — zobrazuje FPS, čas vykreslování vrstev a počet vykreslení mimo obrazovku.

Pro monitorování Frame Rate v produkci se používá Firebase Performance (Android) — sbírá Frame Rate na pozadí a agreguje podle zařízení, verzí OS a relací. V iOS poskytuje MetricKit podobná data prostřednictvím MXAnimatoryMetric. Pro hry a Flutter aplikace se používají FrameTimingCallback (Flutter) a Unity Profiler. Je důležité měřit ne průměrný Frame Rate, ale percentily: P50, P90 a P99. Aplikace může vykazovat průměr 55 fps, ale mít P99 = 30 fps — to znamená, že 1% času uživatelé vidí silné záškuby, a to stačí k negativním recenzím.

Měření Frame Rate ve Flutter

Příklad v Dartu ukazuje, jak se přihlásit k odběru FrameTimingCallback ve Flutter a logovat počet zmeškaných snímků. Callback se spouští po každém dokončeném snímku.

import 'package:flutter/scheduler.dart';

class FrameRateLogger {
    int totalFrames = 0;
    int missedFrames = 0;

    void start() {
        SchedulerBinding.instance
            .addTimingsCallback(_onReportTimings);
    }

    void _onReportTimings(List<FrameTiming> timings) {
        for (final timing in timings) {
            totalFrames++;
            if (timing.totalSpan()
                > Duration(milliseconds: 16)) {
                missedFrames++;
            }
        }
        debugPrint("FPS: \${totalFrames - missedFrames}");
    }
}

Optimalizace snímkové frekvence

Optimalizace Frame Rate začíná identifikací úzkých míst v potrubí vykreslování. Ve fázi Layout jsou hlavními problémy nadměrné vnoření hierarchie View, používání relativních Layout (RelativeLayout s velkým počtem pravidel) a časté volání requestLayout. Řešení — použít ConstraintLayout nebo plochou hierarchii, vyhnout se vnoření více než 5–6 úrovní. Ve fázi Draw — překreslování (overdraw): když je pixel kreslen několikrát za snímek. Například bílé pozadí Activity pod poloprůhledným fragmentem, pod kterým je další vrstva — každý pixel je kreslen třikrát. Nástroj Debug GPU Overdraw zobrazuje problémové zóny barevnou indikací. Doporučuje se udržovat overdraw na úrovni 2x nebo nižší.

V iOS jsou hlavními problémy těžké cornerRadius a masksToBounds — způsobují vykreslování mimo obrazovku (offscreen rendering), při kterém Core Animation vytvoří dočasný buffer, kreslí do něj a poté zkopíruje výsledek na obrazovku. Offscreen rendering je snadno viditelný v Instruments Core Animation: pokud je řádek Renderer červený — existují problémy. Řešení — použít UIImageView s předem oříznutými obrázky místo cornerRadius, vyhnout se groupOpacity a shouldRasterize bez nutnosti. Pro obě platformy je klíčové minimalizovat počet volání invalidate() a setNeedsDisplay() — každé takové volání spouští úplný cyklus překreslení pohledu.

Optimalizace hierarchie v Androidu

Kód demonstruje nahrazení hlubokého vnoření RelativeLayout plochou strukturou ConstraintLayout. Snížení úrovně vnoření ze 4 na 1 zkracuje čas Layout o 30–50%.

// Příklad: plochá struktura přes ConstraintLayout
class OptimizedView(context: Context) :
    ConstraintLayout(context) {

    private val binding =
        ItemProfileBinding.inflate(
            LayoutInflater.from(context)
        )

    fun bind(user: User) {
        binding.avatar.setImageURI(user.avatarUrl)
        binding.nameText.text = user.name
        // vázání dat bez překreslování celého kontejneru
    }
}

Adaptivní frekvence a Dynamic Frame Rate

Moderní mobilní aplikace stále častěji používají adaptivní Frame Rate — systém, který dynamicky přizpůsobuje cílovou frekvenci aktuálnímu scénáři. Při rychlém posouvání seznam vyžaduje 120 fps pro plynulost, při statické obrazovce stačí 60 fps nebo dokonce 30 fps pro video. V Androidu je adaptace realizována prostřednictvím Choreographer.setFrameInterval (API 33+) a Window.setFrameRate. Vývojář může systému sdělit preferovanou frekvenci: setPreferredRefreshRate v SurfaceView nebo setFrameRate v Window. iOS automaticky spravuje frekvenci prostřednictvím ProMotion, ale vývojář může explicitně nastavit preferredFramesPerSecond pro CADisplayLink.

Dynamický Frame Rate je obzvláště důležitý pro hry a aplikace s animacemi. Podle údajů Google snižuje snížení Frame Rate ze 120 na 60 Hz na statické obrazovce spotřebu energie GPU až o 30–40%. Pro dosažení nejlepší rovnováhy mezi plynulostí a spotřebou energie se doporučuje: měřit skutečný Frame Rate v různých scénářích, nastavit cílové fps podle scény (hra — 60, menu — 30, video — 24) a přepínat režimy prostřednictvím Lifecycle-aware komponent, aby aplikace při minimalizaci neplýtvala prostředky na vykreslování 120 fps na pozadí.

Nastavení preferovaného Frame Rate

Kód v Swift nastavuje preferredFramesPerSecond pro CADisplayLink v iOS. Při posouvání frekvence stoupá na 120 Hz, při zastavení — klesá na 60 Hz.

class AdaptiveFrameRateManager {

    private var displayLink: CADisplayLink?

    func startWithHighRate() {
        displayLink = CADisplayLink(
            target: self,
            selector: #selector(step)
        )
        if #available(iOS 15.0, *) {
            displayLink?.preferredFrameRateRange =
                CAFrameRateRange(
                    minimum: 60,
                    maximum: 120,
                    preferred: 120
                )
        }
        displayLink?.add(to: .current,
            forMode: .common)
    }

    @objc
    private func step() {
        // aktualizace animace
    }
}