After Effects'ten CSS Geçişlerine ve Ana Karelere Geçiş Yapma

Web siteleri giderek daha çok mobil uygulamalara benziyor. Kullanıcılar ayrıca giderek daha fazla uygulama benzeri bir deneyim bekliyor. Anında iletme bildirimlerinden çevrimdışı moda, yerel web uygulamaları oraya geliyor.

Web uygulamaları yerel uygulamalar gibi çalıştığında, tasarım etkileşimleri de kullanım durumunu, yani animasyonların her yerde bulunmasını ele alacak şekilde değişecektir. Animasyonlar, Uber'den Lyft'e ve Snapchat'ten Instagram'a kadar tüm favori uygulamalarımızdaki etkileşimleri yönlendirir.

Web geliştiricileri olarak, yerel web uygulaması ortamı için çok önemli olan hem performanslı hem de sürdürülebilir animasyonlar oluşturmak için iyi bir temele ihtiyacımız var. After Effects'ten CSS geçişlerine, animasyonlarına ve ana karelerine geçebilmemiz gerekiyor.

After Effects Nedir?

After Effects, grafik ve hareket tasarımcıları tarafından animasyonları anahtarlamak, oluşturmak ve izlemek için kullanılan Adobe'nin endüstri standardı bir ürünüdür. Birçok tasarımcı tarafından, animasyon katmanlarını, animasyonun başlangıç ​​ve bitiş zamanlarının bir referans tablosuyla birlikte görselleştirilmesi kolay bir örnek videoya aktararak fikirleri bir ekibe iletmek için kullanılan fiili araçtır.

Demo video ve referans tablosu birlikte, geliştirme ekibine animasyonun nasıl uygulanacağı konusunda iyi bir temel sağlar. Video, genel resmi görmek için kullanılırken, referans tablosu, animasyon etkileşimini oluşturan veya bozan dakika ayrıntılarını sağlar.

After Effects ile Yapabileceklerimiz

After Effects ile yapabileceklerimiz sadece hayal gücümüzle sınırlıdır. Bir görüntü veya video için sonsuz sayıda post prodüksiyon efekti sağlayabilir. Web kapsamında fikirlerin paylaşılması için bir platform sağlar.

Yukarıdaki kırmızı topu düşünün. Top, After Effects kullanılarak yavaşça ortaya yuvarlanmak, bir saniye duraklamak ve ardından görünüm alanından çıkmak için yavaşça hızlanmak için canlandırılır. Hareket, ölçekleme, döndürme ve hatta renk değişimi gibi klasik web animasyonları After Effects'te kolayca yapılır ve uygulanacak animasyonlar için anında oluşturulan bir gereksinim belgesi (veya video veya GIF) işlevi görür.

Başlamak için İhtiyacınız Olan Araçlar

JavaScript, HTML5, CSS3 ve diğer birçok dilin bir web sitesinin trafik aldığı çoğu büyük kullanıcı aracısında standart hale gelmesiyle, bu araçları toptan kullanmak giderek daha uygun hale geliyor. Aşağıda, animasyonları uygularken akılda tutulması gereken bazı temel teknolojiler bulunmaktadır.

CSS Geçişleri

CSS geçişleri, CSS özelliğindeki bir değişikliğin bir öğeye ne kadar hızlı uygulanacağını kontrol etmenin bir yolunu sağlar. Bir stili hemen (geçişler olmadan) uygulamak yerine, özelleştirme kuralları kullanılarak tanımlanmış bir hızlanma eğrisi üzerinde kademeli olarak uygulanabilir. Bir örnek, belirli bir süre boyunca arka plan rengini siyahtan beyaza değiştirmek olabilir.

 transition-property: background-color; transition-duration: 3s;

Öğe üzerindeki bu kuralla, arka plan renginin değişmesi üç saniye sürer, yavaş yavaş siyahtan beyaza döner ve gri tonlarından geçer. Bu, ara değerleri hesaplamak için geçiş zamanlama işlevi ve animasyonun başlamasını geciktirmek için geçiş gecikmesi eklenerek daha da özelleştirilebilir.

