Bézier-krommen gebruiken in CSS-animaties
In dit verhaal wordt wat gezegd over Bézier-krommen, zonder in te gaan op de wiskunde die er achter zit. Die is lastig om te begrijpen. Dat hoeft echter geen belemmering te zijn om het te gebruiken. Als je weet hoe het werkt kun je er gebruik van maken.
In CSS kun je elementen animeren (laten bewegen) met behulp van transitions. Met de transition-timing function stel je een derdegraads Bézierkromme in. Die wordt bepaald door vier punten: P0 t.m. P3.
Bij de implementatie van Bézierkrommen in CSS gelden de volgende regels:
- De coördinaten van vier punten zijn Reële getallen. Ze zijn allemaal tenminste nul en ten hoogste één.
- De horizontale as is de verstreken tijd. Die loopt van 0 t.m. 1 en hangt samen met de transition-duration. Als die is ingesteld op 6 seconden en er is (tijdens de transition) 1,5 seconde verstreken, is de horizontale coördinaat gelijk is aan 1,5/6 = 0.25.
- De verticale as is de voortgang van de transition. Ook die loopt van 0 t.m. 1. Vaak wordt gezegd: van 0 t.m. 100%, maar wees er op bedacht dat dat verwarring kan geven.
- Punt P0 heeft altijd de coördinaten (0,0).
- Punt P1 is een punt op de raaklijn aan de kromme in het punt P0.
- Punt P2 is een punt op de raaklijn aan de kromme in het punt P3.
- Punt P3 heeft altijd de coördinaten (1,1).
In de praktijk hoef je alleen de punten P1 en P2 op te geven. De punten
P0 en P3 liggen immers al vast!
Met de CSS-code: cubic-bezier(x1, y1, x2, y2) maak je een Bézier-curve.
Het vergt aardig wat oefening om op deze manier een mooi verloop in te stellen. Gelukkig voorziet CSS in vijf voorgedefinieerde waarden, waarmee je prima resultaten haalt:
linear. De snelheid is constant gedurende de overgang.
equivalent aancubic-bezier(0,0,1,1)ease. De overgang start en eindigt langzaam, maar verloopt snel. Dit is de default instelling.
equivalent aancubic-bezier(0.25,0.1,0.25,1)ease-in. De overgang start langzaam en verloopt sneller.
equivalent aancubic-bezier(0.42,0,1,1)ease-out. De overgang start snel en eindigt langzamer.
equivalent aancubic-bezier(0,0,0.58,1)ease-in-out. Combinatie van ease-in en ease-out.
equivalent aancubic-bezier(0.42,0,0.58,1)
Een uitgewerkt voorbeeld van het gebruik van ease-in vind je in het item Lichtgevende schaduwen met CSS.
De afstand tussen de punten P0 en P1, respectievelijk P2
en P3 (zeg maar de lengte van de raaklijn) heeft invloed op de transition. Dat komt
doordat de punten P1 en P2 de curve "met zich mee trekken". Zo
geeft cubic-bezier(0,0.5,1,0.5) een andere kromme dan cubic-bezier(0,1,1,0).
Op de website cubic-bezier.com kun je het verschil zichtbaar maken
door P1 en P2 te verslepen met de muis. Ook kun je daar het gedrag van je
eigen instellingen vergelijken met de in CSS voorgedefinieerde Bézier-krommen.
probeer eens: probeer eens: (0,1,1,0), (1,0,0,1), (0,1,.6,.8) en (1,0,0.5,1).
Opmerking: Behalve met een Bézier (een continue beweging) kun je een transition ook laten verlopen in stapjes. De CSS-eigenschappen daarvoor zijn:
| eigenschap | Betekenis | |
| steps(i, naam) | Specificeert een stap-functie, met twee parameters. De eerste parameter i is het aantal stappen.
Dit is een positief, geheel getal. De tweede parameter naam is een keyword: start of end. Hiermee geef
je het moment op waarop de de teller wordt bijgewerkt: aan het begin of aan het einde van elke stap. naam is optioneel
en mag dus worden weggelaten. In dat geval wordt end gebruikt. |
|
| step-start | Dit is gelijk aan steps(1,start) |
|
| step-end | Dit is gelijk aan steps(1,end) |
De toepassing van stap-functies is anders als bij Bezier-functies. Bij stap-functies denk je bijvoorbeeld aan een klok, of een progress-bar. Op de site van designmodo.com vind je een paar leuke demo's.
Opmerking:
in het HTML5-element <canvas> kun je ook ook Bézier-curven gebruiken. Die worden anders gedefinieerd dan in CSS.
De beperkingen van de CSS-versie heb je daar niet.
Het item Over Bézier-krommen geeft meer info over Bézier-krommen
in het algemeen.
