اواخر سال گذشته، سایت Chrome Dev Summit را ساختم. من می‌خواستم ظاهر و احساسی از طراحی متریال داشته باشد، زیرا یک زبان طراحی فوق‌العاده است، و احساس می‌کردم برای نوع سایتی که می‌خواهم ایجاد کنم، مناسب است. اما، مانند هر زبان طراحی جدید، سؤالات، چالش‌ها و تصمیم‌هایی وجود دارد که باید اتخاذ کرد، و به‌ویژه وقتی با قراردادهای وب سروکار داریم.
یکی از جنبه های سایت که ایجاد آن به ویژه چالش برانگیز بود، اثر "تصرف" زمانی است که روی یک کارت کلیک می کنید.
اجرای چنین افکتی با سرعت 60 فریم در ثانیه نیاز به تفکر، ساخت نمونه اولیه و چند سازش جالب داشت. در Chrome Dev Summit، من در مورد این اثر صحبت کردم و با جزئیات توضیح دادم که چگونه آن را ساختم.
ساخت یک انیمیشن با کارایی بالا
انیمیشن‌های با کارایی بالا ، حداقل امروزه، آنهایی هستند که به نفع ترکیب‌کننده مرورگر هستند. اگر بتوانید به تغییر خواص تبدیل و کدورت پایبند باشید، معمولاً عملکرد عالی خواهید دید. رویکرد کلی من به انیمیشن کارت دقیقاً این کار را انجام می دهد:
- موقعیت همه عناصر موجود در کارت را در هنگام جمع شدن کارت اندازه گیری کنید.
- کلاس‌های کارت را تغییر دهید تا آن را گسترش دهید (بدون متحرک کردن).
- اکنون کارت بزرگ شده است، موقعیت عناصر موجود در کارت را دوباره اندازه گیری کنید.
- تفاوت ها را محاسبه کنید.
- برای بازگرداندن عناصر به موقعیت های شروع، تبدیل های منفی را اعمال کنید.
- انیمیشن ها را روشن کنید.
- تبدیل های منفی را حذف کنید و عناصر را تماشا کنید که به مکان های نهایی خود بر روی صفحه می روند.
همه اینها ممکن است گران به نظر برسد، اما یک پنجره 100 میلی‌ثانیه از لحظه تعامل کاربر قبل از شروع انیمیشن وجود دارد. هر چه بیشتر از این باشد و کاربر یک تاخیر را درک کند. می توانید از این زمان برای انجام کارهای تدارکاتی گران قیمت استفاده کنید تا بتوانید در طول خود انیمیشن با هزینه کمتری اجرا کنید. همچنین یک پنجره در انتهای حدود 50-100 میلی ثانیه برای انجام کارهای مرتب وجود دارد که بسته به کاری که می خواهید انجام دهید ممکن است مفید باشد.
کار گران‌قیمت برای ساخت انیمیشن در همان ۱۰۰ میلی‌ثانیه اول انجام می‌شود و در Nexus 5 کار چیزی در حدود ۷۰ میلی‌ثانیه طول می‌کشد، بنابراین جای خالی وجود دارد.
کد را دریافت کنید
اگر علاقه مند به مشاهده جزئیات بیشتر سایت هستید، از شنیدن این که کد در GitHub منتشر شده است خوشحال خواهید شد، پس بروید و نگاهی بیندازید!