CSS geçişleri, arka plan rengini değiştirmek veya bir öğeyi yeni bir konuma taşımak gibi basit etkileşimler için iyidir.

CSS Animasyonlarını Kullanma

CSS animasyonları, geçiş noktalarını kullanarak bir animasyon arasındaki ara adımlar üzerinde daha da hassas kontrol sağlar. Yol noktaları (veya ana kareler), bir öğeye belirli stiller uyguladığımızda, animasyon sırasında zaman içinde sabitlenmiş noktalardır. Ardından, animasyonun nasıl görünmesi gerektiğini belirlemek için tanımlanmış ana kareleri kullanırız.

Bir öğenin sıçrama olarak canlandırılmasını istediğimizi varsayalım. Eleman yukarı hareket etmeli, orijinal konumuna geri hareket etmeli, biraz yukarı hareket etmeli ve ardından orijinal konumuna geri dönmelidir. Ana kareleri kullanarak, bu elastik efekti, animasyonun alacağı sürenin yüzdelerine bölebiliriz.

 @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-25px); } 60% { transform: translateY(-15px); } } .element { animation-name: bounce; animation-duration: 3s; }

CSS geçişlerinde olduğu gibi, geliştiricilerin yapılandırması için birçok seçenek vardır. animation-iteration-count kullanarak, infinite değeriyle animasyonların süresiz olarak tekrarlanmasını sağlayabilir, hatta animation-direction özelliğini kullanarak animasyonun aktığı yönü kontrol edebiliriz. Çok sayıda CSS animasyon özelliği, bir animasyonu tasarımla eşleştirmek için bize ayrıntılı kontrol sağlar.

CSS animasyonları, genişleme, döndürme ve sekmeler gibi tekrar eden kısa animasyonlar için kullanışlıdır.

JavaScript'i kullanma

JavaScript, Raspberry Pi sunucularından istemci tarafı koduna kadar çok sayıda kullanıma sahiptir, ancak temel kullanımlarından biri, öğelerdeki sınıf adlarını değiştirmeye devam etmektedir. Bir sınıf adını değiştirmek, bir öğenin durumunu yönetmenin önemsiz ancak etkili bir yoludur.

Bir örnek, başlangıçta gizlenmiş bir bileşeni canlandırmaya başlamak için işaret eden bir active sınıfın basit bir şekilde eklenmesidir. Aşağıdaki topu düşünün. CSS geçiş özelliklerini kullanarak animasyonu tetikleyen bir sınıf eklemek için JavaScript kullanıyoruz.

Bu animasyonun ilk kısmı, basit bir HTML, CSS ve JavaScript kombinasyonu kullanılarak çoğaltılabilir.

HTML:

 <div class="ball"></div>

CSS:

 .ball { width: 100px; height: 100px; color: red; transform: scale(0.25); transition: all 1s ease-in; } .ball.active { transform: scale(1.25); }

JavaScript:

 setTimeout(function() { document.querySelector('.ball').addClass('active'); }, 500);

Zaman aşımı ( 500ms ) sona erdiğinde, top div öğesine bir active sınıfı eklenir; bu, transform özelliğini değiştirir ve daha sonra top öğesindeki transform özelliğini izleyen transition özelliğini tetikler. JavaScript kullanarak CSS sınıflarını değiştirmek, yalnızca bir bileşenin durumunu yönetmemize yardımcı olmakla kalmaz, aynı zamanda bize CSS animasyonları ve geçişlerinin ötesinde animasyonlar üzerinde daha fazla kontrol sağlar.

JavaScript kullanarak animasyonları kontrol etmek, durumu yönetmek , kullanıcı girişi veya uygulama durumu gibi dinamik faktörlere dayalı olayları tetiklemek için faydalıdır.

Fikirden After Effects'e, CSS ve JavaScript'e

Sayfadaki bir öğeyi canlandırmamız gereken bir görevimiz olduğunu hayal edin. Bu elemanı kırmızı bir top yapalım. Topun sayfa etrafında dönmesi ve yukarı ve aşağı ölçeklenmesi gerekir.

