Reduce Motion mobil ilovalarda: mohiyati, harakatni kamaytirish sozlamalari

Accessibility-da Reduce Motion nima?

Reduce Motion — operatsion tizimga, brauzerga va ilovalarga animatsiyani, harakatni, masshtablashni va parallaks effektlarini minimallashtirishni yoki butunlay o'chirishni buyuruvchi tizim sozlamasidir. Funksiya harakatlanuvchi interfeys elementlari ko'ngil aynishi, bosh aylanishi, orientatsiya yo'qolishi va migrenga sabab bo'ladigan vestibulyar buzilishlari bo'lgan odamlar uchun mo'ljallangan.

Ichki quloqning vestibulyar tizimi muvozanat hissi va fazoda orientatsiya uchun javobgardir. Ko'zlar ekranda harakatni ko'rganida, vestibulyar apparat esa tananing tegishli harakatini sezmaganida, sensor ziddiyat yuzaga keladi. Bu ziddiyat vegetativ reaksiyani qo'zg'atadi: ko'ngil aynishi, sovuq ter, bosh aylanishi. Vestibulyar Buzilishlar Assotsiatsiyasi ma'lumotlariga ko'ra, 40 yoshdan oshgan odamlarning taxminan 35 foizi interfeyslardagi harakat effektlaridan noqulaylik his qiladi.

Reduce Motion ning oddiy animatsiyani o'chirishdan asosiy farqi — tizim darajasidir. Faollashtirilgan sozlama barcha ilovalar va veb-saytlarga OT API yoki CSS prefers-reduced-motion media funksiyasi orqali uzatiladi. Ishlab chiqaruvchi foydalanuvchi animatsiyani xohlaydimi yoki yo'qmi, deb taxmin qilishi shart emas — OT bu haqda xabar beradi. Bu progressive enhancement yondashuvining bir qismidir: animatsiya yaxshilanishdir, majburiy element emas.

Reduce Motion qanday effektlarni o'chiradi

Reduce Motion parallaks effektlariga (qurilma egilganda fonning siljishi), ekranlar orasidagi o'tish animatsiyalariga (push, slide, fade), bosishda ikonkalarning masshtablanishiga, xabar effektlariga (SMS pufakchalari), yuklash animatsiyasiga (spinner, skeleton, progress bar animation), o'yinlardagi parallaks va veb parallax scrolling effektlariga ta'sir qiladi. Statik tasvirlar va videolar ta'sirlanmaydi.

Reduce Motion kimga kerak

Reduce Motion ning asosiy maqsadli auditoriyasi — vestibulyar buzilishlari (Meniere kasalligi, labirintit, BPPV), migren (ayniqsa aurali), kinetoz (transportda harakat kasalligi) va ba'zi epilepsiya shakllari bo'lgan odamlardir. Funksiya shuningdek keksa foydalanuvchilar uchun foydali — vestibulyar apparatning yoshga bog'liq o'zgarishlari harakatga sezgirlikni oshiradi, hamda DEHB bo'lgan foydalanuvchilar uchun — harakatlanuvchi elementlar o'qishdan chalg'itadi.

iOS-da Reduce Motion: sozlama va tizim effektlari

iOS-da Reduce Motion Settings > Accessibility > Motion da joylashgan va uchta opsiyani o'z ichiga oladi: Reduce Motion (asosiy kalit), Auto-Play Message Effects (iMessage effektlarini avtomatik ijro etish) va Auto-Play Video Previews (App Store-da videolarni avtomatik ijro etish). Reduce Motion eng kuchlisi: fon rasmi parallaksini, ilovalarni ochish animatsiyasini (zoom), ekranlar orasidagi o'tishlarni (push cross-fade bilan almashtiriladi) va bosh ekranda ikonka effektlarini o'chiradi.

