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: