یک میکروانیمیشن ساده می‌تواند تجربهٔ کاربری را روان‌تر کند، اما باید سریع، قابل دسترس و قابل نگهداری باشد. در این پست نحوهٔ ساخت یک دکمهٔ تعاملی با Framer Motion و رعایت prefers-reduced-motion را مرور می‌کنیم.

مراحل کلیدی
1. نصب: Framer Motion (official).
2. تعریف variants برای حالت‌های hover و tap.
3. استفاده از <motion.button> به‌جای <button>.
4. پشتیبانی از prefers-reduced-motion برای دسترسی بهتر.
5. نکات عملکردی: انیمیشن‌های مختصر و عدم محاسبهٔ layout سنگین.

نمونه کد

import React from 'react'
import { motion } from 'framer-motion'

const Btn = () => {
  const variants = { hover: { scale: 1.06 }, tap: { scale: 0.98 } }
  return (
    <motion.button
      variants={variants}
      whileHover="hover"
      whileTap="tap"
      style={{padding: '10px 16px', borderRadius: 8}}
      aria-label="Send"
    >Send</motion.button>
  )
}

export default Btn

چرا مفید است؟
انیمیشن‌های کوچک تعامل را قابل‌فهم‌تر می‌کنند و بازخورد فوری به کاربر می‌دهند؛ مخصوصا در فرم‌ها، دکمه‌ها و لیست‌های قابل کلیک. با رعایت prefers-reduced-motion تجربه برای همه امن و راحت می‌ماند.

پیشنهاد: داکیومنت رسمی Framer Motion را ببینید و این قطعه را در پروژهٔ کوچک خود امتحان کنید. اگر مفید بود، به اشتراک بگذارید!

🔖 #Design #طراحی #UI #UX #react #framer_motion #ui #animation #accessibility

👤 Developix

💎 Channel: @DevelopixDesign