Reduce Motion a mobilalkalmazásokban: lényeg, a mozgáscsökkentés beállításai

Mi az a Reduce Motion az akadálymentesítésben?

Reduce Motion — egy rendszerbeállítás, amely utasítja az operációs rendszert, a böngészőt és az alkalmazásokat, hogy minimalizálják vagy teljesen kapcsolják ki az animációt, mozgást, nagyítást és parallaxeffektusokat. A funkció a vesztibuláris zavarokkal küzdő emberek számára készült, akiknél a mozgó felületelemek hányingert, szédülést, dezorientációt és migrént okoznak.

A belső fül vesztibuláris rendszere felelős az egyensúlyérzékért és a térbeli tájékozódásért. Amikor a szemek mozgást látnak a képernyőn, de a vesztibuláris rendszer nem érzékeli a test megfelelő mozgását, érzékszervi konfliktus keletkezik. Ez a konfliktus vegetatív reakciót vált ki: hányingert, hideg verejtékezést, szédülést. A Vestibular Disorders Association adatai szerint a 40 év felettiek körülbelül 35%-a tapasztal kellemetlenséget a mozgáseffektusoktól a felületeken.

A Reduce Motion fő különbsége az egyszerű animációkikapcsoláshoz képest — a rendszerszint. A bekapcsolt beállítás az operációs rendszer API-ján vagy a CSS prefers-reduced-motion médiafunkción keresztül minden alkalmazásba és weboldalba továbbítódik. A fejlesztőnek nem kell találgatnia, hogy a felhasználó akar-e animációt — a rendszer jelzi ezt. Ez a progressive enhancement megközelítés része: az animáció egy fejlesztés, nem kötelező elem.

Milyen effektusokat kapcsol ki a Reduce Motion

Reduce Motion hatással van a parallaxeffektusokra (a háttér elmozdulása a készülék megdöntésekor), a képernyők közötti átmenetek animációira (push, slide, fade), az ikonok nagyítására kattintáskor, az üzeneteffektusokra (SMS-buborékok), a betöltési animációra (spinner, skeleton, progress bar animation), a játékokbeli parallaxra és a webes parallax scrolling effektusokra. A statikus képek és videók nem érintettek.

Kinek van szüksége a Reduce Motion-ra

A Reduce Motion fő célközönsége — a vesztibuláris zavarokkal (Meniere-betegség, labirintitisz, BPPV), migrénnel (különösen aurával), kinetózissal (utazási betegség) és bizonyos epilepsziaformákkal küzdő emberek. A funkció az idősebb felhasználók számára is hasznos — a vesztibuláris rendszer életkorral összefüggő változásai növelik a mozgásérzékenységet, valamint az ADHD-s felhasználók számára — a mozgó elemek elvonják a figyelmet az olvasástól.

Reduce Motion iOS-ben: beállítás és rendszereffektusok

iOS-ben a Reduce Motion a Settings > Accessibility > Motion menüben található, és három opciót tartalmaz: Reduce Motion (főkapcsoló), Auto-Play Message Effects (az iMessage-effektusok automatikus lejátszása) és Auto-Play Video Previews (videók automatikus előnézete az App Store-ban). A Reduce Motion a legerősebb: kikapcsolja a háttérkép parallaxot, az alkalmazások megnyitásának animációját (zoom), a képernyők közötti átmeneteket (a push-t cross-fade helyettesíti) és az ikoneffektusokat a kezdőképernyőn.

Technikailag az iOS a Reduce Motion-t UIKit szinten valósítja meg a UIView animations és UIViewControllerAnimatedTransitioning segítségével. Bekapcsolt beállításnál a > 0 időtartamú UIView.animate 0,01 másodpercre csökken, és az UIViewController.transitionDuration 0-t ad vissza. Parallax esetén az iOS kikapcsolja az UIInterpolatingMotionEffect-et az UIWindow-n. A fejlesztő az UIAccessibility.isReduceMotionEnabled segítségével ellenőrizheti az állapotot.

A Reduce Motion ellenőrzése iOS-alkalmazásban

A fejlesztő az animációt iOS-ben a Reduce Motion-hoz igazíthatja: a bonyolult átmeneteket fade effektusokkal helyettesítheti, kikapcsolhatja a parallaxot az egyedi UI-összetevőkben, és lerövidítheti az animációk időtartamát. A SwiftUI egy speciális .animation(nil) módosítót biztosít aktív reduceMotion esetén.

