Farklı bir yol izleyin ve projeleriniz için tamamen özel animasyonlar oluşturun.
Bazen CSS'de yer alan yumuşak geçiş anahtar kelimelerini kullanmak istemezsiniz ya da Web Animasyonları veya bir JavaScript çerçevesi kullanırsınız. Bu durumlarda genellikle kendi eğrilerinizi (veya denklemlerinizi) tanımlayabilirsiniz. Bu sayede projenizin animasyonlarına dair çok fazla kontrol sahibi olabilirsiniz.
Özet
- Özel yumuşatma, projelerinize daha fazla kişilik kazandırmanıza olanak tanır.
- Varsayılan animasyon eğrilerine (sönümlü çıkış, sönümlü giriş vb.) benzeyen ancak farklı yerlerde vurgu içeren kübik Bézier eğrileri oluşturabilirsiniz.
- Animasyon zamanlaması ve davranışı üzerinde daha fazla kontrole ihtiyacınız olduğunda (örneğin, elastik veya geri dönen animasyonlar) JavaScript kullanın.
CSS ile animasyon oluşturuyorsanız zamanlamayı tanımlamak için kübik Bézier eğrileri tanımlayabileceğinizi göreceksiniz. Aslında ease, ease-in, ease-out ve linear anahtar kelimeleri, CSS geçişler spesifikasyonunda ve Web Animasyonları spesifikasyonunda ayrıntılı olarak açıklanan önceden tanımlanmış Bezier eğrileriyle eşlenir.
Bu Bezier eğrileri dört değer veya iki sayı çifti alır. Her çift, bir kübik Bezier eğrisinin kontrol noktalarının X ve Y koordinatlarını tanımlar. Bézier eğrisinin başlangıç noktasının koordinatları (0, 0) ve bitiş noktasının koordinatları (1, 1) vardır. İki kontrol noktasının X ve Y değerlerini belirlersiniz. İki kontrol noktasının X değerleri 0 ile 1 arasında olmalıdır ve her bir kontrol noktasının Y değeri, [0, 1] sınırını aşabilir. Ancak, spesifikasyon ne kadar olduğu net değildir.
Her kontrol noktasının X ve Y değerini değiştirmek, size çok farklı bir eğri ve dolayısıyla animasyonunuza çok farklı bir his verir. Örneğin, ilk kontrol noktası sağ alt alandaysa animasyon yavaş başlar. Sol üst alandaysa hızlı bir şekilde başlar. Buna karşılık, ikinci kontrol noktası ızgaranın sağ alt kısmındaysa sonu hızlı, sol üstteyse sonu yavaş olur.
Karşılaştırma için aşağıda iki eğri verilmiştir: tipik bir yumuşak başlangıç ve bitiş eğrisi ve özel bir eğri:
Özel yumuşatma içeren bir animasyon görme
Özel eğrinin CSS'si:
transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
İlk iki sayı, ilk denetim noktasının X ve Y koordinatları, ikinci iki sayı ise ikinci kontrol noktasının X ve Y koordinatlarıdır.
Özel eğri oluşturmak çok eğlencelidir ve animasyon hissi üzerinde önemli ölçüde kontrol sahibi olmanızı sağlar. Örneğin, yukarıdaki eğriye göre, o eğrinin klasik bir yumuşak çıkış eğrisine benzediğini, ancak yumuşak geçişin (ya da "başlatma" bölümünün) kısaltıldığını ve sonunda uzun bir yavaşlama olduğunu görebilirsiniz.
Bu animasyon eğrisi aracıyla denemeler yapın ve eğrinin animasyon hissini nasıl etkilediğini görün.
Daha fazla kontrol için JavaScript çerçevelerini kullanın
Bazen, kübik Bézier eğrisinin sağlayabileceğinden daha fazla kontrole ihtiyacınız olur. Elastik bir sıçrama hissi istiyorsanız JavaScript çerçevesi kullanabilirsiniz. Bu efekt, CSS veya web animasyonları ile elde edilmesi zor bir efekttir.
TweenMax
Güçlü çerçevelerden biri GreenSock'ın TweenMax ürünü (veya çok hafif bir şeyler istiyorsanız TweenLite). Çünkü küçük bir JavaScript kitaplığında bu çerçeveden çok fazla kontrol sahibi olursunuz ve bu, son derece olgun bir kod tabanıdır.
Elastik bir kolaylaştırma 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'i öğenize karşı çağırabilir ve hangi özellikleri istediğinizi ve istediğiniz yumuşatmaları söyleyebilirsiniz. Kullanabileceğiniz birçok yumuşatma seçeneği vardır. Aşağıdaki kodda elastik yumuşatma kullanılmaktadır:
var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;
TweenMax.to(box, animationDurationInSeconds, {
x: '100%',
ease: 'Elastic.easeOut'
});
TweenMax dokümanlarında sahip olduğunuz tüm seçenekler vurgulanıyor. Dolayısıyla, bu kaynakları okumaya değer.