After Effects, animasyon tetiklendiğinde etkileşimin nasıl görüneceğine dair örnekler oluşturmamıza olanak tanır. Aşağıdaki hareket halindeki top buna bir örnektir. Kırmızı topun önce nasıl hafifçe büyüdüğüne, ardından dairesel bir döngü etrafında hızlanmaya başladığına ve yavaşlayarak orijinal konumuna nasıl geri döndüğüne dikkat edin. Ancak o zaman top orijinal boyutuna küçülür.

Topun hareket etmeden veya durmadan önce büyüdüğü veya küçüldüğü yerdeki ölçeğin kaymasını düşünün. Bu, tasarımcının After Effects'te hazırladığı küçük bir özelliktir ve küçük ayrıntıların gözden kaçırılmaması için geliştiriciye net bir şekilde iletilmesi gerekir.

Bu nedenle After Effects'ten geliştiriciye geçmeden önce bazı hazırlıkların yapılması gerekir. Hareket halindeki animasyonun bir video dosyasını basitçe oluşturamadık, geliştiriciyle paylaşamadık ve bir gün olarak adlandıramadık.

Fikirlerimizi net bir şekilde iletmenin bir yolu, animasyon için gereken adımları detaylandıran bir elektronik tablo oluşturmaktır. Animasyonun karmaşıklığına bağlı olarak, bir bilet üzerindeki basit karalamalar, bir liste içeren bir metin dosyası veya tam gelişmiş bir elektronik tablo olabilir.

Animasyon hakkında bilgi aktarmanın başka bir yolu da onu videonun içine yerleştirmektir . Bunu, uygulayıcıya bağlam vermek için ne kadar ölçeklendirileceği, adım sayısı ve diğer bilgileri olduğu gibi ekleyerek önemli bilgileri After Effects'te yapabilirsiniz. Bu, demo videoyu evrensel bir hakikat kaynağı olarak kullanmamızı sağlar.

After Effects'ten dışa aktarılan bu video dosyası, tasarımcı ile geliştirici arasında bir sözleşme biçimi görevi görür. Ortak bir anlayışla, onu uygulamak için tartışılan araçları kullanabiliriz - yani CSS sınıfları, JavaScript olayları, CSS geçişleri, CSS animasyonları ve JavaScript animasyonları.

1. Animasyonu Parçalayın

Kalıpları arayın ve zamanlamaları not edin.

Yapılacak ilk şey, her bir öğe (veya öğe grubu) için animasyonların zaman çizelgesini çizmektir. Çevrelerindeki zamanlamayı ve animasyon yaşam döngüsünü senkronize etmek için animasyonların nerede kesiştiğini anlamamız gerekir. Planlama, karmaşık bir animasyonun anahtarıdır, böylece çözümümüzü aşamalı olarak gelecekteki gereksinimler için sürdürülebilir bir şekilde oluşturabiliriz.

Yukarıdaki bilgilerden, aşağıdaki adımlara ayırıyoruz:

1. Bileşeni başlatın ve bir tetikleyici bekleyin.
2. Tetiklendikten sonra boyutu büyütün ve alt gölgeyi genişletin.
3. Bundan sonra, içeri girme ease-in-out .
4. Ardından, boyutu küçültün ve alt gölgeyi azaltın.

Anahat oluşturmanın faydası, hangi bileşenlerin canlandırma öğelerinin dışında yaşaması gerektiğini anlamamızdır - örneğin, alt gölge toptan bağımsız olmalıdır. Bir makaleyi özetlemeye benzer şekilde, animasyonu parçalamak, yapmamız gereken iş hakkındaki düşüncelerimizi düzenler. Ana hatlar, bir animasyonun ardındaki düşünme sürecini gösterir ve çalışmamız için iki kez belge işlevi görür.

2. Paydaşlarla Müzakere Edin

Bazı alanları basitleştirebilir miyiz? Animasyonun hangi bölümleri olmazsa olmaz? Zamanlamaları senkronize edebilir miyiz?

