Geçen yılın sonlarında Chrome Dev Summit sitesini oluşturdum. Harika bir tasarım dili olduğu için ve oluşturmak istediğim site türüne çok uygun olacağını düşündüğümden Material Design görünümüne ve tarzına sahip olmasını istedim. Ancak her yeni tasarım dilinde olduğu gibi, özellikle web'in gelenekleriyle uğraşırken yanıtlanması gereken sorular, üstesinden gelinmesi gereken zorluklar ve alınması gereken kararlar vardır.
Sitenin oluşturulması özellikle zor olan bir yönü, bir kartı tıkladığınızda oluşan "devralma" efektiydi.
Bu tür bir efektin 60 FPS'de çalışması için biraz düşünmek, prototip oluşturmak ve birkaç ilginç uzlaşma yapmak gerekti. Chrome Dev Summit'te bu efekt hakkında konuşmuş ve nasıl oluşturduğumu tüm ayrıntılarıyla açıklamıştım.
Yüksek performanslı animasyon oluşturma
Yüksek performanslı animasyonlar, en azından günümüzde tarayıcının birleştiricisini destekleyen animasyonlardır. Dönüştürme ve opaklık özelliklerini değiştirmeye devam ederseniz genellikle mükemmel bir performans elde edersiniz. Kart animasyonunda genel olarak yaptığım işlem tam olarak budur:
- Kart daraltıldığında karttaki tüm öğelerin konumunu ölçün.
- Kartın sınıflarını değiştirerek kartı genişletin (animasyon olmadan).
- 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çın.
- Negatif dönüştürmeleri kaldırın ve öğelerin ekrandaki son konumlarına doğru hızla hareket etmesini izleyin.
Tüm bunlar pahalı gibi görünebilir ancak kullanıcının etkileşiminden sonra animasyonun başlaması için 100 ms'lik bir süre vardır. Bu sürenin aşılması durumunda kullanıcı gecikme olduğunu fark eder. Bu süreyi, animasyon sırasında daha ucuza çalışabilmek için maliyetli hazırlık çalışmalarını yapmak üzere kullanabilirsiniz. Ayrıca, yaklaşık 50-100 ms'lik bir süre sonunda temizlik işleri için bir pencere de vardır. Bu pencere, yapmaya çalıştığınız şeye bağlı olarak kullanışlı olabilir.
Animasyonun yapılması için gereken maliyetli çalışma ilk 100 ms içinde yapılır ve Nexus 5'te bu çalışma yaklaşık 70 ms sürer. Dolayısıyla, boşluk vardır.
Kodu alın
Siteyi daha ayrıntılı incelemek isterseniz kodun GitHub'da yayınlandığını öğrenmekten memnun olacaksınız. Hemen göz atın!