| کانال طراحی و رابط‌کاربری |
یک میکروانیمیشن ساده می‌تواند تجربهٔ کاربری را روان‌تر کند، اما باید سریع، قابل دسترس و قابل نگهداری باشد. در این پست نحوهٔ ساخت یک دکمهٔ تعاملی با 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
13 · 1.9K ·