import UIKit

class MotionManager {

    // A Reduce Motion állapotának ellenőrzése
    static var isReduceMotionEnabled: Bool {
        return UIAccessibility.isReduceMotionEnabled
    }

    // Biztonságos animáció a Reduce Motion figyelembevételével
    static func animate(
        duration: TimeInterval,
        delay: TimeInterval = 0,
        options: UIView.AnimationOptions = [],
        animations: @escaping () -> Void,
        completion: ((Bool) -> Void)? = nil
    ) {
        let adjustedDuration = isReduceMotionEnabled
            ? 0.01
            : max(duration, 0.01)
        UIView.animate(
            withDuration: adjustedDuration,
            delay: delay,
            options: options,
            animations: animations,
            completion: completion
        )
    }
}

// SwiftUI — módosító a Reduce Motion-hoz
import SwiftUI

struct MotionAwareView: View {
    @Environment(\.accessibilityReduceMotion)
    private var reduceMotion

    @State private var isAnimating = false

    var body: some View {
        Circle()
            .scaleEffect(isAnimating ? 1.2 : 1.0)
            .animation(
                reduceMotion
                    ? nil
                    : .easeInOut(duration: 1.0).repeatForever(),
                value: isAnimating
            )
            .onAppear { isAnimating = true }
    }
}

// Feliratkozás a Reduce Motion változására
NotificationCenter.default.addObserver(
    self,
    selector: #selector(motionStatusChanged),
    name: UIAccessibility.reduceMotionStatusDidChangeNotification,
    object: nil
)

A MotionManager osztály ellenőrzi az isReduceMotionEnabled tulajdonságot, és hozzáigazítja az animáció időtartamát: aktív Reduce Motion esetén az időtartam 0,01 másodpercre csökken (gyakorlatilag azonnali). A SwiftUI .animation(nil) módosító teljesen kikapcsolja az animációt, ha a reduceMotion == true. A reduceMotionStatusDidChangeNotificationra való feliratkozás lehetővé teszi az animáció dinamikus váltását az alkalmazás újratöltése nélkül.

Auto-Play Message Effects az iMessage-ben

Egy külön iOS-opció — Auto-Play Message Effects — az iMessage effektusainak lejátszását vezérli: buborékanimáció, konfetti, lézerek és tűzijáték. Bekapcsolt Reduce Motion esetén az iMessage-effektusok automatikusan kikapcsolnak. A fejlesztő ezt az opciót az UIAccessibility.isReduceMotionEnabled segítségével ellenőrizheti — a Message Effects-hez nincs külön API, ezek az általános beállításhoz vannak kötve.

Animáció eltávolítása Androidban: Developer Options és Accessibility

Android-ban az „Animáció eltávolítása” beállítás két helyen található: Beállítások > Kisegítő lehetőségek > Animáció eltávolítása (a kisegítő lehetőségek beállításaihoz) és Fejlesztői beállítások > Animációs méretarány (fejlesztők számára). A kisegítő lehetőségek verziója az összes rendszeranimációt kikapcsolja, beleértve a képernyők közötti átmeneteket, az alkalmazások megnyitásának animációját és a betöltési effektusokat. A Fejlesztői beállítások lehetővé teszik a méretarány 0,5x, 0,1x-re csökkentését vagy teljes kikapcsolását.

Technikailag az Android az animáció kikapcsolását rendszertulajdonságokon keresztül valósítja meg: window_animation_scale, transition_animation_scale és animator_duration_scale. A kisegítő lehetőségek beállításánál mindhárom 0 értéket kap. A rendszerindító és a rendszeralkalmazások ellenőrzik ezeket az értékeket. Harmadik féltől származó alkalmazásokhoz az Android a Jetpack Compose és View system használatát ajánlja, amelyek automatikusan leolvassák a rendszerbeállítást az AnimationScaleObserver segítségével.

Ellenőrzés Android-alkalmazásban

A fejlesztő az animáció állapotát Android-ban a Settings.Global segítségével ellenőrizheti, és hozzáigazíthatja a felületet. A Jetpack Compose AnimationScaleObserver-t biztosít az automatikus hozzáigazításhoz. A kulcsérték — animator_duration_scale: ha 0, az animáció teljesen ki van kapcsolva.