Görevi gerçekleştirmek için gereken işi araştırdıktan sonra pazarlık yaparız. Tasarımcı ve ürün sahibiyle pazarlık yapmak her geliştiricinin sorumluluğundadır. Uygulayıcı, temel düşük asılı meyve, ne yapılabileceği ve nelerin yapılması pratik olmadığı konusunda tam bir anlayışa sahiptir.

Animasyon zordur çünkü bir animasyondan çok küçük görünen ayrıntıların kaldırılması kullanıcı deneyimini değiştirebilir. Geliştirmeye dayalı bir örnek vermek gerekirse, bir animasyonun nasıl davrandığını değiştirmek, bir API çağrısından alabileceğimiz yanıt yükünü değiştirmeye benzer: Bazı şeyler değiştirilebilir, ancak bazı parçalar orada olmalıdır.

Bu, tasarımcıyla ve lansman için zaman çizelgesi verilen ürün sahibiyle olan ilişkimize dayanan, duruma göre bir durumdur. Bazı animasyonların kaldırılmasını istemek, uzmanlık alanımızın dışında olacağından önerilmez.

Pazarlık için iyi bir yaklaşım, zamanlamaları senkronize etmek veya tarayıcının yerel olarak yapamayacağı animasyonları basitleştirmek ve bakımı zor olacağından ve yüksek performansa yol açabileceğinden JavaScript kullanan animasyonlardan kaçınmak olacaktır. Bunun yerine bu tavizleri isteyebiliriz ve istemeliyiz.

3. Saldırıyı Planlayın

Her öğenin başlangıç ​​ve bitiş durumunun ne olması gerektiğini bilin. Her geçiş zamanlamasının nerede olması gerektiğine bakın. Animasyonları net bir şekilde uygulamak için CSS sınıflarında BEM'den yararlanın. JavaScript'in neden CSS lehine sınırlandırılması gerektiğini anlayın.

Daha önce anlatılan animasyonu inceleyelim. Beş eyalet üzerimize atlıyor:

1. kırmızı top ve biraz gölge ile ilk durum;
2. topun daha uzun gölgeli büyütülmüş versiyonu;
3. topun bir daire etrafında hareketi;
4. alt gölgesiyle birlikte topun küçültülmesi;
5. tetiklenmeyi bekleyen başlangıç ​​durumuna dönüş.

Beş devletin tamamı için, üslubun önce ve sonra ne olması gerektiğine bakmalıyız. Bu bize, onu uygulamak için ne tür animasyon araçlarına ihtiyaç duyacağımız konusunda bilgi verecektir.

Bunu yapmak için temel durum stiliyle başlıyoruz. Öğe birdenbire ortaya çıkıyorsa bu hiçbir şey olmayabilir veya zincirleme animasyonlar söz konusu olduğunda önceki stil olabilir.

Durumlar arasında stillerde çok az değişiklik yaparak bunu basit tutun . Başlangıç ​​ve bitiş durumlarını belirledikten sonra, öğeye kolayca uygulanabilmeleri için bunları CSS sınıfları olarak etiketlememiz gerekir. Bu bize, öğenin bağlı olabileceği AJAX çağrılarından alınan verilere dayalı olarak sınıfların uygulanmasını işlemek için JavaScript kullanma esnekliği sağlar.

BEM CSS, devam eden animasyonlarımızın durumlarını değiştiricilerle nasıl temsil edeceğimizden dolayı adlandırma stratejimiz için idealdir. Animasyon yeterince genelse, BEM ayrıca kod tabanlarında çalışan DRY ("kendini tekrar etme") CSS sınıflarını sürdürmek için iyi bir metodolojidir. Sadece blok ve eleman işaretçileriyle başlardık ve ardından animasyonda ilerledikçe değiştiricileri katmanlar halinde eklerdik.

İşte örnek bir şablon sınıf yolculuğu:

 // State 1 <div class="ball"></div> // State 2 <div class="ball ball--scale-up"></div> // State 3 <div class="ball ball--scale-up ball--circling"></div> // State 4 <div class="ball ball--scale-up ball--circling ball--scale-down"></div> // State 5 <div class="ball"></div>

