پیاده سازی این challenge خیلی برام گرون تموم شد. مجبور شدم هر چی تو ریکت نیتیو بود رو زیر و رو کنم. مشکل اصلی این بود که وقتی تعداد آیتم هایی که تو صفحه هستند خیلی زیاد می شه و انیمیشن هم قراره روشون اتفاق بیفته دیگه به فریم ریت ۶۰نمی رسیدم.
اول از react-native-svg شروع کردم. SVG برخلاف انعطاف پذیری بالا تو پیاده سازی performance خیلی پایینی تو تعداد آیتم های زیاد داره.
بعدش رفتم سراغ react-native-masked-view که خوشبختانه خیلی بهتر از SVG جواب می داد ولی تعداد آیتم ها که از یه تعدادی می گذشت به صورت کامل می ترکید.
با توجه به اینکه این کار ذاتا باید روی Canvas پیاده بشه شرکت alibabab (البته خارجیش) یه کامپوننت توسعه داده واسه کار با Canvas تو ریکت نیتیو به اسم react-native-gcanvas که خوشبختانه از دو تا راه حل قبلی خیلی بهتر بود ولی با این تعداد آیتم به فریم ریت ۳۰ بیشتر نمی رسید. البته کلی بدبختی هم تو راه اندازیش داشت.
همینجوری که ناامید بودم رسیدم به expo-three که engine بازی سازی threejs رو می تونید تو ریکت نیتیو اجرا کنید. به جز پیچیدگی های عجیبی که محیط های سه بعدی دارن این engine حداقل تو محیط موبایل خیلی ضعیفتر از مورد قبل بود. البته نسخه وب این engine عالیه ولی رو موبایل چون particle ها رو پشتیبانی نمی کرد با geometry ها به اون فریم ریت نمی رسید.
و راه حل یکی به آخر استفاده از gl-react بود که می تونید shader های opengl رو تو ریکت نیتیو اجرا کنید. از نظر فریم ریت و تعداد زیاد آیتم خیلی عالی بود ولی نوشتن shader طرح اصلی نیاز به ۱۰ سال تجربه داشت!!!! واقعا خیلی پیچیده بود!!!!
و راه حل آخر همینجور که می گشتم دنبال راه حل با به graphic engine 2d به اسم skia آشنا شدم که به نظر خیلی ردیف بود و فهمیدم که گوگل از این انجین واسه اندروید و کروم و ... داره استفاده می کنه. و نکته جالب اینکه کنترل CustomPaint تو Flutter داره از همین انجین استفاده
می کنه (البته کلا فلاتر واسه بحث paint تو همه ی قسمت ها از این استفاده می کنه).
به عنوان کسی که تعصب داره به react-native خیلی سخت بود که بخوام این تست رو رو فلاتر انجام بدم و سخت تر اینکه نتیجه هم اگه می داد که دیگه هیچی. هر طوری بود بعد از کلی آموزش تو یوتوب اولین تست رو تو فلاتر گرفتم.
واقعا CustomPaint تو Flutter عالیه و تونستم بعد از کلی بدبختی طرح رو با فریم ریت ۶۰ دربیارم.
منابع
ایده طرح اصلی: https://dribbble.com/shots/5583825-Canvas-Proximity-Mask-Interaction
