Geçen yılın sonlarında Chrome Dev Summit sitesini oluşturdum. Harika bir tasarım dili olduğu için sitenin Materyal Tasarım görünümüne ve tarzına sahip olmasını istiyordum. Oluşturmak istediğim site türüne de uygun olduğunu düşündüm. Ancak, her yeni tasarım dilinde olduğu gibi, web'in gelenekleri ile başa çıkmaya çalışırken ve özellikle de alınması gereken sorular, zorluklar ve kararlar söz konusudur.
Sitenin oluşturulmasında özellikle zorlanan bir yönü, bir kartı tıkladığınızda açılan "takeover" etkisiydi.
60 fps'de çalışmak üzere böyle bir efekt elde etmek için biraz düşünmek, prototip oluşturmak ve birkaç ilginç uzlaşma sağlamak gerekiyor. Chrome Dev Summit'te bu etkiden bahsettim ve bunu nasıl yaptığımı ayrıntılı olarak açıkladım.
Yüksek performanslı animasyon oluşturma
Yüksek performanslı animasyonlar, bugün en azından tarayıcının birleştiricisini destekleyen animasyonlardır. Dönüşüm ve opaklık özelliklerini değiştirmeye devam edebiliyorsanız, genellikle harika bir performans görürsünüz. Kart animasyonunda benimsediğim genel yaklaşım tam da şunları sağlıyor:
- Kart daraltıldığında karttaki tüm öğelerin konumunu ölçün.
- Kartı genişletmek için (animasyon uygulamadan) sınıfları arasında geçiş yapın.
- Kart genişletildikten sonra karttaki öğelerin konumunu yeniden ölçün.
- Farkları hesaplayın.
- Öğeleri başlangıç konumlarına geri taşımak için negatif dönüşümler uygulayın.
- Animasyonları aç.
- Negatif dönüşümleri kaldırın ve öğelerin ekrandaki son konumlarına doğru süzülmesini izleyin.
Bunların tümü kulağa pahalı gelebilir, ancak animasyon başlamadan önce kullanıcının etkileşimde bulunduğu andan itibaren 100 ms'lik bir zaman aralığı vardır. Bu değerden daha yüksek bir değer seçildiğinde kullanıcı bir gecikme fark eder. Bu süreyi pahalı hazırlık işleri yapmak için kullanabilir, böylece animasyonun kendisi sırasında daha ucuza çalıştırabilirsiniz. 50-100 ms.nin sonunda, ne yapmaya çalıştığınıza bağlı olarak kullanışlı olabilecek bir pencere bulunur.
Animasyonun yapılması pahalı olan iş, ilk 100 ms içinde yapılır ve Nexus 5'te iş 70 ms. içinde bir işlem gerektirir, dolayısıyla yedek alan vardır.
Kodu alın
Siteyi daha ayrıntılı olarak incelemek istiyorsanız kodun GitHub'da kullanıma sunulduğunu öğrenmekten mutluluk duyacaksınız. Bu nedenle, koda göz atın.