Canlandırmakta olduğumuz kırmızı topu temsil edecek olan sınıf topuyla konteyner öğesiyle başlıyoruz. Animasyon deneyim boyunca yinelenirken, BEM sınıfı adlarımız da ölçeklendirmeden daire içinde hareket etmeye kadar değişir. Bu, stiller uygulandığında öğenin nasıl görünmesi gerektiğini takip etmek için kullanılan bir yöntemdir.

4. Sürekli Uygulama

Elimizde bir taslak ve kullanıma hazır araçlarla, proje durumunu eyaletten ayırmalıyız.

Gerektiğinde önceki durumu temel alarak, her durumu ayrı bir öğe olarak yinelemeli olarak ele alabiliriz. Açıkça tanımlanmış her durumla, uygulama ayrıntılarından ziyade kodumuzu DRY ve okunması kolay hale getirmeye odaklanabiliriz. Ve elbette, mantığımızı kapsayacak testler eklemek güzel olurdu.

Başlangıç ​​hali

Hafif bir gölge ile basit bir kırmızı topla başlıyoruz.

 .ball { background-color: #D24D57; width: 25px; height: 25px; margin: 5px; display: inline-block; border-radius: 50%; box-shadow: 0 8px 6px -6px #6C7A89; }

Ölçeklendirme

Ölçeklendirmenin iki bölümü vardır: öğenin boyutu ve alt gölgesi. Bu animasyonu işlemek için DRY-ness için hem yukarı hem de aşağı ölçekleme tarafından paylaşılan scale adlı bir ana kare kullanıyoruz.

 @keyframes ball-scale { from { transform: scale(1); box-shadow: 0 8px 6px -6px #6C7A89; } to { transform: scale(1.25); box-shadow: 0 10px 6px -6px #6C7A89; } } .ball--scale-up { animation: ball-scale 1s ease-out forwards; }

Daire (Ölçeklendirme Animasyonu Uygulandıktan Sonra)

circular adlı bir ana kare kullanırız ve öğeyi baştan başlayarak bir daire içinde hareket ettirmek için transform-origin özelliğini taşırız. Daireye almanın yalnızca ölçek büyütme animasyonu tamamlandığında gerçekleştiğini unutmayın.

 @keyframes ball-circular { from { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(0deg) translateY(-100%) rotate(0deg); } to { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(360deg) translateY(-100%) rotate(-360deg); } } .ball--circling { animation: ball-circular 2s ease-in-out forwards; }

Ölçeği Küçültme (Çemberleme ve Büyütme Animasyonları Uygulandıktan Sonra)

Ölçeği küçültmek için, ölçek büyütme sınıfının yaptığının tersini yapmak için animation-direction: reverse ile ana kare ölçeğini yeniden kullanırız. Bu bizi orijinal halimize geri getiriyor.

 .ball--scale-down { animation: ball-scale 1s ease-in forwards; animation-direction: reverse; }

Çalışma Demosu

Tüm bu sınıfları bir dizide birleştirirsek, After Effects'te yapılan işlemenin bir CSS temsiline sahip oluruz.

Başlamak için topa tıklayın.

CodePen'de Chris Ng (@chrisrng) tarafından kaleme alınan Animasyon Topu'na bakın.

Çözüm

Bu makalede ele alınan araçlar son teknoloji değildir, ancak genellikle çoğu büyük tarayıcıda desteklenir ve bu da onları bugün kullanılabilir hale getirir.

Önceden, animasyonları uygulamak zordu çünkü bu, öğeleri sayfada hareket ettirmek gibi basit şeyler yapmak için jQuery Animate gibi harici araçlar kullanmak anlamına geliyordu. Günümüzde CSS geçişleri ve animasyonları, GPU'dan yararlanılarak yerel ve verimli bir şekilde yapılabilmektedir.

Animasyonlar her zaman geliştirici, tasarımcı ve ürün sahibi arasında bir çekişmedir. İşin püf noktası, tüm paydaşların ürünün kalitesinden memnun olduğu orta yolu bulmaktır. Umarız bu rehber bu geçişi yapmanıza yardımcı olur.