Editur tal-cubic-bezier

Kif tuża l-editur tal-cubic-bezier

1. Kaxkar iż-żewġ handles fuq il-grafika. P1 (l-ewwel punt ta’ kontroll) jifforma l-bidu tal-moviment, P2 it-tmiem. Iż-żmien imur minn xellug għal lemin u l-progress minn isfel ’il fuq.
2. Jew ikteb valur f’Valur cubic-bezier(): cubic-bezier(0.4, 0, 0.2, 1) sħiħ, erba’ numri, jew kelma ewlenija bħal ease-in-out. L-oqsma x1, y1, x2 u y2 jeditjaw koordinata waħda kull darba.
3. Ibda mill-menu Preset (kliem ewlenin CSS, il-familji sine sa back, u l-kurvi ta’ Material Design) jew mill-buttuni tal-kliem ewlenin. Meta l-kurva tiegħek taqbel ma’ preset, jintwera ismu ħdejn il-buttuni.
4. Segwi l-Previżjoni tal-animazzjoni: il-punt fuq Il-kurva tiegħek u l-punt fuq linear jgħaddu l-istess distanza fl-istess Tul. Uża Waqqaf/Ibda u Erġa’ ibda biex tqabbilhom.
5. Ikkopja r-riżultat minn Funzjoni tal-ħin CSS, jew ikkopja l-Approssimazzjoni linear() u agħżel in-numru ta’ Segmenti.

Keyboard: iffoka handle u uża ċ-ċwievet tal-vleġġa biex tiċċaqlqu b’0.01, jew 0.1 b’Shift.

Jekk is-sistema tiegħek hija mwaqqfa għal inqas moviment, l-animazzjoni tibda mwaqqfa. Agħfas Ibda jekk trid tħaddimha xorta.

L-għodda taħdem fil-brawżer tiegħek u xejn ma jintbagħat lil server.

X’jifisser cubic-bezier()

Funzjoni easing CSS timmappja ż-żmien li għadda ta’ tranżizzjoni (0 sa 1) għall-progress tagħha (0 sa 1). cubic-bezier(x1, y1, x2, y2) tiddeskrivi dan il-mappjar b’kurva Bézier kubika li tibda f’(0, 0), tispiċċa f’(1, 1) u tinġibed minn żewġ punti ta’ kontroll, P1 = (x1, y1) u P2 = (x2, y2).

• Il-valuri x huma ż-żmien u jridu jibqgħu bejn 0 u 1, inkella l-funzjoni ma tkunx kurva valida tal-ħin. L-editur iżommhom fil-limitu.
• Il-valuri y huma l-progress u jistgħu jmorru taħt 0 jew ’il fuq minn 1. Y ’il fuq minn 1 jagħmel l-animazzjoni taqbeż il-mira tagħha u terġa’ lura, bħall-kurvi Back; taħt 0 l-ewwel tmur lura.
• Inklinazzjoni wieqfa tfisser moviment veloċi, waħda ċatta moviment bil-mod. ease-out jibda malajr u jispiċċa bil-mod, u dan jidher naturali għal elementi li jidħlu fl-iskrin. ease-in jagħmel l-oppost u jaqbel għal elementi li jitilqu.

Il-kliem ewlenin CSS huma shortcuts: 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) u linear = (0, 0, 1, 1).

L-approssimazzjoni linear()

Il-funzjoni linear() iktar ġdida telenka valuri ta’ progress f’ħinijiet imqassma b’mod indaqs, per eżempju linear(0, 0.25, 0.5, 0.75, 1), u tgħaqqadhom b’linji dritti. L-għodda tieħu kampjuni mill-kurva tiegħek (issolvi l-Bézier għal kull pass ta’ ħin) u tikteb dawk il-valuri b’tliet deċimali. B’20 sa 40 segment ir-riżultat huwa viżwalment identiku għall-kurva. Il-vantaġġ reali ta’ linear() huwa għal kurvi li Bézier ma jistax jifassal, bħal qbiżiet u effetti ta’ molla, imma tippermettilek ukoll taqsam sintassi waħda. Taħdem f’Chrome u Edge 113+, Firefox 112+ u Safari 17.2+, allura żomm il-valur cubic-bezier() bħala fallback.