import android.content.Context
import android.provider.Settings
import android.database.ContentObserver
import android.os.Handler
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.runtime.getValue

class AndroidMotionHelper {

    // Az animáció kikapcsolásának ellenőrzése
    fun isAnimationDisabled(context: Context): Boolean {
        return try {
            Settings.Global.getFloat(
                context.contentResolver,
                Settings.Global.ANIMATOR_DURATION_SCALE
            ) == 0f
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Az animáció változásának megfigyelése (ContentObserver)
    fun observeAnimationScale(
        context: Context,
        onChange: (Boolean) -> Unit
    ): ContentObserver {
        val observer = object : ContentObserver(Handler()) {
            override fun onChange(selfChange: Boolean) {
                onChange(isAnimationDisabled(context))
            }
        }
        context.contentResolver.registerContentObserver(
            Settings.Global.getUriFor(
                Settings.Global.ANIMATOR_DURATION_SCALE
            ),
            false,
            observer
        )
        return observer
    }
}

// Jetpack Compose — animáció a beállítások figyelembevételével
@Composable
fun MotionAwareAnimation(enabled: Boolean) {
    val context = androidx.compose.ui.platform.LocalContext.current
    val noMotion = AndroidMotionHelper().isAnimationDisabled(context)

    val scale by animateFloatAsState(
        targetValue = if (enabled) 1f else 0f,
        animationSpec = if (noMotion) {
            androidx.compose.animation.core.tween(durationMillis = 0)
        } else {
            androidx.compose.animation.core.spring()
        },
        label = "scale"
    )
    // UI animációval
}

Az AndroidMotionHelper osztály ellenőrzi az ANIMATOR_DURATION_SCALE értékét a Settings.Global segítségével, ContentObserver-t biztosít a változások követéséhez, és lehetővé teszi a Jetpack Compose animációk hozzáigazítását: kikapcsolt animációnál a durationMillis = 0 (azonnali alkalmazás). A View-rendszerhez használja a ViewPropertyAnimator.withLayer()-t, és ellenőrizze az isAnimationDisabled()-t az animáció elindítása előtt.

Különbség az Accessibility és a Developer Options között

Az „Animáció eltávolítása” kisegítő lehetőségek beállítás az Android-ban — az egyetlen módja az átlagos felhasználó számára az animáció kikapcsolásának. A Fejlesztői beállítások csak fejlesztők számára készültek, és elrejthetők. A kisegítő lehetőségek beállítás garantáltan továbbításra kerül az összes alkalmazásba a rendszer API-n keresztül. A fejlesztőnek az AccessibilityManager-re kell hagyatkoznia, nem a Fejlesztői beállításokra.

CSS prefers-reduced-motion: médiafunkció a webhez

A CSS médiafunkció prefers-reduced-motion lehetővé teszi a webfejlesztők számára, hogy kikapcsolják vagy lecseréljék az animációt, amikor a felhasználó bekapcsolta a Reduce Motion-t az operációs rendszerben. A böngésző a reduce értéket adja át aktív rendszerbeállításnál, no-preference értéket — ha a beállítás nincs megváltoztatva. 2020 óta minden modern böngésző támogatja: Chrome 74+, Safari 10.3+, Firefox 64+, Edge 79+.

Az MDN és a W3C ajánlása — mindig állítsa be a prefers-reduced-motion: reduce értéket az animációkkal együtt. Az a felhasználó, aki bekapcsolta a Reduce Motion-t, ne lásson pulzálást, parallaxot, karusszelek automatikus lejátszását és skeleton betöltést. Animáció helyett statikus tartalom jeleníthető meg, vagy minimális időtartamú CSS transition használható. Alább egy teljes adaptációs példa látható.

Weboldal adaptációja prefers-reduced-motion segítségével

prefers-reduced-motion: reduce esetén a weboldalnak: ki kell kapcsolnia a CSS-animációkat (@keyframes), a CSS transition-eket azonnali változtatásokkal kell helyettesítenie, le kell állítania a JavaScript-animációkat (requestAnimationFrame), ki kell kapcsolnia a parallax scrolling-ot, le kell állítania a karusszeleket és csúszkákat, ki kell kapcsolnia a skeleton-effektusokat, és a spinner-t statikus jelzővel kell helyettesítenie.

/* Alap animációk (no-preference) */
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e0e0e0;
    border-top-color: #0066CC;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e8e8e8 37%,
        #f0f0f0 63%
    );
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
}

