Reduce Motion في تطبيقات الجوال: الجوهر وإعدادات تقليل الحركة

ما هو Reduce Motion في إمكانية الوصول؟

Reduce Motion — إعداد نظام يوجه نظام التشغيل والمتصفح والتطبيقات إلى تقليل أو إيقاف الرسوم المتحركة والحركة والقياس وتأثيرات المنظور تماماً. الميزة مخصصة للأشخاص الذين يعانون من اضطرابات الدهليز، حيث تسبب العناصر المتحركة في الواجهة لديهم الغثيان والدوار والتوهان والصداع النصفي.

الجهاز الدهليزي في الأذن الداخلية مسؤول عن الإحساس بالتوازن والتوجه في الفضاء. عندما ترى العينان حركة على الشاشة ولا يستشعر الجهاز الدهليزي الحركة المقابلة للجسم، ينشأ تعارض حسي. يطلق هذا التعارض استجابة ذاتية: الغثيان والعرق البارد والدوار. وفقاً لجمعية اضطرابات الدهليز، يشعر نحو 35% من الأشخاص فوق سن الأربعين بعدم الراحة من تأثيرات الحركة في الواجهات.

الفرق الأساسي بين Reduce Motion والإيقاف البسيط للرسوم المتحركة هو المستوى النظامي. عند التفعيل، ينتقل الإعداد إلى جميع التطبيقات والمواقع عبر واجهة برمجة تطبيقات النظام أو دالة وسائط CSS prefers-reduced-motion. لا يحتاج المطور إلى التخمين هل يريد المستخدم الرسوم المتحركة — فالنظام يخبره بذلك. وهذا جزء من نهج التحسين التدريجي: الرسوم المتحركة تحسين وليست عنصراً إلزامياً.

ما التأثيرات التي يوقفها Reduce Motion

Reduce Motion يؤثر على تأثيرات المنظور (انزياح الخلفية عند إمالة الجهاز)، ورسوم الانتقال بين الشاشات (push وslide وfade)، وقياس الأيقونات عند الضغط، وتأثيرات الرسائل (فقاعات الرسائل النصية)، ورسوم التحميل (مؤشر التحميل والهيكل العظمي وشريط التقدم)، والمنظور في الألعاب وتأثيرات التمرير متعدد الطبقات في الويب. الصور الثابتة والفيديو لا تتأثر.

من يحتاج إلى Reduce Motion

الجمهور الأساسي لـReduce Motion هم الأشخاص الذين يعانون من اضطرابات الدهليز (مرض مينيير والتهاب التيه والدوار الوضعي الحميد)، والصداع النصفي (خاصة مع الهالة)، وداء الحركة (الدوار في وسائل النقل)، وبعض أشكال الصرع. الميزة مفيدة أيضاً للمستخدمين الأكبر سناً — فالتغيرات المرتبطة بالعمر في الجهاز الدهليزي تزيد الحساسية للحركة — وللمستخدمين المصابين باضطراب فرط الحركة ونقص الانتباه، لأن العناصر المتحركة تشتت الانتباه عن القراءة.

Reduce Motion في iOS: الإعداد والتأثيرات النظامية

في iOS يوجد Reduce Motion في Settings > Accessibility > Motion ويتضمن ثلاثة خيارات: Reduce Motion (المفتاح الرئيسي)، وAuto-Play Message Effects (التشغيل التلقائي لتأثيرات iMessage)، وAuto-Play Video Previews (التشغيل التلقائي للفيديو في App Store). Reduce Motion هو الأقوى: فهو يوقف منظور الخلفية ورسوم فتح التطبيقات (تكبير) والانتقالات بين الشاشات (يُستبدل push بـcross-fade) وتأثيرات الأيقونات على الشاشة الرئيسية.

تقنياً، يطبق iOS Reduce Motion على مستوى UIKit عبر UIView animations وUIViewControllerAnimatedTransitioning. عند تفعيل الإعداد، تُختصر UIView.animate بمدة > 0 إلى 0.01 ثانية، وتُرجع UIViewController.transitionDuration القيمة 0. بالنسبة للمنظور، يوقف iOS UIInterpolatingMotionEffect على UIWindow. يمكن للمطور فحص الحالة عبر UIAccessibility.isReduceMotionEnabled.

فحص Reduce Motion في تطبيق iOS

يمكن للمطور تكييف الرسوم المتحركة في iOS مع Reduce Motion: استبدال الانتقالات المعقدة بتأثيرات تلاشي، وإيقاف المنظور في مكونات الواجهة المخصصة، وتقليل مدة الرسوم المتحركة. يوفر SwiftUI معدِّلاً خاصاً .animation(nil) عند تفعيل reduceMotion.

import UIKit

class MotionManager {

    // التحقق من حالة Reduce Motion
    static var isReduceMotionEnabled: Bool {
        return UIAccessibility.isReduceMotionEnabled
    }

