Reduce Motion mobil tətbiqlərdə: mahiyyəti, hərəkətin azaldılması parametrləri

Accessibility-də Reduce Motion nədir?

Reduce Motion — əməliyyat sisteminə, brauzerə və tətbiqlərə animasiyanı, hərəkəti, miqyaslamanı və parallaks effektlərini minimallaşdırmağı və ya tamamilə söndürməyi tapşıran sistem parametridir. Funksiya hərəkət edən interfeys elementləri ürəkbulanma, başgicəllənmə, oriyentasiya itkisi və miqrenə səbəb olan vestibulyar pozuntuları olan insanlar üçün nəzərdə tutulub.

Daxili qulağın vestibulyar sistemi tarazlıq hissi və məkanda oriyentasiya üçün cavabdehdir. Gözlər ekranda hərəkəti gördükdə, vestibulyar aparat isə bədənin müvafiq hərəkətini hiss etmədikdə, sensor konflikt yaranır. Bu konflikt vegetativ reaksiyaya səbəb olur: ürəkbulanma, soyuq tər, başgicəllənmə. Vestibular Disorders Association məlumatlarına görə, 40 yaşdan yuxarı insanların təxminən 35%-i interfeyslərdə hərəkət effektlərindən narahatlıq hiss edir.

Reduce Motion-un sadə animasiya söndürülməsindən əsas fərqi — sistem səviyyəsidir. Aktivləşdirilmiş parametr bütün tətbiqlərə və veb-saytlara ƏS API və ya CSS prefers-reduced-motion media funksiyası vasitəsilə ötürülür. Tərtibatçı istifadəçinin animasiya istəyib-istəmədiyini təxmin etməməlidir — ƏS bu barədə məlumat verir. Bu, progressive enhancement yanaşmasının bir hissəsidir: animasiya təkmilləşdirmədir, məcburi element deyil.

Reduce Motion hansı effektləri söndürür

Reduce Motion parallaks effektlərinə (cihaz əyildikdə fonun dəyişməsi), ekranlar arası keçid animasiyalarına (push, slide, fade), klikləmə zamanı ikonların miqyaslanmasına, mesaj effektlərinə (SMS baloncukları), yükləmə animasiyasına (spinner, skeleton, progress bar animation), oyunlarda parallaks və veb parallax scrolling effektlərinə təsir edir. Statik şəkillər və videolar təsirlənmir.

Reduce Motion kimə lazımdır

Reduce Motion-un əsas hədəf auditoriyası — vestibulyar pozuntuları (Meniere xəstəliyi, labirintit, BPPV), miqreni (xüsusilə auralı), kinetozu (nəqliyyatda hərəkət xəstəliyi) və bəzi epilepsiya formaları olan insanlardır. Funksiya həmçinin yaşlı istifadəçilər üçün faydalıdır — vestibulyar aparatın yaşa bağlı dəyişiklikləri hərəkətə həssaslığı artırır, həmçinin DEHB olan istifadəçilər üçün — hərəkət edən elementlər oxumaqdan yayındırır.

iOS-da Reduce Motion: parametr və sistem effektləri

iOS-da Reduce Motion Settings > Accessibility > Motion ünvanında yerləşir və üç seçim daxildir: Reduce Motion (əsas açar), Auto-Play Message Effects (iMessage effektlərinin avtomatik oynadılması) və Auto-Play Video Previews (App Store-da videoların avtomatik oynadılması). Reduce Motion ən güclüdür: divar kağızı parallaksını, tətbiqlərin açılma animasiyasını (zoom), ekranlar arası keçidləri (push cross-fade ilə əvəz olunur) və ana ekranda ikon effektlərini söndürür.

Texniki olaraq iOS Reduce Motion-u UIKit səviyyəsində UIView animations və UIViewControllerAnimatedTransitioning vasitəsilə həyata keçirir. Parametr aktiv olduqda, müddəti > 0 olan UIView.animate 0.01 saniyəyə qədər qısaldılır, UIViewController.transitionDuration isə 0 qaytarır. Parallaks üçün iOS UIWindow-da UIInterpolatingMotionEffect-i söndürür. Tərtibatçı vəziyyəti UIAccessibility.isReduceMotionEnabled vasitəsilə yoxlaya bilər.

iOS tətbiqində Reduce Motion-un yoxlanılması

Tərtibatçı iOS-da animasiyanı Reduce Motion-a uyğunlaşdıra bilər: mürəkkəb keçidləri fade effektləri ilə əvəz etmək, xüsusi UI komponentlərində parallaksı söndürmək və animasiya müddətini qısaltmaq. SwiftUI aktiv reduceMotion olduqda xüsusi .animation(nil) modifierini təqdim edir.

import UIKit

class MotionManager {

    // Reduce Motion vəziyyətinin yoxlanılması
    static var isReduceMotionEnabled: Bool {
        return UIAccessibility.isReduceMotionEnabled
    }