Texnik jihatdan iOS Reduce Motion ni UIKit darajasida UIView animations va UIViewControllerAnimatedTransitioning orqali amalga oshiradi. Sozlama faol bo'lganda, davomiyligi > 0 bo'lgan UIView.animate 0.01 sekundgacha qisqartiriladi va UIViewController.transitionDuration 0 qaytaradi. Parallaks uchun iOS UIWindow da UIInterpolatingMotionEffect ni o'chiradi. Ishlab chiqaruvchi holatni UIAccessibility.isReduceMotionEnabled orqali tekshirishi mumkin.

iOS ilovasida Reduce Motion ni tekshirish

Ishlab chiqaruvchi iOS-da animatsiyani Reduce Motion ga moslashtirishi mumkin: murakkab o'tishlarni fade effektlari bilan almashtirish, maxsus UI komponentlarida parallaksni o'chirish va animatsiyalar davomiyligini qisqartirish. SwiftUI faol reduceMotion bo'lganda maxsus .animation(nil) modifikatorini taqdim etadi.

import UIKit

class MotionManager {

    // Reduce Motion holatini tekshirish
    static var isReduceMotionEnabled: Bool {
        return UIAccessibility.isReduceMotionEnabled
    }

    // Reduce Motion hisobga olingan holda xavfsiz animatsiya
    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 — Reduce Motion uchun modifikator
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 }
    }
}

// Reduce Motion o'zgarishiga obuna
NotificationCenter.default.addObserver(
    self,
    selector: #selector(motionStatusChanged),
    name: UIAccessibility.reduceMotionStatusDidChangeNotification,
    object: nil
)

MotionManager sinfi isReduceMotionEnabled ni tekshiradi va animatsiya davomiyligini moslashtiradi: faol Reduce Motion bo'lganda, davomiylik 0.01 sekundgacha qisqartiriladi (amalda bir zumda). SwiftUI .animation(nil) modifikatori reduceMotion == true bo'lganda animatsiyani butunlay o'chiradi. reduceMotionStatusDidChangeNotification ga obuna bo'lish ilovani qayta yuklamasdan animatsiyani dinamik ravishda o'zgartirish imkonini beradi.

iMessage da Auto-Play Message Effects

iOS-ning alohida opsiyasi — Auto-Play Message Effects — iMessage da effektlarning ijro etilishini boshqaradi: shar animatsiyasi, konfeti, lazerlar va otashin. Reduce Motion faol bo'lganda iMessage effektlari avtomatik ravishda o'chiriladi. Ishlab chiqaruvchi bu opsiyani UIAccessibility.isReduceMotionEnabled orqali tekshirishi mumkin — Message Effects uchun alohida API yo'q, ular umumiy sozlamaga bog'langan.

Android-da animatsiyani o'chirish: Developer Options va Accessibility

Android-da "Animatsiyani o'chirish" sozlamasi ikki joyda joylashgan: Sozlamalar > Maxsus imkoniyatlar > Animatsiyani o'chirish (accessibility sozlamalari uchun) va Dasturchi parametrlari > Animatsiya masshtabi (dasturchilar uchun). Accessibility versiyasi barcha tizim animatsiyalarini, jumladan ekranlar orasidagi o'tishlarni, ilovalarni ochish animatsiyasini va yuklash effektlarini o'chiradi. Dasturchi parametrlari masshtabni 0.5x, 0.1x gacha kamaytirish yoki butunlay o'chirish imkonini beradi.

Texnik jihatdan Android animatsiyani o'chirishni tizim xususiyatlari orqali amalga oshiradi: window_animation_scale, transition_animation_scale va animator_duration_scale. Accessibility sozlamasida uchalasi ham 0 qiymatini oladi. Tizim Launcher va tizim ilovalari bu qiymatlarni tekshiradi. Uchinchi tomon ilovalari uchun Android Jetpack Compose va View system dan foydalanishni tavsiya qiladi, ular AnimationScaleObserver orqali tizim sozlamasini avtomatik o'qiydi.

