Redaktor cubic-bezier

Si ta përdorësh redaktorin cubic-bezier

1. Zhvendos dy dorezat në grafik. P1 (pika e parë e kontrollit) formëson fillimin e lëvizjes, P2 fundin. Koha vrapon nga e majta në të djathtë dhe përparimi nga poshtë lart.
2. Ose shkruaj një vlerë te Vlera cubic-bezier(): një cubic-bezier(0.4, 0, 0.2, 1) të plotë, katër numra, ose një fjalë kyçe si ease-in-out. Fushat x1, y1, x2 dhe y2 ndryshojnë një koordinatë në herë.
3. Nise nga menuja Gatishmëri (fjalë kyçe CSS, familjet nga sine te back dhe kurbat Material Design) ose nga butonat e fjalëve kyçe. Kur kurba jote përputhet me një gatishmëri, emri i saj shfaqet pranë butonave.
4. Shiko Pamjen paraprake të animacionit: pika te Kurba jote dhe pika te linear udhëtojnë të njëjtën largësi në të njëjtën Kohëzgjatje. Përdor Pusho/Luaj dhe Rinis për t’i krahasuar.
5. Kopjo rezultatin nga Funksioni kohor CSS, ose kopjo përafrimin linear() dhe zgjidh numrin e Segmenteve.

Tastierë: fokuso një dorezë dhe përdor shigjetat për ta lëvizur me 0,01, ose 0,1 me Shift.

Nëse sistemi yt është caktuar të reduktojë lëvizjen, animacioni nis i pezulluar. Shtyp Luaj nëse do ta nisësh gjithsesi.

Çfarë do të thotë cubic-bezier()

Një funksion easing CSS e lidh kohën e kaluar të një tranzicioni (0 deri 1) me përparimin e tij (0 deri 1). cubic-bezier(x1, y1, x2, y2) e përshkruan këtë lidhje me një kurbë kubike Bézier që nis në (0, 0), mbaron në (1, 1) dhe tërhiqet nga dy pika kontrolli, P1 = (x1, y1) dhe P2 = (x2, y2).

• Vlerat x janë kohë dhe duhet të qëndrojnë mes 0 dhe 1, përndryshe funksioni nuk do të ishte kurbë e vlefshme kohore. Redaktori i mban brenda kufijve.
• Vlerat y janë përparim dhe mund të shkojnë nën 0 ose mbi 1. Një y mbi 1 e bën animacionin të tejkalojë objektivin e vet dhe të kthehet, si kurbat Back; nën 0 fillimisht lëviz prapa.
• Një pjerrësi e madhe do të thotë lëvizje e shpejtë, një pjerrësi e sheshtë lëvizje e ngadaltë. ease-out nis shpejt dhe mbaron ngadalë, gjë që duket natyrale për elementët që hyjnë në ekran. ease-in bën të kundërtën dhe i përshtatet elementëve që dalin.

Fjalët kyçe CSS janë shkurtore: 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) dhe linear = (0, 0, 1, 1).

Përafrimi linear()

Funksioni më i ri linear() rendit vlera përparimi në kohë me largësi të barabartë, për shembull linear(0, 0.25, 0.5, 0.75, 1), dhe i lidh me vija të drejta. Mjeti e mostron kurbën tënde (e zgjidh Bézier për çdo hap kohe) dhe i shkruan ato vlera me tri shifra pas presjes. Me 20 deri 40 segmente rezultati është vizualisht identik me kurbën. Përfitimi real i linear() është për kurba që një Bézier nuk mund t’i vizatojë, si kërcimet dhe sustat, por të lejon edhe të ndash një sintaksë të vetme. Funksionon në Chrome dhe Edge 113+, Firefox 112+ dhe Safari 17.2+, prandaj mbaje vlerën cubic-bezier() si rezervë.