CSS üçün xüsusi kubik-bezier yüngülləşmə əyrisini necə yarada bilərəm?

Qrafikdəki iki nəzarət nöqtəsi tutacağını dartın, dəqiq x1, y1, x2, y2 dəyərlərini yazın və ya bir şablon seçin. Sonra Çıxış formatı altında CSS seçin və transition-timing-function üçün cubic-bezier() dəyərini əldə etmək üçün Kopyala düyməsinə klikləyin.

Cubic-bezier ilə sıçrama və ya həddi aşma effektini necə edə bilərəm?

Tutacağı qutunun yuxarısına və ya aşağısına dartın ki, onun Y dəyəri 0-1 aralığını keçsin. Y bu aralığı aşa bilər, X isə 0 ilə 1 arasında qalır. Geri çəkilmə və qabaqlama şablonları hazır həddi aşma başlanğıc nöqtələridir.

Tailwind, Framer Motion və ya anime.js üçün yüngülləşməni əldə edə bilərəm?

Bəli. Çıxış formatı tabları CSS, Tailwind, Framer Motion və anime.js-dir. Hamısı eyni dörd rəqəmi formatlayır, ona görə də bir tab seçin və fraqmenti mübadilə buferinizə qoymaq üçün Kopyala düyməsinə klikləyin.

Redaktə etmək üçün mövcud cubic-bezier dəyərini necə yükləyə bilərəm?

İdxal qutusuna cubic-bezier(.17, .67, .83, .67) kimi bir dəyər yapışdırın və Yükləyin düyməsinə klikləyin. Əgər dörd rəqəm oxuna bilmirsə, xəta mesajı alırsınız. Əyri həmçinin səhifə URL-ində diyez işarəsindən sonra saxlanılır, beləliklə paylaşıla bilər.

Niyə önizləmə mənim real keçidlərimdən daha yavaş hiss olunur?

Hərəkət önizləməsi dəyişdirə biləcəyiniz Müddət parametrini istifadə edir və susmaya görə əyrini öyrənə bilməniz üçün daha yavaşdır. Göndərməyi planlaşdırdığınız sürətdə hərəkəti görmək üçün Müddəti qısaldın, sonra Təkrar et düyməsini istifadə edin.

Həqiqətən pulsuzdur?

Bəli. Hər alət pulsuzdur, hesab və kredit kartı tələb olunmur. İş serverlərimizdə deyil, cihazınızda icra olunur, bu da onu pulsuz saxlayır.

Mobil cihazda işləyir?

Bəli. iOS və Android-in müasir mobil brauzerlərində heç nə quraşdırmadan işləyir.

📈

Pulsuz CSS Kubik-Bezier Yüngülləşmə Generatoru

Nəzarət nöqtələrini sürükləyərək CSS yüngülləşmə əyrilərini dizayn edin, hərəkəti canlı önizləyin və cubic-bezier() dəyərini kopyalayın. Aşım/sıçrayış əvvəlcədən hazırlanmış parametrlər daxildir.

Brauzerdə işləyirQeydiyyat yoxdur, açılan pəncərə yoxdurGiriş tələb olunmurHəmişəlik pulsuz

Bir dəfə yükləndikdən sonra oflayn işləyir

Əyrini şəkilləndiirmək üçün teal və çəhrayı tutacaqları sürüşdürün

Nəzarət nöqtələri

x1y1x2y2

Hərəkət önizləməsi

Müddət1,6 san

En keçidi

CSS dəyəri

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Hazır dəstlər

Çəhrayı və teal tutacaqlar qutunun üstünə və ya altına çıxa bilər (Y 0-1 xaricində) — back-out və anticipate kimi 'aşmaq' / sıçrama effektləri yaratmaq üçün. X 0-1 daxilində qalır (vaxt geri gedə bilməz).

Ümumi istifadələr

Xüsusi CSS Keçiş RahatlaşmasıFəaliyyət effektləri, menyular və UI keçişləri üçün təbii hissəli rahatlıq dəstə edin.
Sıçrama və Overshoot AnimasiyalarıNəzarət nöqtələrini qutunun xaricində çəkmə yolu ilə əyləncə yay/sıçrama hərəkətini yaradın.
@keyframes Animasiyaları üçün RahatlaşmaCSS keyframe animasiyaları üçün düzgün animasiya vaxtı funksiyasını seçin.
JS Animasiya Kitabxanaları üçün Rahatlaşma DəyərləriGSAP, Framer Motion, anime.js və daha çoxu üçün cubic-bezier dəyərləri əldə edin.
Rahatlaşmanın Necə İşlədiyini Başa DüşünBezier əyrisi ilə onun yaratdığı hərəkət arasındakı əlaqəni görmək.

Necə İşləyir

Redaktor tamamilə brauzerdə React state və SVG istifadə edərək qurulub — heç bir kitabxana əyri riyaziyyatını idarə etmir. İki sürüklənə bilən idarə nöqtəsi bir SVG kubik Bezier yolunu müəyyən edir, brauzerin öz CSS animasiya mühərriki isə nəticələnən cubic-bezier() dəyərini birbaşa bir @keyframes qaydasına inyeksiya edərək hərəkət önizləməsini işlədir.

1
İdarə nöqtələrini sürükləyin, ya da yazın
İki tutacaq (firuzəyi P1, çəhrayı P2) bir SVG kanvası üzərindədir. Sürükləmə setPointerCapture ilə Pointer Events API istifadə edir, ona görə tutacaq barmağınızı və ya kursorunuzu SVG sərhədindən kənarda belə izləyir. Tutacaqları ox düymələri ilə də tərpədə, ya da dəqiq dəyərləri x1/y1/x2/y2 rəqəm girişlərinə yaza bilərsiniz.
2
SVG əyrini real vaxtda çəkir
Əyri C (kubik Bezier) əmri hər state yeniləməsində dörd idarə nöqtəsi koordinatından yenidən hesablanan tək bir SVG <path> elementidir. Canvas yoxdur, xarici kitabxana yoxdur — brauzerin SVG render mühərriki yolu birbaşa çəkir.
3
Brauzer CSS mühərriki yumşaltmanı önizləyir
Üç canlı animasiya (sürüşən bir nöqtə, bir en keçidi və bir miqyas) inline inyeksiya edilmiş cubic-bezier() dəyəri ilə CSS @keyframes işlədir. Brauzerin öz animasiya mühərriki əyrini şərh edir, ona görə gördükləriniz dəqiq olaraq sizin istehsal CSS-inizin yaradacağı şeydir.
4
Parçanı öz çərçivənizin sintaksisi ilə kopyalayın
Sekmelər eyni dörd rəqəmi bir CSS transition-timing-function, bir Tailwind özbaşına-dəyər sinfi, bir Framer Motion ease massivi, ya da bir anime.js yumşaltma sətri kimi formatlayır. Parça navigator.clipboard ilə mübadilə buferinə yazılır. Əyri həmçinin URL heşinə (#b=x1,y1,x2,y2) kodlaşdırılır, ona görə onu paylaşa və ya əlfəcinə əlavə edə bilərsiniz.