    // رسوم متحركة آمنة تراعي Reduce Motion
    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
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
NotificationCenter.default.addObserver(
    self,
    selector: #selector(motionStatusChanged),
    name: UIAccessibility.reduceMotionStatusDidChangeNotification,
    object: nil
)

تتحقق الفئة MotionManager من isReduceMotionEnabled وتكيف مدة الرسوم المتحركة: عند تفعيل Reduce Motion تُختصر المدة إلى 0.01 ثانية (عملياً فورية). معدِّل .animation(nil) في SwiftUI يوقف الرسوم المتحركة تماماً عندما يكون reduceMotion == true. الاشتراك في reduceMotionStatusDidChangeNotification يتيح تبديل الرسوم المتحركة ديناميكياً دون إعادة تشغيل التطبيق.

Auto-Play Message Effects في iMessage

خيار منفصل في iOS — Auto-Play Message Effects — يتحكم في تشغيل التأثيرات في iMessage: رسوم البالونات والقصاصات والليزر والألعاب النارية. عند تفعيل Reduce Motion، تُوقف تأثيرات iMessage تلقائياً. يمكن للمطور فحص هذا الخيار عبر UIAccessibility.isReduceMotionEnabled — لا توجد واجهة برمجة منفصلة لتأثيرات الرسائل؛ فهي مرتبطة بالإعداد العام.

إزالة الحركة في Android: خيارات المطورين وإمكانية الوصول

في Android يوجد إعداد «إزالة الحركة» في مكانين: Settings > Accessibility > إزالة الحركة (لإعدادات إمكانية الوصول) وخيارات المطور > مقياس الرسوم المتحركة (للمطورين). إصدار إمكانية الوصول يوقف جميع رسوم النظام، بما في ذلك الانتقالات بين الشاشات ورسوم فتح التطبيقات وتأثيرات التحميل. تتيح خيارات المطور تقليل المقياس إلى 0.5x أو 0.1x أو إيقافه تماماً.

تقنياً، يطبق Android إيقاف الرسوم المتحركة عبر خصائص النظام: window_animation_scale وtransition_animation_scale وanimator_duration_scale. مع إعداد إمكانية الوصول، تحصل الثلاثة على القيمة 0. يفحص المشغل النظامي والتطبيقات النظامية هذه القيم. للتطبيقات الخارجية، يوصي Android باستخدام Jetpack Compose ونظام View، اللذين يقرآن إعداد النظام تلقائياً عبر AnimationScaleObserver.

الفحص في تطبيق Android

يمكن للمطور فحص حالة الرسوم المتحركة في Android عبر Settings.Global وتكييف الواجهة. يوفر Jetpack Compose AnimationScaleObserver للتكيف التلقائي. القيمة الأساسية هي animator_duration_scale: إذا كانت 0، تكون الرسوم المتحركة موقوفة تماماً.

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 {

    // التحقق من إيقاف الرسوم المتحركة
    fun isAnimationDisabled(context: Context): Boolean {
        return try {
            Settings.Global.getFloat(
                context.contentResolver,
                Settings.Global.ANIMATOR_DURATION_SCALE
            ) == 0f
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // مراقبة تغيير الرسوم المتحركة (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 — رسوم تراعي الإعدادات
@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"
    )
    // واجهة مع رسوم متحركة
}

تتحقق الفئة AndroidMotionHelper من ANIMATOR_DURATION_SCALE عبر Settings.Global، وتوفر ContentObserver لتتبع التغييرات، وتسمح لرسوم Jetpack Compose بالتكيف: عند إيقاف الرسوم المتحركة، تكون durationMillis = 0 (تطبيق فوري). لنظام View استخدم ViewPropertyAnimator.withLayer() وافحص isAnimationDisabled() قبل تشغيل الرسوم المتحركة.

الفرق بين إمكانية الوصول وخيارات المطورين

إعداد إمكانية الوصول «إزالة الحركة» في Android هو الطريقة الوحيدة للمستخدم العادي لإيقاف الرسوم المتحركة. خيارات المطور مخصصة للمطورين فقط وقد تكون مخفية. ينتقل إعداد إمكانية الوصول بشكل مضمون إلى جميع التطبيقات عبر واجهة برمجة النظام. يجب على المطور الاعتماد على AccessibilityManager وليس على خيارات المطورين.

CSS prefers-reduced-motion: دالة وسائط للويب

دالة وسائط CSS prefers-reduced-motion تتيح لمطوري الويب إيقاف الرسوم المتحركة أو استبدالها عندما فعّل المستخدم Reduce Motion في نظام التشغيل. يرسل المتصفح القيمة reduce عند تفعيل إعداد النظام، وno-preference إذا لم يُعدَّل الإعداد. مدعومة في جميع المتصفحات الحديثة منذ 2020: Chrome 74+ وSafari 10.3+ وFirefox 64+ وEdge 79+.

توصية MDN وW3C — تعيين prefers-reduced-motion: reduce دائماً مع الرسوم المتحركة. يجب ألا يرى المستخدم الذي فعّل Reduce Motion نبضات أو منظوراً أو عروضاً تلقائية أو تحميلاً هيكلياً. بدلاً من الرسوم المتحركة يمكن عرض محتوى ثابت أو استخدام انتقال CSS بمدة ضئيلة. فيما يلي مثال على التكيف الكامل.

تكييف صفحة الويب عبر prefers-reduced-motion

مع prefers-reduced-motion: reduce يجب أن تقوم صفحة الويب بما يلي: إيقاف رسوم CSS المتحركة (@keyframes)، واستبدال انتقالات CSS بتغييرات فورية، وإيقاف رسوم JavaScript (requestAnimationFrame)، وإيقاف التمرير متعدد الطبقات، وإيقاف العروض والشرائح، وإيقاف تأثيرات الهيكل العظمي، واستبدال مؤشر التحميل بمؤشر ثابت.

/* رسوم أساسية (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: نوقف كل شيء */
@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 يُستخدم إعادة ضبط شاملة للرسوم المتحركة عند prefers-reduced-motion: reduce: تحصل جميع الرسوم والانتقالات على مدة 0.01ms وiteration-count 1. أُعيد تعريف مؤشر التحميل (حدود ثابتة) والهيكل العظمي (خلفية رمادية دون وميض) والمنظور (موقوف) والعرض (scroll-behavior: auto بدلاً من smooth) بشكل منفصل. المحدد العام * هو شبكة أمان لجميع العناصر.

اكتشاف prefers-reduced-motion في JavaScript

بالنسبة إلى JavaScript تتوفر matchMedia('(prefers-reduced-motion: reduce)').matches. إذا كانت true — لا تشغّل رسوماً متحركة عبر requestAnimationFrame أو setInterval أو واجهة Web Animations API. مثال: شريط التمرير عند reduceMotion لا يتحرك تلقائياً، بل بالأزرار فقط. تدعم مكتبات GSAP وFramer Motion وAnime.js هذا الفحص عبر خيارات إمكانية الوصول الخاصة بها.

WCAG 2.2: الرسوم المتحركة الناتجة عن التفاعل والمعيار 2.3.3

أدخل WCAG 2.2 (2023) معياراً جديداً 2.3.3 Animation from Interactions (المستوى AAA): إذا كانت الرسوم المتحركة تُطلق من تفاعل المستخدم (نقرة أو تمرير أو تحويم)، فيجب أن تكون قابلة للإيقاف أو ألا تتجاوز 5 ثوانٍ. الرسوم غير المرتبطة بالتفاعل (مؤشر التحميل أو شريط التقدم) لا تخضع لهذا المعيار. بالنسبة إلى المستوى AA يكفي ألا تكون الرسوم المتحركة الطريقة الوحيدة لنقل المعلومات.

أُضيف المعيار 2.3.3 بعد شكاوى عديدة من دوار الحركة الناجم عن التمرير متعدد الطبقات ورسوم «السحب للتحديث». توصي W3C جميع المواقع والتطبيقات: عدم تحريك العناصر لأكثر من 5 ثوانٍ، وتقديم مفتاح لإيقاف الرسوم المتحركة (عبر لوحة تحكم أو prefers-reduced-motion)، وعدم استخدام العناصر النابضة والوامضة (خطر على مرضى الصرع).

كيف تلتزم بـWCAG 2.2 للرسوم المتحركة

للامتثال لـWCAG 2.2 يحتاج المطور إلى: فحص prefers-reduced-motion وإيقاف الرسوم المتحركة عند تفعيل الإعداد، وتحديد أقصى مدة للرسوم المتحركة 5 ثوانٍ (إذا تعذر إيقافها)، وتقديم مفتاح واجهة لإيقاف الرسوم المتحركة في إعدادات التطبيق، وعدم استخدام تأثيرات المنظور كطريقة وحيدة للتنقل، والاختبار مع تفعيل Reduce Motion في جميع المتصفحات والأجهزة.

• فحص prefers-reduced-motion — إلزامي لجميع المواقع ذات الرسوم المتحركة CSS/JS
• الحد الأقصى 5 ثوانٍ — لا يجب أن تستمر الرسوم الناتجة عن التفاعل أطول من ذلك (المعيار 2.3.3 AAA)
• مفتاح الواجهة — يجب أن يتوفر في التطبيق خيار إيقاف الرسوم المتحركة في الإعدادات
• لا تنقل بالمنظور — يجب ألا يكون المحتوى متاحاً فقط عبر التمرير متعدد الطبقات

أدوات اختبار Reduce Motion

لاختبار سلوك التطبيق مع Reduce Motion استخدم: iOS Simulator (فعّل Reduce Motion في Settings > Accessibility)، وAndroid Emulator (فعّل «إزالة الحركة»)، وChrome DevTools (Rendering > Emulate CSS media feature prefers-reduced-motion)، ومتصفح Safari الفاحص (فعّل Reduce Motion في macOS System Preferences > Accessibility > Display). تأكد من بقاء المحتوى متاحاً وقابلاً للقراءة دون رسوم متحركة.