اسلایدر پرتابی ری‌اکت (React Throwable Slider)
کامپوننت اسلایدر تعاملی و مبتنی بر فیزیک قلاب‌سنگ برای React و Tailwind CSS
طراح و توسعه‌دهنده
۱۴۰۴
توسعه وب
7 فناوری استفاده‌شده
اسلایدر پرتابی قلاب‌سنگ رو همین‌جا زنده در مرورگر امتحان کنید
💡 نکته: به صورت افقی بکشید تا مثل اسلایدر معمولی تغییر کنه، یا دستگیره رو به سمت پایین بکشید و رها کنید تا قلاب‌سنگ پرتاب بشه!
پرواز قلاب‌سنگ، پیش‌بینی مسیر و تنظیم مقادیر زنده
نحوه عملکرد اسلایدر رو در ویدیوی ضبط‌شده ببینید: کشیدن دستگیره به سمت پایین برای کشش کشسان، مشاهده مسیر نقطه‌چین پیش‌بینی و رهاسازی برای پرتاب و فرود روی مقدار موردنظر.
راهنمای تست و بررسی
- 1دستگیره اسلایدر رو به صورت افقی بکشید تا مثل یک اسلایدر معمولی مقدار تغییر کنه.
- 2دستگیره رو به سمت پایین بکشید تا حالت تیروکمان و کش‌های الاستیک فعال بشن.
- 3مسیر سهمی‌گون نقطه‌چین و مقدار پیش‌بینی‌شده فرود رو بررسی کنید.
- 4دستگیره رو رها کنید تا با شتاب جاذبه در هوا اوج بگیره و روی نوار فرود بیاد.
- 5افکت موج و لرزش فرود رو مشاهده کنید که مقدار جدید رو نهایی می‌کنه.
درباره این پروژه
یک کامپوننت اسلایدر خلاقانه و مبتنی بر شبیه‌سازی فیزیک قلاب‌سنگ برای React و Tailwind CSS. کاربر می‌تونه مثل اسلایدر معمولی دستگیره رو افقی بکشه یا اون رو مثل تیروکمان به سمت پایین بکشه تا با کمان پرتابی سهمی‌گون در طول نوار حرکت کنه و روی مقدار دلخواه بشینه! ویژگی‌هایی مثل مصرف رم و پردازنده در حد صفر در حالت سکون (0% Idle CPU)، سازگاری با نمایشگرهای لمسی و ماوس، کالیبراسیون مقادیر پله‌ای و اعشاری، پشتیبانی کامل از کیبورد و نصب فوق‌سریع با دستور NPX داره.
ویژگی‌ها و امکانات
فیزیک پرتاب قلاب‌سنگ و کمان سهمی‌گون
محاسبه لحظه‌ای مسیر بالستیک روی بوم Canvas، شبیه‌سازی شتاب جاذبه در زمان پرواز و افکت موج بازخورد (Ripple) در لحظه فرود.
مصرف پردازنده صفر در حالت سکون (0% Idle CPU)
حلقه انیمیشن requestAnimationFrame تنها در حین تعامل کاربر و پرواز فعاله و بلافاصله پس از نشستن دستگیره خاموش می‌شه.
نصب و تزریق بدون دغدغه با NPX
توسعه‌دهندگان می‌تونن مثل کامپوننت‌های shadcn/ui تنها با یک دستور (`npx react-throwable-slider`) کامپوننت رو به پروژه اضافه کنن.
مدل تعاملی دوگانه (تنظیم نرم یا پرتاب هیجانی)
تغییر نرم افقی برای مقادیر حساس و دقیق، همراه با سوییچ هوشمند به حالت تیروکمان در صورت کشیدن به سمت پایین.
پشتیبانی از گام‌های پله‌ای و مقادیر علامت‌دار
پشتیبانی از فواصل پله‌ای دلخواه (مثلاً ۰.۱، ۱، ۱۵) و نمایش خودکار علامت‌های مثبت/منفی برای پارامترهایی مثل گین صدا و نوردهی دوربین.
دسترس‌پذیری کامل کیبورد و صفحه‌خوان
پشتیبانی استاندارد از ARIA Slider، کلیدهای جهت‌نما، Home و End، به همراه مدیریت یکپارچه رویدادهای اشاره‌گر (Pointer Events).
پشت‌صحنه فنی و معماری
این کامپوننت با React 19، تایپ‌اسکریپت و استایل‌های Tailwind CSS طراحی شده و برای رندر مسیر پرتاب و کش‌ها از HTML5 Canvas 2D بهره می‌بره. برای جلوگیری از ری‌رندرهای مکرر ری‌اکت در سرعت ۶۰ یا ۱۲۰ فریم بر ثانیه، مختصات پرواز در Refهای محلی نگهداری می‌شن و تنها مقدار نهایی پس از فرود به استیت ری‌اکت فرستاده می‌شه.
نکات برجسته فنی
- معماری ترکیبی Canvas + DOM برای تفکیک محاسبات فیزیک پرسرعت از چرخه ری‌رندرهای ری‌اکت
- توقف کامل حلقه requestAnimationFrame در زمان سکون اسلایدر برای بهینه‌سازی باتری و منابع سیستم
- مقیاس‌بندی هوشمند با ضریب پیکسلی دستگاه (DPR) برای وضوح کریستالی در نمایشگرهای رتینا
- استفاده از Pointer Events API و setPointerCapture برای جلوگیری از قطع لمس هنگام خروج از کادر
- ارائه هوک و Ref کنترلی (ThrowableSliderHandle) برای قابلیت reset و getValue به شکل دستوری
- پکیجینگ دوگانه به عنوان کتابخانه NPM و اسکریپت CLI برای استفاده در npx
فرانت‌اند و رابط کاربری
فیزیک و گرافیک
انتشار و ابزارها
چالش‌ها و راه‌حل‌های مهندسی
جلوگیری از اتلاف شارژ باتری و بار پردازشی ناشی از اجرای مداوم requestAnimationFrame در کامپوننت‌های رابط کاربری.
پیاده‌سازی چرخه حیات برحسب تقاضا (On-Demand): حلقه انیمیشن تنها با Pointer Down فعال می‌شود، پرواز و افکت موج فرود را متحرک می‌کند و بلافاصله پس از نشستن دستگیره متوقف می‌گردد.
تفکیک هوشمند کشیدن افقی برای تنظیم دقیق از کشیدن عمودی برای پرتاب قلاب‌سنگ بدون تاخیر در دریافت ورودی.
اعمال آستانه هیسترزیس جهتی در کنترلر جابجایی؛ انحراف‌های عمودی کمتر از ۶ پیکسل به عنوان کشیدن خطی معمولی در نظر گرفته می‌شوند و عبور از این حد حالت کمان پرتابی را فعال می‌کند.
تضمین کیفیت و شفافیت بالای خطوط منحنی کانواس در صفحات با تراکم پیکسلی مختلف و تغییر اندازه صفحه.
ترکیب ResizeObserver و نسبت پیکسلی دستگاه (window.devicePixelRatio) روی حافظه بافر کانواس، که ابعاد فیزیکی رندر را بدون به هم زدن چیدمان CSS هماهنگ نگه می‌دارد.
مکانیک شبیه‌سازی فیزیک و کانواس ۲ بعدی
نوآوری اصلی این اسلایدر در پیوند دادن رابط کاربری دقیق و مرسوم وب با فیزیک پرتاب بالستیک است، بدون اینکه تاخیری در پاسخ‌دهی به ورودی‌های لمسی یا ماوس به وجود آید.
معادله مسیر پرواز سهمی
مسیر پرتاب با روش انتگرال‌گیری اویلر به ازای هر گام زمانی محاسبه می‌شود:
$$x(t) = x_0 + v_x \cdot t$$ $$y(t) = y_0 + v_y \cdot t + \frac12 g \cdot t^2$$
با تغییر مقدار شتاب گرانش $g$ و ضریب نیروی پرتاب، می‌توان رفتار اسلایدر را برای سناریوهای مختلف بازی یا تنظیمات سیستم شخصی‌سازی کرد.