    // Reduce Motion nəzərə alınmaqla təhlükəsiz animasiya
    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 üçün 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 dəyişikliyinə abunə
NotificationCenter.default.addObserver(
    self,
    selector: #selector(motionStatusChanged),
    name: UIAccessibility.reduceMotionStatusDidChangeNotification,
    object: nil
)

MotionManager sinfi isReduceMotionEnabled-i yoxlayır və animasiya müddətini uyğunlaşdırır: aktiv Reduce Motion olduqda müddət 0.01 saniyəyə qədər qısaldılır (faktiki olaraq dərhal). SwiftUI .animation(nil) modifieri reduceMotion == true olduqda animasiyanı tamamilə söndürür. reduceMotionStatusDidChangeNotification-a abunə olmaq tətbiqi yenidən yükləmədən animasiyanı dinamik dəyişməyə imkan verir.

iMessage-da Auto-Play Message Effects

iOS-un ayrıca seçimi — Auto-Play Message Effects — iMessage-da effektlərin oynadılmasını idarə edir: balon animasiyası, konfeti, lazerlər və atəşfəşanlıq. Reduce Motion aktiv olduqda iMessage effektləri avtomatik söndürülür. Tərtibatçı bu seçimi UIAccessibility.isReduceMotionEnabled vasitəsilə yoxlaya bilər — Message Effects üçün ayrıca API yoxdur, onlar ümumi parametrə bağlıdır.

Android-də animasiyanı sil: Developer Options və Accessibility

Android-də "Animasiyanı sil" parametri iki yerdə yerləşir: Parametrlər > Xüsusi imkanlar > Animasiyanı sil (accessibility parametrləri üçün) və Tərtibatçı seçimləri > Animasiya miqyası (tərtibatçılar üçün). Accessibility versiyası bütün sistem animasiyalarını, o cümlədən ekranlar arası keçidləri, tətbiqlərin açılma animasiyasını və yükləmə effektlərini söndürür. Tərtibatçı seçimləri miqyası 0.5x, 0.1x azaltmağa və ya tamamilə söndürməyə imkan verir.

Texniki olaraq Android animasiyanı söndürməni sistem xüsusiyyətləri vasitəsilə həyata keçirir: window_animation_scale, transition_animation_scale və animator_duration_scale. Accessibility parametrində hər üçü 0 dəyərini alır. Sistem Launcher və sistem tətbiqləri bu dəyərləri yoxlayır. Üçüncü tərəf tətbiqləri üçün Android Jetpack Compose və View system-dən istifadə etməyi tövsiyə edir ki, onlar AnimationScaleObserver vasitəsilə sistem parametrini avtomatik oxuyur.

Android tətbiqində yoxlama

Tərtibatçı Android-də animasiya vəziyyətini Settings.Global vasitəsilə yoxlaya və UI-ni uyğunlaşdıra bilər. Jetpack Compose avtomatik uyğunlaşma üçün AnimationScaleObserver təqdim edir. Əsas dəyər — animator_duration_scale: əgər 0-dırsa, animasiya tamamilə söndürülüb.

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 {

    // Animasiyanın söndürülməsinin yoxlanılması
    fun isAnimationDisabled(context: Context): Boolean {
        return try {
            Settings.Global.getFloat(
                context.contentResolver,
                Settings.Global.ANIMATOR_DURATION_SCALE
            ) == 0f
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Animasiya dəyişikliyinin müşahidəsi (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 — parametrlər nəzərə alınmaqla animasiya
@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"
    )
    // Animasiya ilə UI
}

AndroidMotionHelper sinfi ANIMATOR_DURATION_SCALE-i Settings.Global vasitəsilə yoxlayır, dəyişiklikləri izləmək üçün ContentObserver təqdim edir və Jetpack Compose animasiyalarının uyğunlaşmasına imkan verir: animasiya söndürüldükdə durationMillis = 0 (dərhal tətbiq). View sistemi üçün ViewPropertyAnimator.withLayer() istifadə edin və animasiyanı başlamazdan əvvəl isAnimationDisabled() yoxlayın.

Accessibility və Developer Options arasındakı fərq

Android-də "Animasiyanı sil" accessibility parametri — adi istifadəçinin animasiyanı söndürməsinin yeganə yoludur. Tərtibatçı seçimləri yalnız tərtibatçılar üçün nəzərdə tutulub və gizlənə bilər. Accessibility parametri bütün tətbiqlərə sistem API vasitəsilə ötürülməyə zəmanət verir. Tərtibatçı AccessibilityManager-ə istinad etməlidir, Tərtibatçı seçimlərinə deyil.

CSS prefers-reduced-motion: veb üçün media funksiyası

CSS media funksiyası prefers-reduced-motion veb tərtibatçılara istifadəçi əməliyyat sistemində Reduce Motion-u aktivləşdirdikdə animasiyanı söndürməyə və ya əvəz etməyə imkan verir. Brauzer aktiv sistem parametrində reduce dəyərini, parametr dəyişdirilməyibsə no-preference dəyərini ötürür. 2020-ci ildən bütün müasir brauzerlər tərəfindən dəstəklənir: Chrome 74+, Safari 10.3+, Firefox 64+, Edge 79+.

MDN və W3C tövsiyəsi — animasiyalarla birlikdə həmişə prefers-reduced-motion: reduce təyin edin. Reduce Motion-u aktivləşdirən istifadəçi pulsasiya, parallaks, karusellərin avtomatik oynadılması və skeleton yükləməni görməməlidir. Animasiya əvəzinə statik məzmun göstərilə bilər və ya minimal müddətli CSS transition istifadə oluna bilər. Aşağıda tam uyğunlaşma nümunəsi verilmişdir.

prefers-reduced-motion vasitəsilə veb səhifənin uyğunlaşdırılması

prefers-reduced-motion: reduce olduqda veb səhifə: CSS animasiyalarını (@keyframes) söndürməli, CSS transition-ları dərhal dəyişikliklərlə əvəz etməli, JavaScript animasiyalarını (requestAnimationFrame) dayandırmalı, parallax scrolling-i söndürməli, karusel və slayderləri dayandırmalı, skeleton effektlərini söndürməli və spinner-i statik göstərici ilə əvəz etməlidir.

/* Əsas animasiyalar (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: hər şeyi söndürürük */
@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 nümunəsində prefers-reduced-motion: reduce zamanı qlobal animasiya sıfırlaması istifadə olunur: bütün animasiyalar və keçidlər duration 0.01ms və iteration-count 1 alır. Ayrıca spinner (statik çərçivə), skeleton (titrəmədən boz fon), parallaks (söndürülüb) və karusel (scroll-behavior: auto smooth əvəzinə) yenidən təyin olunub. Universal selektor * — bütün elementlər üçün təhlükəsizlik.

JavaScript-də prefers-reduced-motion aşkarlanması

JavaScript üçün matchMedia('(prefers-reduced-motion: reduce)').matches mövcuddur. true-dursa, requestAnimationFrame, setInterval və ya Web Animations API vasitəsilə animasiyaları işə salmayın. Nümunə: reduceMotion olduqda sürüşdürücü avtomatik fırlanmır, yalnız düymələr vasitəsilə. GSAP, Framer Motion və Anime.js kitabxanaları öz accessibility seçimləri vasitəsilə bu yoxlamanı dəstəkləyir.

WCAG 2.2: qarşılıqlı təsir animasiyası və 2.3.3 meyarı

WCAG 2.2 (2023) yeni 2.3.3 Animation from Interactions meyarını (AAA səviyyəsi) təqdim etdi: əgər animasiya istifadəçinin qarşılıqlı təsirindən (klik, sürüşdürmə, üzərinə gəlmə) işə düşürsə, o, söndürülə bilən olmalı və ya 5 saniyədən çox olmamalıdır. Qarşılıqlı təsirlə əlaqəli olmayan animasiya (yükləmə spinneri, progress bar) bu meyara düşmür. AA səviyyəsi üçün animasiyanın məlumat ötürməyin yeganə yolu olmaması kifayətdir.

2.3.3 meyarı parallax scrolling və "çək-yenilə" animasiyasından hərəkət xəstəliyi ilə bağlı çoxsaylı şikayətlərdən sonra əlavə edilmişdir. W3C bütün sayt və tətbiqlərə tövsiyə edir: elementləri 5 saniyədən çox animasiya etməyin, animasiyanı söndürmək üçün keçid təqdim edin (idarə paneli və ya prefers-reduced-motion vasitəsilə), pulsasiya edən və yanıb-sönən elementlərdən istifadə etməyin (epilepsiya üçün təhlükəli).

Animasiya üçün WCAG 2.2-yə necə riayət etmək olar

WCAG 2.2-yə uyğunluq üçün tərtibatçı: prefers-reduced-motion-u yoxlamalı və aktiv parametrdə animasiyanı söndürməli, animasiyanın maksimum müddətini 5 saniyə təyin etməli (əgər animasiya söndürülə bilmirsə), tətbiq parametrlərində UI animasiya keçidi təqdim etməli, parallaks effektlərindən yeganə naviqasiya yolu kimi istifadə etməməli və Reduce Motion aktiv olduqda bütün brauzerlərdə və cihazlarda test etməlidir.

• prefers-reduced-motion yoxlanması — CSS/JS animasiyası olan bütün veb-saytlar üçün məcburidir
• Maksimum 5 saniyə — qarşılıqlı təsir animasiyası daha uzun çəkməməlidir (2.3.3 AAA meyarı)
• UI keçidi — tətbiq parametrlərdə animasiyanı söndürmək seçiminə malik olmalıdır
• Parallaks naviqasiyası yox — məzmun yalnız parallax scrolling vasitəsilə əlçatan olmamalıdır

Reduce Motion test alətləri

Reduce Motion ilə tətbiq davranışını test etmək üçün istifadə edin: iOS Simulator (Settings > Accessibility bölməsində Reduce Motion-u aktivləşdirin), Android Emulator ("Animasiyanı sil"-i aktivləşdirin), Chrome DevTools (Rendering > Emulate CSS media feature prefers-reduced-motion), Safari veb inspektoru (macOS System Preferences > Accessibility > Display bölməsində Reduce Motion-u aktivləşdirin). Məzmunun animasiya olmadan əlçatan və oxunaqlı qaldığını yoxlayın.