Android ilovasida tekshirish

Ishlab chiqaruvchi Android-da animatsiya holatini Settings.Global orqali tekshirishi va UI ni moslashtirishi mumkin. Jetpack Compose avtomatik moslashtirish uchun AnimationScaleObserver ni taqdim etadi. Asosiy qiymat — animator_duration_scale: agar 0 bo'lsa, animatsiya butunlay o'chirilgan.

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 {

    // Animatsiyani o'chirishni tekshirish
    fun isAnimationDisabled(context: Context): Boolean {
        return try {
            Settings.Global.getFloat(
                context.contentResolver,
                Settings.Global.ANIMATOR_DURATION_SCALE
            ) == 0f
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Animatsiya o'zgarishini kuzatish (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 — sozlamalar hisobga olingan holda animatsiya
@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"
    )
    // Animatsiya bilan UI
}

AndroidMotionHelper sinfi ANIMATOR_DURATION_SCALE ni Settings.Global orqali tekshiradi, o'zgarishlarni kuzatish uchun ContentObserver ni taqdim etadi va Jetpack Compose animatsiyalarining moslashishiga imkon beradi: animatsiya o'chirilganda durationMillis = 0 (bir zumda qo'llash). View tizimi uchun ViewPropertyAnimator.withLayer() dan foydalaning va animatsiyani boshlashdan oldin isAnimationDisabled() ni tekshiring.

Accessibility va Developer Options orasidagi farq

Android-dagi "Animatsiyani o'chirish" accessibility sozlamasi — oddiy foydalanuvchi uchun animatsiyani o'chirishning yagona usulidir. Dasturchi parametrlari faqat dasturchilar uchun mo'ljallangan va yashirin bo'lishi mumkin. Accessibility sozlamasi barcha ilovalarga tizim API orqali uzatilishi kafolatlanadi. Ishlab chiqaruvchi Dasturchi parametrlariga emas, balki AccessibilityManager ga tayanishi kerak.

CSS prefers-reduced-motion: veb uchun media funksiyasi

CSS media funksiyasi prefers-reduced-motion veb ishlab chiqaruvchilarga foydalanuvchi operatsion tizimida Reduce Motion ni yoqqanida animatsiyani o'chirish yoki almashtirish imkonini beradi. Brauzer faol tizim sozlamasida reduce qiymatini, sozlama o'zgartirilmagan bo'lsa no-preference qiymatini uzatadi. 2020 yildan boshlab barcha zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadi: Chrome 74+, Safari 10.3+, Firefox 64+, Edge 79+.

MDN va W3C tavsiyasi — animatsiyalar bilan birga har doim prefers-reduced-motion: reduce ni o'rnating. Reduce Motion ni yoqqan foydalanuvchi pulsatsiya, parallaks, karusellarning avtomatik ijrosi va skeleton yuklashni ko'rmasligi kerak. Animatsiya o'rniga statik kontent ko'rsatilishi yoki minimal davomiylikdagi CSS transition ishlatilishi mumkin. Quyida to'liq moslashtirish namunasi keltirilgan.

prefers-reduced-motion orqali veb-sahifani moslashtirish

prefers-reduced-motion: reduce bo'lganda veb-sahifa: CSS animatsiyalarini (@keyframes) o'chirishi, CSS transitionlarni bir zumda o'zgarishlar bilan almashtirishi, JavaScript animatsiyalarini (requestAnimationFrame) to'xtatishi, parallax scrolling ni o'chirishi, karusel va slayderlarni to'xtatishi, skeleton effektlarini o'chirishi va spinner ni statik ko'rsatkich bilan almashtirishi kerak.

/* Asosiy animatsiyalar (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: hamma narsani o'chiramiz */
@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; }
}

