Cubic-bezier generatoru
Qrafikdə iki nöqtəni sürüşdürün və ya dəyərləri yazın — əyri və animasiya dərhal yenilənir, aşağıda isə cubic-bezier() ilə hazır transition görünür.
.element {
transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
}Necə istifadə etmək olar
- Hazır əyrini seçin (
ease,ease-out,easeOutBackvə s.) və ya standart əyridən başlayın. - Qrafikdəki qırmızı və bənövşəyi nöqtələri sürüşdürün və ya
x1,y1,x2,y2sahələrinə dəyər yazın. Klaviaturadan: nöqtəyə fokuslanın və ox düymələrindən istifadə edin (Shift — kiçik addım). - Müddəti və müqayisə əyrisini (
linear,ease…) seçib «Oynat» düyməsini basın: mavi blok sizin əyri ilə, boz blok isə müqayisə əyrisi ilə hərəkət edir. - «Kopyala» düyməsini basın və
transition-u öz CSS faylınıza yapışdırın.
Bu necə işləyir
cubic-bezier() nə deməkdir
cubic-bezier(x1, y1, x2, y2) (0, 0) nöqtəsindən başlayıb (1, 1) nöqtəsində bitən Bézier əyrisini təsvir edir. Üfüqi ox zamanı, şaquli ox isə dəyişikliyin nə qədərinin tamamlandığını göstərir. Dörd ədəd iki idarəetmə nöqtəsinin koordinatlarıdır: P1 əyrini əvvəldə, P2 isə sonda «dartır». Əyri nə qədər dikdirsə, həmin anda hərəkət o qədər sürətlidir.
transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);Açar sözlər hazır əyrilərdir
Hər sürət açar sözü sabit bir cubic-bezier()-in qısaltmasıdır: ease — cubic-bezier(0.25, 0.1, 0.25, 1), ease-in — (0.42, 0, 1, 1), ease-out — (0, 0, 0.58, 1), ease-in-out — (0.42, 0, 0.58, 1), linear — (0, 0, 1, 1). ease həm də transition-timing-function və animation-timing-function üçün susmaya görə dəyərdir.
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* = ease-in-out */Hədəfi keçmək: y 0..1 aralığından kənarda
x dəyərləri 0 ilə 1 arasında qalmalıdır, y isə bu aralıqdan çıxa bilər. Onda xassə hədəfi keçib geri qayıdır — cubic-bezier(0.34, 1.56, 0.64, 1) kimi «back» effekti alınır. Bu transform və miqyas üçün əladır, amma opacity kimi öz aralığından çıxa bilməyən xassələr üçün mənasızdır.
transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);Harada tətbiq etməli
Əyrini bütün animasiya üçün transition və ya animation-da, ayrı-ayrı hissələr üçün isə @keyframes daxilində yazın. Rəvan 60 kadr/san üçün transform və opacity animasiya edin. Bir cubic-bezier ilə bir neçə sıçrayış etmək olmur — bunun üçün keyframes və ya linear() funksiyasından istifadə edin.
Tez-tez verilən suallar
Niyə x1 və x2 0 ilə 1 arasında olmalıdır?
x oxu zamandır, zaman isə geriyə getmir. x-i 0..1 aralığından kənar olan cubic-bezier() yanlışdır və brauzer bütün bəyannaməni nəzərə almır. Generator x-i sizin üçün məhdudlaşdırır.
y 0-dan kiçik və ya 1-dən böyük ola bilərmi?
Bəli. y 0-dan kiçik olarsa, animasiya əvvəlcə əks istiqamətdə gedir (yellənmə), 1-dən böyük olarsa hədəfi keçir. Bu yalnız belə dəyərləri qəbul edən ədədi xassələrdə, məsələn transform-da görünür.
cubic-bezier() ilə steps() arasında fərq nədir?
cubic-bezier() rəvan, fasiləsiz dəyişiklik verir, steps() isə verilmiş sayda mövqe arasında sıçrayışlarla keçir. Sprayt animasiyası və çap maşını effekti üçün istifadə olunur.
İnterfeys üçün hansı əyrini seçməli?
Adətən ease-out görünən elementlər üçün (sürətli start, yumşaq dayanma), ease-in yox olan elementlər üçün, ease-in-out ekran üzrə yerdəyişmə üçün uyğundur. İnterfeys keçidlərini 150–400 ms daxilində saxlayın.
