CSS3 Animasyon - Bezier Eğrisi Kullanarak Sıçrama Etkisi ile Fan Çıkışı Oluşturma
Bunu biliyor muydun geometrik dönüşümler ile HTML öğelerine eklendi. dönüştürmek
Ölçek, çarpıklık ve döndürme gibi CSS özelliği canlandırılabilir? Kullanarak canlandırılabilirler geçiş
mülkiyet ve @keyframes
animasyonlar, ama daha da serin olanı, animasyonlu dönüşümlerin biraz ilavesiyle çentik alınabileceğidir. sıçrama etkisi, kullanmak kübik Bezier ()
zamanlama fonksiyonu.
Kısaca, kübik Bezier ()
(CSS’de) geçişler için zamanlama fonksiyonu. Geçiş hızını belirler ve diğer şeylerin yanı sıra, Animasyonlarda zıplayan efekt yaratmak.
Bu yazıda, önce biz gidiyoruz basit bir dönüşüm animasyonu yarat sonra biz ekle kübik Bezier ()
zamanlama fonksiyonu. Bu eğitimin sonunda, kullanan bir animasyonun nasıl oluşturulacağını anlayacaksınız. hem çıkış hem de sıçrama efekti. İşte son sonuç (efekti görmek için tıklayın).
Demo, Christopher Jones'un animasyonlu bir konum işaretleyicisinden aldığı bu güzel Dribbble'den ilham alıyor.
1. Yaprakları oluşturma
Yer işaretleyicisinin şekli beş (onlardan diyelim) yapraklardan oluşur. Oluşturmak için oval şekil Bir yaprak, hadi kullanalım border-radius
CSS özelliği. border-radius
tek bir köşede iki yarıçaptan oluşur, yatay ve dikey, aşağıda gösterildiği gibi.
border-radius
özelliği birçok farklı sözdizimlerine sahiptir. İşaretleyicinin şekli için daha karmaşık bir tane kullanacağız:
sınır yarıçapı: htl htr hbr hbl / vtl vtr vbr vbl;
Bu sözdiziminde yatay ve dikey yarıçaplar birlikte gruplanmıştır; h
& v
yatay ve dikey yarıçapları temsil eder ve t
, l
, b
& r
üst, sol, alt ve sağ köşeleri temsil eder. Örneğin, VBL
sol alt köşenin dikey yarıçapı anlamına gelir.
Eğer verirsen sadece bir değer yatay veya dikey taraf için bu değer tarayıcı tarafından diğer tüm yatay veya dikey yarıçaplara kopyalanacaktır..
için dikey oval şekil oluşturmak, yatay yarıçapı korumak % 50
Tüm köşeler için istediğiniz şekli görünene kadar dikey olanları ayarlayın. yatay taraf sadece bir değer kullanacak: % 50
.
dikey yarıçaplar Sol üst ve sağ üst köşelerin % 30
, sol alt ve sağ alt köşeler % 70
değer.
HTML
CSS
.pinStarLeaf genişlik: 60px; yükseklik: 120px; sınır yarıçapı:% 50 /% 30% 30% 70% 70; arka plan rengi: # B8F0F5;
2. Yaprakları çarpma
İşaretçi beş yaprak göstererek ortaya çıkacağından, yarattık. yaprağın dört kopyası farklı renklerde ve birbirlerini istiflemek için mutlak konumlandırma ile.
HTML
CSS
#pinStarWrapper width: 300px; yükseklik: 300px; pozisyon: göreceli; .pinStarLeaf width: 60px; yükseklik: 120px; pozisyon: mutlak; sınır yarıçapı:% 50 /% 30% 30% 70% 70; solda: 0; sağ: 0; üst: 0; alt: 0; marj: otomatik; opaklık: .5; .pinStarLeaf: nth-of-type (1) arka plan rengi: # B8F0F5; .pinStarLeaf: nt-tür (2) arka plan rengi: # 9CF3DC; .pinStarLeaf: nt-of-type (3) arka plan rengi: # 94F3B0; .pinStarLeaf: nth-of-type (4) arka plan rengi: # D2F8A1; .pinStarLeaf: nth-of-type (5) arka plan rengi: # F3EDA2;
3. Tıklama Olayı Yakalama ve Estetiği İyileştirme
Haydi bir onay kutusu ekle ile #pinStarCenterChkBox
click olayını yakalamak için tanımlayıcı. Onay kutusu işaretlendiğinde yapraklar havalandırılır (döndürülür). Biz de eklemek gerekir beyaz daire ile #pinStarCenter
estetik için tanımlayıcı. İşaretçinin üzerine yerleştirilecek ve konum işaretleyicisinin orta parçası olacak.
HTML
Önce onay kutusunu, sonra da beyaz daireyi yapraklara yerleştiririz:
CSS
İlk önce, onay kutusu ve kaplama dairesi için temel stilleri belirledik:
#pinStarCenter, #pinStarCenterChkBox width: 45px; yükseklik: 50px; pozisyon: mutlak; solda: 0; sağ: 0; üst: -60px; alt: 0; marj: otomatik; arkaplan rengi: #fff; sınır yarıçapı:% 50; imleç: işaretçi; #pinStarCenter, .pinStarLeaf pointer-events: none; #pinStarCenter> input [type = "checkbox"] width: 100%; yükseklik:% 100; imleç: işaretçi;
Her yaprak z ekseni boyunca dönecek gibi farklı açılardan, ayarlamamız gerek dönüşümü: rotatez ();
buna göre mülkiyet yıldız şekli oluşturmak. Biz de uygulamak geçiş
özellik dönme efekti için (daha doğrusu biz geçiş: 1s lineer dönüşümü
yaprakları için kural).
#pinStarCenterChkBox: checked ~ .pinStarLeaf geçiş: dönüşümü 1s doğrusal; #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (5) dönüşümü: rotatez (35deg); #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (4) dönüşümü: rotatez (105deg); #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (3) dönüşümü: rotatez (180deg); #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (2) dönüşümü: rotatez (255deg); #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);
Yukarıdaki CSS’ye bakarsanız, #pinStarCenterChkBox: ~ işaretli
sadece eklediğimiz genel kardeş seçicisi geçiş
ve dönüştürmek
özellikleri onay kutusu işaretlendiğinde (kullanıcı işaretçiyi tıkladığında).
4. Rotasyon Merkezini Değiştirme
Varsayılan olarak, dönüşün merkezi konumlandırılır döndürülmüş elemanın ortasında, Bizim durumumuzda, yaprakların merkezinde. Dönüşümün merkezini yaprakların iç tarafına taşımamız gerekiyor. Bunu kullanarak yapabiliriz. dönüşümü menşeli
CSS özelliği bu Dönüştürülen öğelerin konumunu değiştirir.
Rotasyon efektinin doğru çalışması için, aşağıdaki iki kuralı ekleyelim. .pinStarLeaf
CSS dosyamızdaki seçici:
.pinStarLeaf dönüşüm kaynağı: 30 piksel 30 piksel; geçiş: 1s doğrusal dönüşümü;
Hayranımızın animasyonunu çalışırken görelim - bu noktada, henüz hemen çıkma etkisi olmadan. İşaretçinin üstündeki beyaz daireye tıklayın.
Ubic-Bezier () 'in Nasıl Çalıştığını Anlamak
Şimdi, hemen çıkma efekti eklemek için, doğrusal
zamanlama fonksiyonu kübik Bezier ()
içinde geçiş
CSS dosyamızdaki bildirimler.
Ama önce şunu anlayalım. arkasındaki mantık kübik Bezier ()
zamanlama fonksiyonu böylece hemen sıçrama etkisinin anlaşılması için.
İçin sözdizimi kübik Bezier ()
fonksiyon aşağıdaki gibidir, d
ve t
Hangi mesafe ve zaman, ve değerleri tipik olarak 0 ile 1 arasındadır:
kübik bezier (t1, d1, t2, d2)
CSS’yi açıklamasına rağmen kübik Bezier ()
mesafe ve zaman açısından doğru değil, bu şekilde anlamak çok daha kolay.
Var olduğunu varsayın A noktasından B noktasına hareket eden bir kutu 6 saniye içinde Aşağıdakileri kullanalım kübik Bezier ()
ile geçiş için zamanlama işlevi t1 = 0
ve d1 = 1
değerler.
/ * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / küp-bezier (0,1,0,0)
Neredeyse hiç bir zaman içinde, kutu A'dan orta noktaya hareket eder ve kalan sürenin B'ye ulaşmasını sağlar.
Değerlerle aynı geçişi deneyelim t1 = 1
ve d1 = 0
.
/ * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / küp-bezier (1,0,0,0)
İlk üç saniye boyunca, kutu fazla hareket etmiyor ve daha sonra neredeyse orta noktaya atlıyor ve düzenli olarak B yönünde hareket etmeye başlıyor..
Gördüğün gibi, d1
kontrol eder A arasındaki mesafe & orta nokta, ve t1
A noktasından orta noktaya ulaşmak için geçen süre.
Kullanalım d2
ve t2
şimdi. Her ikisi de t1
ve d1
1 olacak ve t2 = 1
ve d2 = 0
.
/ * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / küp-bezier (1,1,0,1)
Kutu 3 saniyede neredeyse yarıya indi ( t1 = 1
, d1 = 1
), ve hiçbir zaman B noktasına atlamaz.
Son örnek, önceki değerlerini değiştirir. t2
ve d2
:
/ * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / küp-bezier (1,1,1,0)
Kutu 3 saniyede neredeyse yarıya indi ( t1 = 1
, d1 = 1
), daha sonra 3 saniye daha B noktasına geçmeden önce fazla hareket etmez.
Bu örnekler göstermektedir ki d2
ve t2
kutunun aldığı mesafeyi ve zamanı kontrol etme orta noktadan B noktasına gitmek.
Her ne kadar muhtemelen bu kadar uzun (ama seyrek) bir açıklamaya gerek yoktu. kübik Bezier ()
Bu noktada, bu işlevi daha iyi anlamanıza yardımcı olacağını düşünüyorum. Şimdi, sıçrama tüm bunlara nereden geliyor??
5. Cubic-Bezier () ile Sıçrama Etkisi Ekleme
anahtar parametreler sıçrama etkisi için mesafeler, d1
ve d2
. bir d1
değeri 1'den az kutuyu alır A noktasının arkasında Animasyonun başlangıcında B'ye ilerlemeden önce.
bir d2
değeri 1'den fazla kutuyu alır B noktasının ötesinde Animasyon sonunda B de dinlenmeye geri dönmeden önce. Dolayısıyla ileri geri sıçrama etkisi.
Şimdi ekleyeceğim kübik Bezier ()
eski yerine demolarımıza doğrudan değer doğrusal
değeri geçiş
özelliği ve sonuçları görelim.
#pinStarCenterChkBox: kontrol ~ .pinStarLeaf geçiş: 1s kübik-bezier dönüştürün (.8, -. 5, .2,1.4);
İşte son sonuç, hemen çıkma etkisine sahip, yalnızca bir CSS fan-out animasyonu:
Karşılaştırma ve sıçrama etkisini daha iyi anlamak için, işte kübik Bezier ()
Animasyonun değeri, örnek kutumuza uygulandığında davranır: