Öncelikle nedir Bezier eğrisi?
Bézier eğrisi, özellikle bilgisayar grafikleri ve ilgili alanlarda sıklıkla kullanılan parametrik eğri biçimidir. Eğri, seçilen kontrol noktaları esas alınarak oluşturulur. İlk ve son noktalar eğri ile kesişirken, seçilen diğer noktalar genellikle eğrinin üzerinde yer almaz (interpolasyon eğrisi).
Günümüzde modelleme uygulamalarından, yazı tipi oluşturma tekniklerine kadar sayısız alanda kullanılmaktadır
Css3 Transation efeklerinde çok kullanılan bu yöntem oluşturacağımız geçişlere daha estetik geçişler sağlamak için kullanılan fonksiyonlardır. CSS3 ile birlikte gelen transition efekti başlangıç tanımı doğrusal bir geçiştir. Biz bu özelliğe ease, ease-in, ease-out, ease-in-out ve cubic-bezier değerlerini tanımlayabiliyoruz. cubic-bezier tanımı ise geçişleri kendimize göre tanımlama imkanı veriyor. Kendi zaman çizgimizi hazırlamak(cubic-bezier) biraz zor olsa da internet üzerindeki bazı araçlar yardımı ile bu işte kolaylaştırılmıştır.
Tipi : Geçişini tipini belirtiyoruz. Seçeneklerimiz şu şekilde :
- linear : Çizgisel geçiş. Başlangıç ve bitiş hızı aynı olan bu efekti cubic-bezier(0,0,1,1) ile de elde edebiliyoruz.
- ease : Animasyon yavaş başlar, sonra hızlanır ve kapanış yine yavaş olur. Bu efekti cubic-bezier(0.25,0.1,0.25,1) ile de elde edebiliyoruz.
- ease-in : Animasyonun yavaş başlamasını sağlar. Bu efekti cubic-bezier(0.42,0,1,1) ile de elde edebiliyoruz.
- ease-out : Animasyonun yavaş bitmesini sağlar. Bu efekti cubic-bezier(0,0,0.58,1) ile de elde edebiliyoruz.
- ease-in-out : Animasyonun başlangıç ve bitiş hızı yavaşlar. Diğer alanlar olduğu gibi kalır. Bu efekti cubic-bezier(0.42,0,0.58,1) ile de elde edebiliyoruz.
- cubic-bezier(n,n,n,n) : 0 ile 1 arasında değer girebildiğimiz, geçişleri manuel olarak belirlediğimiz kod tipidir.
- steps : Animasyon için adım belirtebileceğimiz geçiş tipidir. Örneğin steps(5, end) şeklinde ayarlandığında tüm animasyonun 5 adımda tamamlanmasını sağlarız. Geçişler diğer efektlere kıyasla daha sert olabilir.
Bu aracı kullanmak için Cubic Bezier sitesini ziyaret edebilirsiniz.
