الکسی کوپیتین
۱۱ آگوست ۲۰۲۶
۰ نظر
ساخت تجربه کاربری لمسی: احترام به طراحی هدفمند با Lottie
۹ دقیقه مطالعه
تجربه کاربری، طراحی، انیمیشن
درباره نویسنده
با بیش از ۱۴ سال تجربه و تخصص عمیق در توسعه API، ادغام ابزارهای شخص ثالث و راهکارهای نرمافزاری مقیاسپذیر، الکسی در …
خبرنامه ایمیلی
نکات هفتگی در مورد فرانتاند و تجربه کاربری. مورد اعتماد بیش از ۱۸۲,۰۰۰ نفر.
این مقاله با حمایت دوستان عزیزمان در Isadora Agency تهیه شده است که به برندهای بزرگ و رهبران بازار کمک میکنند تا در دنیای دیجیتال حرکت کنند، سودآورتر شوند و وبسایتها، محصولات و کمپینهای فراموشنشدنی راهاندازی کنند. متشکریم!
زمانی که توسعهدهندگان فرانتاند و مهندسان تجربه کاربری وظیفه ساخت یک رابط وب را بر عهده میگیرند که حس لمسی، فنری یا تخریبی داشته باشد، غریزه صنعتی تقریباً همیشه یکسان است: استفاده از موتور فیزیک. فریمورکهایی مانند Matter.js، Cannon.js یا راهحلهای سفارشی WebGL به استاندارد طلایی برای ایجاد وبسایتهای فراگیر و بازیگونه تبدیل شدهاند.
هنگامی که تیم ما در Isadora Agency تصمیم گرفت Stress Release را بسازد، یک اسباببازی دیجیتالی ضد استرس که به خلاقان خسته اجازه میدهد شخصیتهای UI متحرک را بشکنند، کشش دهند و تغییر شکل دهند، در ابتدا این مسیر را بررسی کردیم. هدف ایجاد یک تجربه بسیار لمسی بود که هر کلیک یک واکنش رضایتبخش و نرم را به همراه داشته باشد.
اما همانطور که شروع به نمونهسازی کردیم، متوجه نکتهای حیاتی شدیم: موتورهای فیزیک حرکت قابل قبولی تولید میکنند، اما در مورد ما، انیماتورها حرکت هدفمند تولید میکردند.
ما نیازی نداشتیم که شخصیتهایمان مانند توپهای لاستیکی واقعی که به طور غیرقابل کنترل در یک بوم میپرند، عمل کنند. ما نیاز داشتیم که آنها به روشهای بسیار خاص و با طراحی بالا واکنش نشان دهند. بنابراین، ما موتور فیزیک را به طور کامل کنار گذاشتیم.
در این مقاله، توضیح خواهیم داد که چگونه یک اسباببازی ضد استرس بلادرنگ را بدون حتی یک خط WebGL یا Matter.js، با تکیه کامل بر کنترلهای حالت برنامهنویسی Lottie، دستکاری DOM و ریاضیات مبتنی بر فاصله ساختیم.
نیازهای طراحی: حرکت هدفمند
نیاز اصلی ما برای Stress Release، کنترل قطعی مطلق بود. انیماتورهای ما فایلهای Lottie با فرمت .json سفارشی را طراحی کرده بودند که نیاز به توالی دقیق فریم به فریم داشتند.
به عنوان مثال، واکنش «فشردن بزرگ» ما نیاز به یک ساختار دقیق ۱۸۱ فریمی و سپس یک توالی انتشار خاص داشت. برای احترام به این طراحی، ما به یک معماری نیاز داشتیم که فریمهای کلیدی طراحی شده توسط انیماتورها را با تقریبهای الگوریتمی بازنویسی نکند.
هرچه حلقه بازخورد کلیک (کلیک → فشردن → امتیاز) محکمتر باشد، به کنترل فریم قطعی بیشتری نیاز دارید. با انتخاب کنترل حالت برنامهنویسی با استفاده از API بومی Lottie، اطمینان حاصل کردیم که لایه تعامل به عنوان یک محرک بیعیب و نقص برای لایه انیمیشن عمل میکند.
ایجاد بازخورد لمسی: نگاشت عناصر DOM به حالتهای Lottie
از آنجایی که معماری ما بر Lottie و DOM استاندارد متکی بود، رندرینگ مستقیماً توسط زمان اجرای Lottie انجام میشود که انیمیشنهای وکتور مبتنی بر JSON را به صورت داخلی به عنوان SVG پخش میکند. ما عناصر را مستقیماً با ID و کلاس CSS انتخاب کردیم و رفتار آنها را با ترکیبی از بخشهای انیمیشن Lottie، تبدیلهای CSS و ریاضیات رویداد کلیک کنترل کردیم.
برای دستیابی به یک «حس لمسی» عمیقاً رضایتبخش هنگام ضربه زدن به یک شخصیت، از نگاشت ورودی شعاعی استفاده کردیم. اولین گام تبدیل کلیک از مختصات صفحه به فضای مختصات محلی شخصیت بود.
هر کلیک در برابر نقطه مرکزی شخصیت اندازهگیری میشد، سپس به امتیاز، شدت بازخورد و محل انفجار ترجمه میشد:
سپس مجله اتومبیل فاصله مستقیم از مرکز کلیک را با استفاده از قضیه فیثاغورس محاسبه میکنیم:
این یک عدد واحد همه چیز را کنترل میکند: امتیاز، شدت بازخورد و محل ظاهر شدن انیمیشن انفجار:
نتیجه یک سیستم منطقه متحدالمرکز است – یک دایره کامل از حلقههای امتیازدهی در اطراف مرکز شخصیت، شبیه به یک تخته دارت. پیچیدگی بصری Lottie SVG برای تشخیص ضربه کاملاً بیربط است؛ جعبه ضربه همیشه یک دایره تمیز است. نکته مهم این است که انیمیشن انفجار Lottie به (a, b) تغییر مکان میدهد – همان وکتوری که برای امتیازدهی استفاده میشود، بنابراین همیشه دقیقاً در جایی که بازیکن کلیک کرده است ظاهر میشود. این دقت فضایی حس لمسی «من به آن ضربه زدم» را کاملاً از طریق ریاضیات و موقعیتیابی DOM ایجاد میکند.
مدیریت تعامل: کنترل روایت
از آنجایی که تجربه از عناصر SVG مدیریت شده توسط DOM استفاده میکرد، کلیکهای دسکتاپ و لمسهای موبایل میتوانستند مستقیماً از طریق شنوندگان رویداد بومی مدیریت شوند. این از لایههای اضافی raycasting یا بازنگاری مختصات جلوگیری میکرد، در حالی که مدل تعامل را با نحوه رندر شدن انیمیشنها همسو نگه میداشت.
از آنجایی که بازی به یک واکنش بصری در یک نقطه خاص نیاز دارد، Lottie تمام احساسات فشردن و پرش را به صورت داخلی از طریق منحنیهای انیمیشن خود مدیریت میکند. هر شخصیت دارای مجموعهای تعریف شده از بخشهای انیمیشن (حلقههای بیکار، فریمهای واکنش و حالتهای پایانی) است که به عنوان محدودههای فریم ذخیره میشوند. هنگامی که یک کلیک انجام میشود، ما مستقیماً به بخش دقیق که با وضعیت فعلی بازی مطابقت دارد، میرویم:
با هر کلیک، ما از ترتیب پخش عبور کرده و بخش بعدی را فعال میکنیم:
هنگامی که بخش کامل میشود، کنترل به حلقه بیکار بازمیگردد:
و برای ساختار فشردن بزرگ، نوار در یک محدوده فریم خاص حلقه میزند تا زمانی که فعال شود:
مزیت واکنشگرایی عناصر DOM
یکی دیگر از عوامل اصلی در تصمیمگیری معماری ما، رفتار واکنشگرا بود. از آنجایی که ما Stress Release را در DOM ساختیم، از پیچیدگیهای مقیاسبندی جعبههای مرزی و بردارهای برخورد در دستگاههای مختلف اجتناب کردیم.
ما تغییر اندازه واکنشگرا را کاملاً از طریق متغیرهای CSS مدیریت کردیم. با محاسبه مجدد ویژگیهای سفارشی CSS در هر تغییر اندازه، طرحبندی به سادگی به متغیرهای بهروز شده واکنش نشان میدهد و SVGهای Lottie به طور طبیعی در داخل کانتینرهای خود بدون از دست دادن حالت خود مقیاس میشوند:
بهینهسازی عملکرد موبایل: هزینه Lottie
در حالی که این معماری کنترل کاملی بر جهت هنری به ما میداد، یک چالش متفاوت را معرفی کرد: حجم فایل.
فایلهای JSON Lottie میتوانند سنگین باشند. ما