Creëer complexe animatiecurven in CSS met de lineaire()-easingfunctie

Maak kennis met linear() , een easing-functie in CSS die lineair interpoleert tussen de punten, waardoor je stuiterende en verende effecten kunt nabootsen.

Bramus

Versoepelingen in CSS

Bij het animeren of laten overgaan van elementen in CSS, bepaal je de snelheid waarmee een waarde verandert met een easing-functie met behulp van de eigenschappen animation-timing-function en transition-timing-function .

Er zijn verschillende trefwoorden beschikbaar als presets in CSS, namelijk linear , ease , ease-in , ease-out en ease-in-out . Om je eigen easing-curven te creëren, gebruik je de functie cubic-bezier() , of kies je voor een stapsgewijze aanpak met de easing-functie steps() .

Bij correct gebruik geven easing-effecten een geanimeerd element een gevoel van gewicht, waardoor het lijkt alsof het momentum opbouwt.

Het creëren van complexe curves zoals stuiterende of verende effecten is niet mogelijk in CSS, maar dankzij linear() kun je ze nu verbazingwekkend goed benaderen.

Een inleiding tot linear()

Een nieuwe manier om een ​​easing in CSS te definiëren is met linear() . Deze functie accepteert een aantal stops, gescheiden door komma's. Elke stop is een enkel getal tussen 0 en 1. Tussen elke stop wordt de interpolatie lineair uitgevoerd, wat de naam van de functie verklaart.

animation-timing-function: linear(0, 0.25, 1);

Deze stops zijn standaard gelijkmatig verdeeld. In het voorgaande codefragment betekent dit dat de uitvoerwaarde van 0.25 wordt gebruikt bij 50%.

Visualisatie van de grafiek voor linear(0, 0.25, 1) ziet er als volgt uit:

Als u niet wilt dat de stops gelijkmatig verdeeld zijn, kunt u optioneel een stoplengte opgeven. Wanneer u één waarde als stoplengte opgeeft, definieert u het startpunt ervan:

animation-timing-function: linear(0, 0.25 75%, 1);

Hier wordt een uitvoerwaarde van 0.25 niet gebruikt bij 50% , maar wel bij 75% .

Wanneer je twee waarden opgeeft als stoplengte, definieer je zowel het begin- als het eindpunt:

animation-timing-function: linear(0, 0.25 25% 75%, 1);

Een uitvoerwaarde van 0,25 zal gedurende 25% tot 75% van de tijd worden gebruikt.

Complexe krommen creëren

Hoewel de voorgaande voorbeelden eenvoudigere easing-functies zijn, kunt u linear() gebruiken om complexere easing-functies na te bootsen, zij het met een kleine concessie aan de precisie.

Neem bijvoorbeeld deze bounce easing curve, een type easing dat niet direct in CSS kan worden uitgedrukt, maar is gedefinieerd met behulp van JavaScript:

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

Hoewel de code zelf misschien niet veel zegt, kan een visualisatie dat wel. Hier is de output, weergegeven als een blauwe curve:

De curve kan worden vereenvoudigd door er een aantal haltes aan toe te voegen. Hier geeft elke groene stip een halte aan:

Wanneer dit wordt doorgegeven aan linear() , is het resultaat een curve die enigszins lijkt op de originele, maar met iets ruwere randen.

Vergelijk het groene animatievak met het blauwe; je ziet meteen dat het minder vloeiend is.

Maar als je voldoende tussenstops toevoegt, kun je de oorspronkelijke curve vrij goed benaderen. Hier is een bijgewerkte versie:

Door het aantal stops te verdubbelen, krijg je al een vloeiend resultaat.

De code die gebruikt wordt voor de animatie ziet er als volgt uit:

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

Een hulpmiddel

Het handmatig maken van deze lijst met stops zou erg omslachtig zijn. Gelukkig hebben Jake en Adam een ​​tool ontwikkeld waarmee je een easing curve kunt omzetten naar een linear() .

De tool gebruikt een JavaScript-easingfunctie of een SVG-curve als invoer en genereert de vereenvoudigde curve met behulp van de linear() . Gebruik de schuifregelaars om het gewenste aantal stops en de precisie ervan te bepalen.

Rechtsboven kunt u ook een van de voorinstellingen kiezen: Spring, Bounce, Simple elastic of Material Design emphasised easing zijn inbegrepen.

DevTools-ondersteuning

In DevTools is ondersteuning beschikbaar voor het visualiseren en bewerken van het resultaat van linear() . Klik op het pictogram om een ​​interactieve tooltip weer te geven waarmee u de eindpunten kunt verslepen.

Deze DevTools-functie is beschikbaar in DevTools vanaf Chrome 114.