Uzaklaşın ve projeleriniz için tamamen özel animasyonlar oluşturun.
Bazen CSS'ye dahil olan yumuşak geçiş anahtar kelimelerini kullanmak istemezsiniz veya Web Animasyonları veya bir JavaScript çerçevesi kullanırsınız. Bu tür durumlarda, genellikle kendi eğrilerinizi (veya denklemlerinizi) tanımlayabilirsiniz ve bu da projenizdeki animasyonların yarattığı izlenim üzerinde epey kontrol sahibi olmanızı sağlar.
Özet
- Özel yumuşak geçiş, projelerinize daha fazla kişilik katmanızı sağlar.
- Varsayılan animasyon eğrilerine benzeyen (yumuşak çıkış, içe yerleştirme vb.) kübik Bézier eğrileri oluşturabilirsiniz.
- Animasyon zamanlaması ve davranışı üzerinde daha fazla kontrole (ör. esnek veya geri dönme animasyonları) ihtiyacınız olduğunda JavaScript kullanın.
CSS ile animasyon yapıyorsanız zamanlamayı tanımlamak için kübik Bézier eğrileri tanımlayabilirsiniz. Aslında ease, ease-in, ease-out ve linear anahtar kelimeleri, CSS geçişleri spesifikasyonu ve Web Animasyonları spesifikasyonunda ayrıntılı olarak açıklanan önceden tanımlanmış Bézier eğrileriyle eşleşir.
Bu Bézier eğrileri dört değer veya iki çift sayı alır. Her çift, kübik Bézier eğrisinin kontrol noktalarının X ve Y koordinatlarını açıklar. Bézier eğrisinin başlangıç noktası koordinatları (0, 0) ve bitiş noktasının koordinatları (1, 1) vardır. İki kontrol noktasının X ve Y değerlerini ayarlarsınız. İki kontrol noktasının X değerleri 0 ile 1 arasında olmalıdır ve her kontrol noktasının Y değeri [0, 1] sınırını aşabilir ancak spesifikasyon ne kadar net değildir.
Her bir denetim noktasının X ve Y değerini değiştirmek, size çok farklı bir eğri ve dolayısıyla animasyonunuz için çok farklı bir his sağlar. Örneğin, ilk denetim noktası sağ alt alandaysa animasyon yavaş başlar. Sol üst taraftaysa hızlı bir başlanır. Öte yandan, ikinci denetim noktası ızgaranın sağ alt alanındaysa sonunda hızlı, sol üstteyse sonda yavaş olacaktır.
Karşılaştırma yapabilmeniz için burada iki eğri sunulmuştur: tipik bir dışa doğru yumuşak geçiş eğrisi ve özel eğri:
Özel yumuşak geçiş içeren animasyon görme
Özel eğrinin CSS'si şu şekildedir:
transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
İlk iki sayı, ilk kontrol noktasının X ve Y koordinatları, ikinci iki sayı ise ikinci kontrol noktasının X ve Y koordinatlarıdır.
Özel bir eğri oluşturmak çok eğlencelidir ve animasyonun hissi üzerinde önemli bir kontrol olanağı sağlar. Örneğin, yukarıdaki eğriyi göz önünde bulundurduğunuzda eğrinin klasik çıkış yumuşak geçiş eğrisine benzediğini ancak en sonda yumuşak geçişin veya "başlarken" bölümünün kısaldığını ve uzun bir yavaşlama olduğunu görebilirsiniz.
Bu animasyon eğrisi aracıyla deneme yapın ve eğrinin animasyonun hissini nasıl etkilediğini görün.
Daha fazla kontrol için JavaScript çerçevelerini kullanın
Bazen kübik bir Bézier eğrisinin sağlayabileceğinden daha fazla kontrole ihtiyacınız olur. Esnek bir geri dönüş hissi istiyorsanız, bir JavaScript çerçevesi kullanmayı düşünebilirsiniz. CSS veya Web Animasyonlarıyla elde edilmesi zor bir efekt sağlar.
TweenMax
GreenSock'ın TweenMax (veya gerçekten hafif bir deneyim istiyorsanız TweenLite) güçlü bir çerçevedir. Küçük bir JavaScript kitaplığında bu üründen büyük ölçüde kontrol sahibi olursunuz ve oldukça olgun bir kod tabanıdır.
Esnek yumuşak geçiş animasyonu görme
TweenMax'i kullanmak için sayfanıza şu komut dosyasını ekleyin:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
Komut dosyası oluşturulduktan sonra, TweenMax öğesini öğenize karşı çağırabilir ve istediğiniz yumuşatmayla birlikte hangi özellikleri istediğinizi belirtebilirsiniz. Kullanabileceğiniz birçok yumuşak geçiş seçeneği vardır; aşağıdaki kod elastik bir yumuşak geçiş kullanır:
var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;
TweenMax.to(box, animationDurationInSeconds, {
x: '100%',
ease: 'Elastic.easeOut'
});
Burada kullanabileceğiniz tüm seçenekler TweenMax belgelerinde öne çıkarıldığı için bu dokümanı okumanız faydalı olacaktır.