Kihariri cha Easing cha Cubic-Bézier

Zana zote

Buni mikunjo maalum ya easing ya cubic-bezier kwa kihariri cha kuburuta na onyesho la moja kwa moja la uhuishaji.

Kihariri cha mkunjo
1 2 0 1 0 1 Muda Maendeleo

Buruta vishikio viwili ili kuunda mkunjo wa easing.

Onyesho la awali la uhuishaji
Yenye easing
Linear
Jaza
1.2s
Vitone vya kudhibiti
Kitone 1
Kitone 2
Mipangilio tayari
Thamani
cubic-bezier(0, 0, 1, 1)
Matokeo ya CSS
transition-timing-function: —; animation-timing-function: —;

Kila kitu hufanyika ndani ya kivinjari chako — hakuna kinachopakiwa.

Kuhusu Kihariri cha Easing cha Cubic-Bézier

Cubic-Bézier Easing Editor inaunda kazi maalum za muda kwa mabadiliko na uhuishaji wa CSS. Buruta vishikizo viwili vya udhibiti kwenye kanvasi ya mkondo na thamani ya cubic-bezier(x1, y1, x2, y2) inasasishwa papo hapo; muonekano wa uhuishaji unacheza easing karibu na marejeleo ya linear ili uweze kuhisi tofauti, ukiwa na muda unaoweza kurekebishwa na uchezaji upya wa papo hapo.

Mipangilio kumi tayari inashughulikia msamiati wa kawaida — ease ya kawaida, ease-in, ease-out na ease-in-out, pamoja na mikondo yenye mvuto zaidi kama back na anticipate zinazopita kidogo zaidi ya miisho yao, na miteremko ya kimtindo cha material ya accelerate na decelerate. Itumie kama ilivyo au kama sehemu za kuanzia za kuburuta kuwa kitu chako mwenyewe.

Unaweza pia kuandika kuratibu sahihi za vidhibiti-nukta, bonyeza randomize kwa msukumo, na nakili thamani wazi ya cubic-bezier() au kanuni kamili ya CSS tayari kubandikwa. Kihariri chote hufanya kazi ndani ya kivinjari chako.

Jinsi ya kutumia Kihariri cha Easing cha Cubic-Bézier

  1. Buruta vishikizo viwili kwenye kihariri cha mkondo kuunda umbo la easing.
  2. Bofya Replay na linganisha uhuishaji uliopewa easing na marejeleo ya linear, ukirekebisha muda ikihitajika.
  3. Jaribu mipangilio — ease, back, anticipate, material na zaidi — kwa mwanzo wa haraka.
  4. Boresha kwa uzi kwa kutumia ingizo za nambari za vidhibiti-nukta kwa thamani sahihi.
  5. Nakili thamani ya cubic-bezier() au kipande kamili cha CSS.

Maswali yanayoulizwa mara kwa mara

Ni kuratibu za vidhibiti-nukta viwili: x1, y1, x2, y2. Mhimili wa x ni muda (0 hadi 1) na mhimili wa y ni maendeleo ya uhuishaji. Nukta zilizovutwa juu mapema hufanya mwendo uanze haraka; zilizovutwa chini, unaanza polepole.

Thamani za y zinaweza. Y iliyo juu ya 1 hufanya uhuishaji upite kidogo zaidi ya lengo lake na kutulia nyuma — mipangilio ya "back" na "anticipate" hufanya hasa hivi. Thamani za x lazima zibaki kati ya 0 na 1, kwa sababu muda hauwezi kwenda nyuma.

Katika transition-timing-function au animation-timing-function yoyote ya CSS, na katika chaguo la easing la Web Animations API. Inabadilisha maneno kama ease-in-out kwa mkondo uliobuniwa mahususi kwa kiolesura chako.

Tumia ease-out (mwanzo wa haraka, mwisho wa upole) kwa vipengele vinavyoingia kwenye skrini au vinavyoitikia ingizo — vinasikika kama vya haraka. Tumia ease-in kwa vipengele vinavyoondoka kwenye skrini. Ease-in-out inafaa mienendo ambapo miisho yote miwili inaonekana.

Ndiyo, ni bure bila akaunti inayohitajika, na inafanya kazi kabisa ndani ya kivinjari chako — hakuna unachobuni kinachopakiwa.
Shiriki hii
Zana Zinazohusiana
Kitengenezaji Sahihi ya Barua Pepe Buni sahihi ya barua pepe ya HTML yenye umbo la kitaalamu kutoka kwa templeti 30, ibinafsishe na uihifadhi. Bila Malipo
Ikoni hadi PNG Geuza Bootstrap Icons, Font Awesome na zaidi kuwa picha maalum za PNG — bure, ndani ya kivinjari chako. Bila Malipo
Kiunda Ikoni za Programu Unda seti kamili ya ikoni za programu iliyo tayari kwa duka kwa ajili ya App Store na Google Play — mandharinyuma bora ya gredienti, mesh na ruwaza, iliyoundwa kutoka nembo yako. Bila Malipo
Kitengeneza Favicon Tengeneza kifurushi kamili cha favicon kutoka kwa nembo, ikoni ya fonti au monogram — favicon.ico, PNG za kisasa, Apple touch icon, PWA icons, web manifest na kijisehemu cha HTML. Bila Malipo
Kizalishi cha CSS Box Shadow Tengeneza vivuli vya CSS box-shadow vilivyowekwa tabaka kwa kutumia vitelezi vya moja kwa moja vya umbali, ukungu, usambazaji, rangi, uwazi na inset — angalia muundo kwenye kipengele halisi na nakili CSS tayari kupachika papo hapo. Bila Malipo
Jenereta ya CSS Border Radius Tengeneza CSS border-radius kwa macho ukiwa na onyesho la moja kwa moja na nakili msimbo tayari kwa matumizi. Bila Malipo
Utafutaji maarufu
kihariri cha easing cha cubic bezier jenereta ya cubic-bezier css jenereta ya kazi ya easing ya css css transition timing function kihariri cha mkunjo wa easing wa uhuishaji mkunjo maalum wa bezier css ease-in-out cubic bezier
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.
Ripoti tatizo

Ongeza zana hii ya bure kwenye tovuti yako mwenyewe — nakili na ubandike msimbo ulio hapa chini.