.parallax-bg {
    transform: translateZ(-1px) scale(1.5);
    transition: transform 0.3s ease-out;
}

/* Reduce Motion: mindent kikapcsolunk */
@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation: none;
        border-top-color: #0066CC;
    }

    .skeleton {
        animation: none;
        background: #f0f0f0;
    }

    .parallax-bg {
        transform: none;
        transition: none;
    }

    .carousel {
        scroll-behavior: auto;
        overflow-x: auto;
    }

    .fade-in {
        opacity: 1;
        transform: none;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

A CSS-példában globális animáció-visszaállítás használatos prefers-reduced-motion: reduce esetén: minden animáció és átmenet duration 0.01ms és iteration-count 1 értéket kap. Külön felül lettek definiálva a spinner (statikus szegély), a skeleton (szürke háttér villogás nélkül), a parallax (kikapcsolva) és a karusszel (scroll-behavior: auto a smooth helyett). Az univerzális * szelektor — biztonság az összes elem számára.

prefers-reduced-motion észlelése JavaScript-ben

JavaScript számára elérhető a matchMedia('(prefers-reduced-motion: reduce)').matches. Ha true — ne indítson animációkat requestAnimationFrame, setInterval vagy Web Animations API segítségével. Példa: a csúszka reduceMotion esetén nem forog automatikusan, csak gombokkal. A GSAP, Framer Motion és Anime.js könyvtárak támogatják ezt az ellenőrzést a saját akadálymentesítési opcióikon keresztül.

WCAG 2.2: interakciós animáció és a 2.3.3 kritérium

A WCAG 2.2 (2023) bevezetett egy új 2.3.3 Animation from Interactions kritériumot (AAA szint): ha az animációt felhasználói interakció (kattintás, görgetés, ráhúzás) indítja el, annak kikapcsolhatónak kell lennie, vagy nem haladhatja meg az 5 másodpercet. Az interakcióhoz nem kapcsolódó animáció (betöltési spinner, folyamatjelző) nem tartozik e kritérium alá. Az AA szinthez elegendő, ha az animáció nem az egyetlen információtovábbítási mód.

A 2.3.3 kritériumot számos, a parallax scrolling és a „húzás-frissítés” animáció által okozott mozgási rosszullétre vonatkozó panasz után adták hozzá. A W3C minden weboldalnak és alkalmazásnak ajánlja: ne animáljon elemeket 5 másodpercnél tovább, biztosítson kapcsolót az animáció kikapcsolásához (vezérlőpulton vagy prefers-reduced-motion segítségével), ne használjon pulzáló és villogó elemeket (veszélyes az epilepsziára).

Hogyan tartsuk be a WCAG 2.2-t az animációkra vonatkozóan

A WCAG 2.2 betartásához a fejlesztőnek: ellenőriznie kell a prefers-reduced-motion-t, és ki kell kapcsolnia az animációt aktív beállításnál, be kell állítania az animáció maximális időtartamát 5 másodpercre (ha az animáció nem kapcsolható ki), biztosítania kell egy UI-kapcsolót az animációhoz az alkalmazás beállításaiban, nem használhat parallaxeffektusokat egyetlen navigációs módként, és tesztelnie kell bekapcsolt Reduce Motion mellett minden böngészőben és eszközön.

• prefers-reduced-motion ellenőrzése — kötelező minden CSS/JS animációt használó weboldal számára
• Maximum 5 másodperc — az interakciós animáció nem tarthat tovább (2.3.3 AAA kritérium)
• UI-kapcsoló — az alkalmazásnak rendelkeznie kell az animáció kikapcsolásának lehetőségével a beállításokban
• Nincs parallax navigáció — a tartalom nem lehet csak parallax scrolling útján elérhető

A Reduce Motion tesztelésének eszközei

Az alkalmazás viselkedésének teszteléséhez Reduce Motion esetén használja: iOS Simulator (kapcsolja be a Reduce Motion-t a Settings > Accessibility menüben), Android Emulator (kapcsolja be az „Animáció eltávolítása” opciót), Chrome DevTools (Rendering > Emulate CSS media feature prefers-reduced-motion), Safari webinspektor (kapcsolja be a Reduce Motion-t a macOS System Preferences > Accessibility > Display menüben). Ellenőrizze, hogy a tartalom animáció nélkül is elérhető és olvasható marad.