0

Materiaalisuunnittelu Standardi helpotuskäyrä

Suunnittele mukautettu CSS-ajoitusfunktio cubic-bezier() vetämällä kahta ohjauspistettä, esikatsele sitä livenä lineaarista viittausta vasten ja kopioi sitten valmis arvo.

Vedä oranssia kahvaa (P1) ja punaista kahvaa (P2) muotoillaksesi käyrän uudelleen – myös nuolinäppäimet toimivat. X pysyy 0:n ja 1:n välillä CSS:n edellyttämällä tavalla; vedä kahvaa laatikon ylä- tai alapuolelle lähettääksesi y kyseisen alueen yli ylitys- ja pomppimistehosteita varten.

Sinun käyräsi

Lineaarinen (vertailun vuoksi)

Käsitellään... 0%

Tulos

Tämä sivu avaa generaattorin, jossa x1=0.4, y1=0, x2=0.2, y2=1 on jo ladattu – Googlen Material Designin liikeohjeissa julkaistu standardi helpotuskäyrä. Vedä joko käsittelemään tai muokkaamaan numeroita ja käyrää, live-esikatselua ja kopioitavaa CSS-päivitystä yhdessä.

Material Design kutsuu tätä käyrää "standardi helpotukseksi" ja suosittelee sitä useimpiin näytön siirtymiin – elementteihin, jotka ovat jo näkyvissä ja jotka yksinkertaisesti liikkuvat, muuttavat kokoa tai haalistuvat samalla näytöllä. Sen muoto kiihtyy nopeasti ja hidastuu sitten hitaasti paikalleen, minkä vuoksi niin monet Android-sovellukset ja materiaalityyliset verkkokäyttöliittymät jakavat saman siirtymätuntuman ilman, että kukaan huomaa käyttävänsä samoja neljää numeroa.

Pudota se suoraan siirtymäajoitustoimintoon tai animaation ajoitustoimintoon saadaksesi materiaalin yhtenäisen tunteen tai käytä sitä vertailukohtana: Materiaalin ohjeissa määritellään myös erilliset "hidastus"- ja "kiihtyvyys"-käyrät ruudulta tuleville tai sieltä poistuville elementeille, joita tämän yksittäisen vakiokäyrän ei ole tarkoitus korvata.