CSS misolida prefers-reduced-motion: reduce da global animatsiya reset ishlatilgan: barcha animatsiyalar va o'tishlar duration 0.01ms va iteration-count 1 oladi. Alohida spinner (statik ramka), skeleton (titrashsiz kulrang fon), parallaks (o'chirilgan) va karusel (scroll-behavior: auto smooth o'rniga) qayta belgilangan. Universal selektor * — barcha elementlar uchun xavfsizlik.

JavaScript da prefers-reduced-motion aniqlash

JavaScript uchun matchMedia('(prefers-reduced-motion: reduce)').matches mavjud. Agar true bo'lsa, requestAnimationFrame, setInterval yoki Web Animations API orqali animatsiyalarni ishga tushirmang. Misol: reduceMotion bo'lganda slayder avtomatik aylanmaydi, faqat tugmalar orqali. GSAP, Framer Motion va Anime.js kutubxonalari o'zlarining accessibility variantlari orqali bu tekshiruvni qo'llab-quvvatlaydi.

WCAG 2.2: o'zaro ta'sir animatsiyasi va 2.3.3 mezoni

WCAG 2.2 (2023) yangi 2.3.3 Animation from Interactions mezonini (AAA darajasi) taqdim etdi: agar animatsiya foydalanuvchining o'zaro ta'siridan (bosish, aylantirish, ustiga olib kelish) ishga tushsa, u o'chirilishi mumkin bo'lishi yoki 5 soniyadan oshmasligi kerak. O'zaro ta'sir bilan bog'liq bo'lmagan animatsiya (yuklash spinneri, progress bar) bu mezon ostiga tushmaydi. AA darajasi uchun animatsiyaning ma'lumot uzatishning yagona usuli bo'lmasligi etarli.

2.3.3 mezoni parallax scrolling va "tort-yangila" animatsiyasidan harakat kasalligi haqidagi ko'plab shikoyatlardan keyin qo'shilgan. W3C barcha sayt va ilovalarga tavsiya qiladi: elementlarni 5 soniyadan ortiq animatsiya qilmang, animatsiyani o'chirish kalitini taqdim eting (boshqaruv paneli yoki prefers-reduced-motion orqali), pulsatsiyalanuvchi va miltillovchi elementlardan foydalanmang (epilepsiya uchun xavfli).

Animatsiya uchun WCAG 2.2 ga qanday rioya qilish kerak

WCAG 2.2 ga muvofiqlik uchun ishlab chiqaruvchi: prefers-reduced-motion ni tekshirishi va faol sozlamada animatsiyani o'chirishi, animatsiyaning maksimal davomiyligini 5 soniya qilib belgilashi (agar animatsiyani o'chirish mumkin bo'lmasa), ilova sozlamalarida UI animatsiya kalitini taqdim etishi, parallaks effektlaridan yagona navigatsiya usuli sifatida foydalanmasligi va Reduce Motion yoqilgan holda barcha brauzer va qurilmalarda sinovdan o'tkazishi kerak.

• prefers-reduced-motion tekshiruvi — CSS/JS animatsiyasi bo'lgan barcha veb-saytlar uchun majburiy
• Maksimum 5 soniya — o'zaro ta'sir animatsiyasi undan uzoq davom etmasligi kerak (2.3.3 AAA mezoni)
• UI kaliti — ilova sozlamalarida animatsiyani o'chirish opsiyasi bo'lishi kerak
• Parallaks navigatsiyasi yo'q — kontent faqat parallax scrolling orqali mavjud bo'lmasligi kerak

Reduce Motion test vositalari

Reduce Motion bilan ilova xatti-harakatini sinash uchun foydalaning: iOS Simulator (Settings > Accessibility da Reduce Motion ni yoqing), Android Emulator ("Animatsiyani o'chirish" ni yoqing), Chrome DevTools (Rendering > Emulate CSS media feature prefers-reduced-motion), Safari veb inspektori (macOS System Preferences > Accessibility > Display da Reduce Motion ni yoqing). Kontentning animatsiyasiz ham mavjud va o'qilishi mumkinligini tekshiring.