اواخر سال گذشته سایت Chrome Dev Summit را ساختم. میخواستم ظاهر و حس طراحی متریال داشته باشد، چون زبان طراحی فوقالعادهای است و احساس میکردم برای نوع سایتی که میخواهم بسازم، بسیار مناسب خواهد بود. اما، مانند هر زبان طراحی جدید، سوالات، چالشها و تصمیماتی برای گرفتن وجود دارد، به خصوص وقتی که با قراردادهای وب سر و کار داریم.
یکی از جنبههای سایت که ایجاد آن به طور خاص چالش برانگیز بود، جلوه «تصاحب» هنگام کلیک روی یک کارت بود.
اجرای چنین افکتی با سرعت ۶۰ فریم بر ثانیه، نیازمند کمی تفکر، نمونهسازی اولیه و چند مصالحه جالب بود. در اجلاس توسعهدهندگان کروم، من در مورد این افکت صحبت کردم و با جزئیات بسیار زیاد توضیح دادم که چگونه آن را ساختم.
ساخت انیمیشن با کارایی بالا
انیمیشنهای با عملکرد بالا ، حداقل امروزه، آنهایی هستند که به ترکیبکننده مرورگر توجه دارند. اگر بتوانید به تغییر ویژگیهای تبدیل و شفافیت پایبند باشید، معمولاً عملکرد عالی را مشاهده خواهید کرد. رویکرد کلی که من برای انیمیشن کارت در نظر گرفتم دقیقاً همین کار را انجام میدهد:
- موقعیت تمام عناصر موجود در کارت را هنگام جمع شدن کارت اندازهگیری کنید.
- برای گسترش کارت (بدون انیمیشن)، کلاسهای آن را تغییر وضعیت دهید.
- حالا که کارت باز شده، موقعیت عناصر را در کارت دوباره اندازهگیری کنید.
- اختلافها را محاسبه کنید.
- با اعمال تبدیلهای منفی، عناصر را به موقعیت اولیهشان برمیگردانیم.
- انیمیشنها را روشن کنید.
- تبدیلهای منفی را حذف کنید و ببینید که عناصر چگونه به سرعت به مکانهای نهایی خود روی صفحه نمایش میروند.
شاید همه اینها پرهزینه به نظر برسد، اما از لحظه تعامل کاربر تا شروع انیمیشن، یک بازه زمانی ۱۰۰ میلیثانیهای وجود دارد. اگر بیشتر از این باشد، کاربر متوجه تأخیر میشود. میتوانید از این زمان برای انجام کارهای مقدماتی پرهزینه استفاده کنید تا بتوانید در طول خود انیمیشن، با هزینه کمتری کار کنید. همچنین در انتهای بازه زمانی حدود ۵۰ تا ۱۰۰ میلیثانیهای، یک بازه زمانی برای مرتبسازی وجود دارد که بسته به کاری که میخواهید انجام دهید، میتواند مفید باشد.
کار پرهزینهی ساخت انیمیشن در همان ۱۰۰ میلیثانیه اول انجام میشود و در نکسوس ۵ این کار چیزی حدود ۷۰ میلیثانیه طول میکشد، بنابراین جای کار وجود دارد.
کد را دریافت کنید
اگر علاقهمند به بررسی دقیقتر سایت هستید، خوشحال خواهید شد که بشنوید کد در گیتهاب منتشر شده است ، پس بروید و نگاهی به آن بیندازید!