CSS-versoepelingscurve in bouncestijl
Ontwerp een aangepaste CSS-cubic-bezier()-timingfunctie door twee controlepunten te slepen, een live voorbeeld ervan te bekijken tegen een lineaire referentie en vervolgens de gereedwaarde te kopiëren.
Resultaat
Deze pagina opent de generator met x1=0,68, y1=-0,55, x2=0,265, y2=1,55 al geladen - een overshoot-curve die sommige versoepelingsbibliotheken 'easOutBack' noemen. De negatieve y1 en de y2 boven 1 zijn precies de reden waarom het onderstaande animatievoorbeeld zich terugtrekt voorbij het begin en voorbij het einde voordat het zich vestigt; sleep een handgreep of bewerk de cijfers om het effect sterker of zachter te maken.
Om eerlijk te zijn over wat dit is: een enkele kubieke-Bezier()-curve heeft slechts twee controlepunten, dus deze kan bij benadering één overshoot-and-settle-beweging benaderen, en niet een echte fysieke stuiter met meerdere sprongen met verschillende afnemende sprongen. Voor een letterlijk bal-bounce-effect heb je meerdere keyframes of stappen()-segmenten nodig die aan elkaar zijn gekoppeld - deze curve komt het dichtst in de buurt van een gewone transitie-timing-functie op één regel.
Die enkele overschrijding is nog steeds precies wat de meeste veerkrachtige gebruikersinterface wil: een knop die iets voorbij zijn rustgrootte springt, een modaliteit die doorschiet voordat hij tot rust komt, een kaart die op zijn plaats springt. Kopieer de waarde zoals deze is voor dat pittige gevoel, of verzacht y1 richting 0 en y2 richting 1 om de overshoot terug te draaien.