platform-adaptation

انیمیشن‌های رابط کاربری را برای پلتفرم‌ها، دستگاه‌ها و زبان‌های RTL سازگار کنید.

این Skill الگوهای موشن را برای iOS، Android، وب، دسکتاپ و دستگاه‌های مختلف تطبیق می‌دهد و تفاوت‌های رایج در ترنزیشن، مودال، ناوبری و تعاملات را در نظر می‌گیرد.

همچنین انیمیشن‌های افقی را برای رابط‌های RTL مانند فارسی و عربی به‌درستی آینه می‌کند، بدون اینکه حرکت عمودی، چرخش یا مقیاس را بی‌دلیل تغییر دهد. نتیجه، تجربه‌ای طبیعی‌تر، پایدارتر و مناسب‌تر برای قابلیت‌های سخت‌افزاری مختلف است.

چه چیزی می‌گیرید

الگوهای موشن سازگار با conventions پلتفرم‌های iOS، Android و وب
منطق آینه‌سازی انیمیشن‌های افقی برای رابط‌های RTL
راهکار تشخیص قابلیت دستگاه و کاهش کیفیت انیمیشن در دستگاه‌های ضعیف
نمونه‌های CSS و JavaScript برای پیاده‌سازی جهت پویا
فهرست خطاهای رایج در تطبیق پلتفرم و internationalization

برای چه کاری خوب است

تیم‌هایی که یک رابط کاربری را برای وب، موبایل و دسکتاپ توسعه می‌دهند
محصولات چندزبانه با پشتیبانی از فارسی، عربی، عبری یا اردو
طراحان و توسعه‌دهندگانی که می‌خواهند موشن‌ها با convention هر پلتفرم هماهنگ باشند
اپلیکیشن‌هایی که باید روی دستگاه‌های ضعیف نیز روان اجرا شوند

برای چه کاری نیست

ساخت انیمیشن‌های کاملاً تزئینی که به تفاوت پلتفرم یا جهت متن وابسته نیستند
پروژه‌هایی که فقط یک پلتفرم و یک جهت نوشتار ثابت دارند
تولید ویدیو یا موشن‌گرافیک مستقل از رابط کاربری

دربارهٔ این اسکیل

Platform Adaptation

Motion patterns that adapt to platform conventions, device capabilities, and internationalization requirements.

Platform-Specific Conventions

iOS / Apple

Pattern	iOS Convention	Implementation
Page transition	Push from right	translateX: 100% to 0
Back navigation	Slide to right	translateX: 0 to 100%
Modal	Slide from bottom	translateY: 100% to 0
Action sheet	Slide from bottom	Spring physics
Pull-to-refresh	Rubber-band effect	Elastic overshoot

Android / Material

Pattern	Android Convention	Implementation
Page transition	Shared axis	Fade + scale
Back navigation	Fade out	Fade through
Modal	Slide from bottom	Container transform
FAB	Scale from center	emphasized-decelerate
Snackbar	Slide from bottom	Quick ease-out

Web / Desktop

Pattern	Desktop Convention	Implementation
Hover states	Immediate feedback	100-150ms transitions
Modals	Fade + scale	Center of viewport
Tooltips	Fade in with delay	200ms delay, 100ms transition
Dropdowns	Fade + slide down	Origin from trigger

RTL (Right-to-Left) Adaptation

For languages like Arabic, Hebrew, Farsi, and Urdu, horizontal animations must be mirrored.

What to Mirror

Animation Type	LTR	RTL
Slide in	from left	from right
Slide out	to right	to left
Page push	from right	from left
Arrow motion	right arrow	left arrow
Progress bar	left to right	right to left
Carousel swipe	left = prev	left = next

What NOT to Mirror

Animation Type	Behavior	Rationale
Vertical motion	Same	Up/down is universal
Rotation	Same	Clockwise is universal
Scale	Same	Center-out is universal
Opacity	Same	Fade is directionless
Z-depth	Same	Toward/away is universal

CSS Implementation

/* Base animation (LTR) */
.slide-in {
  animation: slide-in-ltr 300ms ease-out;
}

@keyframes slide-in-ltr {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* RTL override */
[dir="rtl"] .slide-in {
  animation-name: slide-in-rtl;
}

@keyframes slide-in-rtl {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

JavaScript Direction Helper

function getDirectionMultiplier() {
  return document.dir === 'rtl' ? -1 : 1;
}

function slideIn(element, options = {}) {
  const dir = getDirectionMultiplier();
  return gsap.from(element, {
    x: (options.distance || 100) * -dir,
    opacity: 0,
    duration: 0.3,
    ease: 'power2.out'
  });
}

Device Capability Adaptation

const capabilities = {
  gpu: detectGPU(),
  memory: navigator.deviceMemory || 4,
  connection: navigator.connection?.effectiveType || '4g',
  cores: navigator.hardwareConcurrency || 4
};

function getAnimationQuality() {
  if (capabilities.memory < 2) return 'minimal';
  if (capabilities.memory < 4) return 'reduced';
  if (capabilities.gpu === 'low-end') return 'standard';
  return 'full';
}

Common Mistakes

Forgetting RTL - Test all horizontal animations in RTL mode
Mirroring everything - Vertical and scale should NOT mirror
Hardcoded directions - Use logical properties and direction multipliers
Platform mismatch - iOS users expect iOS conventions
Ignoring capabilities - Low-end devices need simpler animations

Related Skills

transitions/ - Page transition patterns
accessibility/ - Reduced motion for all platforms
testing-patterns/ - RTL testing strategies
tools/ - Platform-specific tool usage

See references/ for complete Framer Motion and Remotion RTL implementations.

دانلود ZIP