Geçen yılın sonlarında Chrome Dev Summit sitesini oluşturdum. Harika bir tasarım dili olduğu için Materyal Tasarım'da bir görünüm ve tarza sahip olmasını istedim. Oluşturmak istediğim site türüne tam olarak uyacağını hissettim. Ancak her yeni tasarım dilinde olduğu gibi, özellikle web'in kurallarıyla başa çıkmaya çalışırken alınması gereken sorular, zorluklar ve kararlar söz konusu.
Sitenin oluşturulmasında özellikle zorlanan bir yön, bir kartı tıkladığınızda ortaya çıkan "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 gerekiyordu. Chrome Dev Summit'te bu efektten bahsettim ve bu etkiyi nasıl oluşturduğumu ayrıntılı olarak açıkladım.
Yüksek performanslı bir animasyon oluşturma
Yüksek performanslı animasyonlar, günümüzde en azından tarayıcının birleştiricisini destekleyen animasyonlardır. Değişen dönüşüm ve opaklık özelliklerine bağlı kalırsanız genellikle mükemmel bir performans elde edersiniz. Kart animasyonuna uyguladığım genel yaklaşım tam da bunu yapıyor:
- Kart daraltıldığında karttaki tüm öğelerin konumunu ölçün.
- Kartı genişletmek için (animasyon kullanmadan) sınıfları arasında geçiş yapın.
- Kart genişletildikten sonra karttaki öğelerin konumunu yeniden ölçün.
- Farkları hesaplayın.
- Öğeleri tekrar başlangıç konumlarına 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 kullanıcının animasyonun başlamasından önce etkileşimde bulunduğu andan itibaren 100 ms'lik bir zaman aralığı bulunur. Bu değerlerden daha fazlası ve kullanıcı bir gecikme algılar. 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, düzenli çalışma için kullanabileceğiniz bir pencere de bulunur. Bu pencere, yapmak istediğiniz işleme göre kullanışlı olabilir.
Animasyonu yapmak için gereken pahalı iş, ilk 100 ms'nin içinde yapıldığı için Nexus 5'te iş 70 ms'lik bir sürede tamamlanacak ve bu nedenle biraz zaman alacaktır.
Kodu alın
Siteyi daha ayrıntılı olarak incelemek isterseniz kodun GitHub'da kullanıma sunulduğunu duymak bizi sevindirecektir. Bu nedenle, hemen göz atın!