Lås opp dynamiske visuelle effekter: Animering av egendefinerte CSS-egenskaper med Houdini Worklets

            
:root {
  --progress: 0;
}

@keyframes animate-progress {
  to {
    --progress: 100;
  }
}

.progress-bar {
  width: var(--progress)%; /* Dette animeres ikke jevnt i CSS alene */
}

            

              
                Copy
              
            
          

            
// progress-animation.js

// Definer en klasse som utvider AnimationWorklet
class ProgressAnimation {
  constructor(delay, end, easing) {
    this.delay = delay;
    this.end = end;
    this.easing = easing;
  }

  // Animate-metoden kalles av nettleseren for hver ramme
  animate(currentTime, playState) {
    // playState kan være 'running', 'paused', 'finished', osv.
    if (playState !== 'running') {
      return playState;
    }

    // Beregn fremdriften basert på tid og easing
    // For enkelhets skyld, la oss anta en lineær ease foreløpig
    // I et reelt scenario ville du implementert mer sofistikerte easing-funksjoner
    let progress = Math.min(currentTime / 1000, 1); // Antar 1 sekunds varighet
    progress = Math.max(0, progress); // Begrens mellom 0 og 1

    // Bruk easing (eksempel: ease-in-out)
    progress = this.easing(progress);

    // Beregn den faktiske verdien basert på sluttverdien
    const currentValue = this.end * progress;

    // Returner den nåværende verdien for den egendefinerte egenskapen
    return currentValue;
  }
}

// Registrer den egendefinerte animasjonen
CSS.registerAnimation({
  name: 'animateProgress',
  // Vi bruker en egendefinert easing-funksjon, for eksempel:
  // Dette er en forenklet versjon av en ease-in-out-funksjon
  easingFunction: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
  // Definer varigheten av animasjonen. I et reelt scenario ville dette vært dynamisk.
  // For dette eksempelet hardkoder vi den for enkelhets skyld, men den kunne blitt sendt som en parameter.
  // La oss anta at vår animasjons-worklets animate-metode er designet for å kjøre i 1 sekund.
  // `end`-verdien vil bli gitt når animasjonen anvendes.
  // Den faktiske varigheten håndteres av Worklet-ens `animate`-metode.
  // Denne `duration` i `registerAnimation` er mer for CSS @keyframes.
  // For direkte Worklet-animasjon av egendefinerte egenskaper, styrer `animate`-metoden timingen.
  // Men for å integrere med CSS `animation`-egenskapen, trengs et varighetskonsept.
  // La oss vurdere at `animate`-metoden håndterer timing, og vi fokuserer på det.
  // Hvis vi vil bruke dette med CSS `animation`-egenskapen som `animation: 1s ease-in-out my-animation;`,
  // måtte vi også eksponert varighet og easing til CSS.
  // For direkte animasjon av egendefinerte CSS-egenskaper, kan vi bruke et annet API eller en annen tilnærming.
  // La oss forfine dette for å direkte animere en egendefinert egenskapsverdi over tid.
  // `CSS.paintWorklet.addModule` eller `CSS.animationWorklet.addModule` brukes for å laste worklets.
  // For å animere egendefinerte egenskaper, bruker vi vanligvis `animate()`-metoden på et Animation-objekt.

  // La oss revurdere strukturen for å samsvare med animering av egendefinerte egenskaper.
  // `AnimationWorklet` brukes til å lage egendefinerte `KeyframeEffect`-instanser.
  // Når vi anvender en animasjon på en egendefinert egenskap, lager vi i hovedsak en sekvens av verdier.
  // Worklet-ens `animate`-metode er ansvarlig for å generere disse verdiene.

  // En mer direkte måte å oppnå animasjon av egendefinerte egenskaper med Houdini er gjennom Animation API.
  // Vi kan definere en egendefinert animasjonsklasse som produserer verdier for en egendefinert egenskap.

  // La oss forenkle for klarhet og fokusere på kjernekonseptet: å drive verdier for egendefinerte egenskaper.
  // Vi bruker en enkel egendefinert easing og en implisitt varighet som håndteres av nettleserens animasjonsplanlegger når den er koblet til CSS.
  // `animate`-metoden i et `CSSAnimation`-objekt (som vi ville laget fra en Worklet) ville mottatt tid.
  // For enkelhets skyld, la oss vurdere en enklere tilnærming for demonstrasjon som fokuserer på `animate`-metoden.

  // Tenker nytt om registreringen for animasjon av egendefinerte egenskaper. `CSS.registerAnimation` er for CSS @keyframes.
  // For å direkte animere egendefinerte egenskaper, bruker vi ofte Animation API.
  // Men Worklets kan definere egendefinerte animasjonstyper. `animation-timeline`-egenskapen er også relevant.

  // La oss anta et scenario der vi ønsker å drive en egendefinert egenskap ved hjelp av nettleserens animasjonstidslinje.
  // `animate`-metoden i en Worklet er faktisk stedet å definere hvordan verdier endres over tid.

  // La oss prøve en mer konkret tilnærming med Animation API som direkte driver den egendefinerte egenskapen.
  // `animation-worklet.js`-tilnærmingen er vanligvis for å registrere egendefinerte animasjoner for CSS `animation`-egenskapen.
  // For å animere egendefinerte egenskaper, bruker vi ofte JavaScripts Animation API.

  // Den første tanken kan være å registrere en egendefinert animasjon som skal brukes med `animation-name`.
  // Men for egendefinerte egenskaper ønsker vi ofte å kontrollere verdiene deres direkte.
  // Houdini tilbyr Animation API for dette:
  // const anim = new Animation(effect, timing); anim.play();
  // `effect` kan være en `KeyframeEffect` som retter seg mot en egendefinert egenskap.

  // La oss fokusere på konseptet med en egendefinert animasjonstidslinje eller -sekvens.
  // `AnimationWorklet` er designet for å tilby egendefinerte `KeyframeEffect`-definisjoner eller egendefinert animasjonslogikk.
  // Vurder dette eksempelet som handler om å lage en egendefinert animasjonssekvens som kan anvendes.

  // `CSS.registerAnimation` er faktisk for egendefinerte nøkkelramme-baserte animasjoner som kan anvendes via `animation-name`.
  // Når vi bruker en egendefinert egenskap som `--progress`, vil vi at verdien skal interpoleres.
  // `animate`-metoden i Worklet-en skal returnere verdien for egenskapen.

  // La oss lage en enkel Worklet som kan brukes til å drive en egendefinert egenskap.
  // Kjerneideen er `animate`-funksjonssignaturen: `animate(currentTime, playState)`.

  // Riktig tilnærming for å registrere en egendefinert animasjonssekvens:
  // `animate`-metoden må være en del av en struktur som Animation API forstår.
  // Et vanlig mønster er å lage et objekt som Animation API kan konsumere.

  // La oss anta at `CSS.animationWorklet.addModule()` brukes for å laste dette.
  // `animate`-metoden selv er det som vil generere de interpolerte verdiene.

  // For å animere egendefinerte egenskaper er `Animation` API-en nøkkelen. La oss illustrere hvordan en egendefinert animasjons-*generator* kan fungere.
  // `CSS.registerAnimation` er for animasjoner på CSS-nivå.
  // For JavaScript-drevet animasjon av egendefinerte egenskaper er `Animation` API-en mer direkte.

  // La oss bytte til et klarere eksempel som fokuserer på Animation API.
  // Vi simulerer en egendefinert animasjonslogikk som genererer verdier for `--progress`.

  // `animate`-metoden i Worklet-en er designet for å bli kalt av nettleserens animasjonsplanlegger.
  // Hvis vi bruker `CSS.registerAnimation`, er det for animasjoner drevet av CSS `@keyframes`.
  // Når vi animerer en egendefinert egenskap, ønsker vi ofte JS-kontroll.

  // La oss vurdere en Worklet som *genererer* interpolasjonsverdier.
  // `animate`-funksjonssignaturen gitt av AnimationWorklet API er:
  // `animate(element, propertyName, currentTime, playbackRate, animationDefinition)`
  // Dette ser ut til å være mer for direkte animering av egenskaper via API-en.

  // La oss justere oss tilbake til målet: å animere en egendefinert CSS-egenskap.
  // Den mest direkte måten Houdini muliggjør dette på, er ved å la egendefinerte egenskaper bli mål for Animation API, og Worklets kan definere egendefinert easing eller animasjonssekvenser.

  // `CSS.registerAnimation` er faktisk riktig API hvis vi vil bruke en navngitt animasjon i CSS som driver egendefinerte egenskaper.
  // La oss forfine `animate`-metoden for å være mer på linje med å generere en verdi for en egendefinert egenskap.

  // `animate(currentTime, playState)` returnerer verdien for en gitt nøkkelramme.
  // Denne metoden er en del av en `AnimationWorklet`-klasse.
  // `CSS.registerAnimation` registrerer en fabrikk for `KeyframeEffect`.

  // La oss anta at `animate`-funksjonen i Worklet-en er designet for å produsere verdier for en egenskap.
  // `CSS.registerAnimation` registrerer en navngitt animasjonssekvens.
  // Når denne sekvensen anvendes på en egendefinert egenskap, vil Worklet-ens logikk bli brukt.

  // Forenklet `animate`-funksjon for en animasjon av en egendefinert egenskap:
  animate(currentTime, playState) {
    if (playState !== 'running') return playState;

    // Antar 1000 ms varighet for dette eksempelet.
    const duration = 1000;
    let progress = currentTime / duration;

    // Begrens fremdriften mellom 0 og 1
    progress = Math.max(0, Math.min(progress, 1));

    // Bruk egendefinert easing (ease-in-out)
    const easedProgress = this.easingFunction(progress);

    // Beregn målverdien (f.eks. 100 for progress)
    const targetValue = this.end;
    const animatedValue = targetValue * easedProgress;

    return animatedValue;
  }
}

// Registrer den egendefinerte animasjonen. Dette registrerer en navngitt animasjonssekvens.
// `params`-argumentet i CSS `animation`-egenskapen kan brukes til å sende verdier som 'end'.
CSS.registerAnimation({
  name: 'animateProgress',
  // Vi kan sende egendefinerte easing-funksjoner her som Worklet-en vil bruke.
  // For enkelhets skyld, la oss bruke en forhåndsdefinert eller sende den som en parameter.
  // Et vanlig mønster er å lage Worklet-fabrikken slik at den aksepterer parametere.
  // `CSS.registerAnimation` tar en `keyframeGenerator` eller en `definition`.
  // For enkelhets skyld, la oss anta at Worklet-klassen håndterer logikken.
  // `CSS.registerAnimation` API-en er mer for integrasjon med CSS `@keyframes`.

  // `AnimationWorklet`-ens primære rolle er å definere egendefinert animasjonslogikk som nettleseren kan utføre.
  // `animate`-metoden er nøkkelen. Den kalles av nettleseren.
  // La oss anta at vi bruker Animation API direkte med en egendefinert effekt.

  // Revurderer bruken av `CSS.registerAnimation`:
  // Den registrerer en animasjon som kan brukes med `animation-name`.
  // For å animere en egendefinert egenskap, må vi fortsatt koble den til.
  // Eksempel: `animation: 1s cubic-bezier(0.42, 0, 0.58, 1) animateProgress;`
  // `animateProgress` må vite hvordan den skal kartlegge dette til `--progress`-egenskapen.

  // En mer direkte Houdini-tilnærming for animasjon av egendefinerte egenskaper involverer ofte Animation API og potensielt egendefinerte effekter.
  // Imidlertid er `AnimationWorklet` designet for å tilby egendefinerte animasjonssekvenser.
  // La oss anta at `animate`-metoden er en del av en egendefinert `KeyframeEffect`-definisjon.

  // `animate`-funksjonen i `AnimationWorklet` er designet for å produsere verdier for en gitt egenskap.
  // Når vi bruker `CSS.registerAnimation`, blir `name` eksponert til CSS.
  // `definition` kan beskrive hvordan animasjonssekvensen skal lages.

  // La oss gi et konkret eksempel på `animate`-funksjonen som kjernelogikken.
  // `CSS.registerAnimation` er ment for å registrere egendefinerte animasjons-*sekvenser* som kan brukes via CSS `animation-name`.

  // La oss bruke en mer direkte tilnærming konseptuelt:
  // `AnimationWorklet` definerer en `resolve`-funksjon eller `animate`-metode.
  // `animate`-metoden tar `currentTime` og `playState` og skal returnere verdien.

  // Forenklet registrering som fokuserer på `animate`-metodens rolle:
  // `animate`-metoden i Worklet-en kalles av nettleseren.
  // La oss anta at Worklet-en lastes via `CSS.animationWorklet.addModule()`.
  // Deretter kan vi i JS lage en Animation-instans.

  // Eksempel på en Worklet som definerer en egendefinert `animate`-funksjon:
  class CustomProgressAnimation {
    constructor(targetValue, duration = 1000, easing = t => t) {
      this.targetValue = targetValue;
      this.duration = duration;
      this.easing = easing;
    }

    animate(currentTime, playState) {
      if (playState !== 'running') {
        return playState; // Returner nåværende tilstand hvis den ikke kjører
      }

      let progress = currentTime / this.duration;
      progress = Math.max(0, Math.min(progress, 1)); // Begrens fremdrift
      const easedProgress = this.easing(progress);
      return this.targetValue * easedProgress;
    }
  }

  // Registrering av dette som en egendefinert animasjonssekvens:
  CSS.registerAnimation({
    name: 'customProgress',
    // Definisjonen kan være en `KeyframeEffect` eller et egendefinert animasjonsobjekt.
    // La oss anta at Worklet-en definerer kjerne-`animate`-logikken.
    // `CSS.registerAnimation` er for å registrere egendefinerte animasjonssekvenser som CSS kan bruke.
    // `animate`-metoden returnerer verdien for en egenskap.
    // Vi må koble dette til en spesifikk egendefinert egenskap.

    // `animate`-metoden til en Worklet kalles av nettleseren for animasjonsrammer.
    // La oss anta at vi vil lage en animasjon som driver `--progress`.

    // `CSS.registerAnimation` registrerer en navngitt animasjon som kan brukes i CSS `animation-name`.
    // Når den brukes med en egendefinert egenskap, må nettleseren vite hvordan den skal anvendes.

    // La oss fokusere på `Animation API` for direkte animasjon av egendefinerte egenskaper.
    // Vi lager en `KeyframeEffect` som retter seg mot `--progress`.
    // `animate`-funksjonen i en Worklet kan definere egendefinert timing eller easing.

    // Forenklet konseptuelt eksempel på en Worklet som kan brukes til å generere animasjonsverdier:
    // `animate`-metoden er nøkkelen.
    // La oss anta at denne worklet-en er lastet og vi lager et Animation-objekt fra den.
    // `CSS.registerAnimation` er mer for integrasjon med CSS `@keyframes`.

    // Fokus på `animate`-metodens signatur og formål:
    // Den tar `currentTime` og `playState` og returnerer den interpolerte verdien.

    // La oss anta at vi har en klasse `ProgressAnimator` med en `animate`-metode.
    // Vi vil registrere denne klassen eller dens instans.

    // Siste forsøk på `CSS.registerAnimation` for klarhet:
    // Dette registrerer en gjenbrukbar animasjonssekvens.
    // `animate`-metoden i den tilknyttede Worklet-en vil bli kalt.
    // `name` er det du bruker i `animation-name`.

    // La oss anta at en Worklet-klasse med navnet `ProgressAnimationWorklet` eksisterer og er lastet.
    // `CSS.registerAnimation` krever en `definition` som nettleseren kan bruke til å lage en animasjon.
    // Denne definisjonen kan referere til en egendefinert `KeyframeEffect` levert av Worklet-en.

    // La oss forenkle og fokusere på kjernefunksjonaliteten: `animate`-metoden som returnerer verdier.
    // Nettleserens animasjonsmotor vil kalle denne metoden.

    // Vi må koble Worklet-en til CSS.
    // `CSS.animationWorklet.addModule()` er måten å laste Worklets på.
    // Etter lasting kan vi bruke `Animation` API.

    // La oss forberede en Worklet som kan lastes.
    // `animate`-metoden er hjertet i Worklet-ens animasjonslogikk.

    // Se på `AnimationWorklet` som en måte å definere egendefinerte `KeyframeEffect`s eller animasjonsfunksjoner.
    // `CSS.registerAnimation` registrerer en navngitt animasjonssekvens som kan brukes i CSS.

    // La oss definere en konseptuell `animate`-metode som nettleseren kaller.
    // Denne `animate`-metoden skal returnere verdien for egenskapen som animeres.

    // `CSS.registerAnimation` API-en er mer for å definere egendefinert `@keyframes`-atferd.
    // For animasjon av egendefinerte egenskaper via JavaScripts Animation API:
    // Vi lager en `KeyframeEffect` som retter seg mot den egendefinerte egenskapen.
    // Worklet-en kan tilby egendefinert easing eller tidslinjeatferd.

    // La oss anta at `animate` er metoden som beregner egenskapsverdien.
    // `CSS.registerAnimation` vil lage en animasjonssekvens fra dette.

    // La oss anta at en `ProgressAnimation`-klasse er definert i `progress-animation.js` med en `animate`-metode.
    // `CSS.registerAnimation` API-en brukes til å registrere en navngitt animasjon.
    // `definition`-parameteren kan være en `KeyframeEffect` eller en fabrikk for den.

    // For å animere egendefinerte egenskaper, brukes ofte Animation API i kombinasjon.
    // Worklet-en definerer den egendefinerte animasjonslogikken.

    // La oss presentere et mer raffinert eksempel på Worklet-skriptet:
  },
  // `params`-argumentet i `CSS.registerAnimation` er ikke standard. Timing og easing kontrolleres vanligvis via CSS `animation`-egenskapen eller Animation API.
  // `animate`-funksjonens signatur er `(currentTime, playState)` og returnerer en verdi.
  // Vi må laste denne Worklet-en og deretter bruke den.
});

// I et separat skript (f.eks. main.js):
/*
  // Last Animation Worklet-modulen
  CSS.animationWorklet.addModule('progress-animation.js')
    .then(() => {
      const progressBarStyle = getComputedStyle(document.querySelector('.progress-bar'));
      const animationDuration = 2000; // ms
      const targetProgress = 80;

      // Definer nøkkelrammene for den egendefinerte egenskapen
      const keyframes = [
        { '--progress': 0 },
        { '--progress': targetProgress }
      ];

      // Definer timingen for animasjonen
      const timing = {
        duration: animationDuration,
        easing: 'ease-in-out',
        fill: 'forwards' // Behold den endelige verdien
      };

      // Lag en KeyframeEffect som retter seg mot elementet
      // Vi må rette oss mot elementet som har --progress-egenskapen satt.
      // La oss anta at den er anvendt på body eller et spesifikt element.
      const progressBarElement = document.querySelector('.progress-bar');

      // Lag en KeyframeEffect for den egendefinerte egenskapen
      // Navnet på den egendefinerte egenskapen er '--progress'.
      const effect = new KeyframeEffect(progressBarElement, keyframes, timing);

      // Lag et Animation-objekt
      // Hvis vi registrerte 'customProgress', kunne vi brukt det her.
      // Eller vi kan bruke standard Animation-konstruktøren som implisitt bruker nettleserens logikk.
      // `animate`-metoden i Worklet-en er det som tilpasser interpolasjonen.

      // For å animere egendefinerte egenskaper, er `Animation` API det primære grensesnittet.
      // Worklet-en gir egendefinert atferd til dette API-et.

      // La oss simulere å lage en animasjon som bruker egendefinert logikk.
      // `CSS.registerAnimation` er for navngitte CSS-animasjoner.
      // For direkte JS-kontroll av egendefinerte egenskaper, lager vi `KeyframeEffect`.
      // Worklet-ens `animate`-metode kalles av nettleseren når `Animation` API brukes.

      // La oss bruke `Animation` API direkte med vår egendefinerte egenskap.
      // Vi lager en `KeyframeEffect` som retter seg mot `--progress`.
      // Nettleseren vil bruke den registrerte Worklet-ens logikk om aktuelt.

      // Eksempel: Direkte animering av `--progress` ved hjelp av Animation API.
      const progressAnimation = new Animation(
        new KeyframeEffect(
          progressBarElement,
          [{ '--progress': 0 }, { '--progress': targetProgress }],
          {
            duration: animationDuration,
            easing: 'ease-in-out',
            fill: 'forwards'
          }
        )
      );

      // Spill av animasjonen
      progressAnimation.play();
    })
    .catch(error => {
      console.error('Kunne ikke laste Animation Worklet:', error);
    });
*/


// Korrigert konseptuelt eksempel som fokuserer på `animate`-metoden i en Worklet,
// som påvirker hvordan nettleseren interpolerer verdier.

// Anta at dette skriptet `progress-animation.js` lastes av `CSS.animationWorklet.addModule()`.

// Dette er et forenklet eksempel på hvordan en Worklet kan definere egendefinert animasjonslogikk.
// `animate`-metoden vil bli kalt av nettleserens animasjonsmotor.
// Returverdien er den interpolerte verdien for egenskapen som animeres.

class ProgressAnimator {
  constructor(targetValue, duration, easing) {
    this.targetValue = targetValue;
    this.duration = duration;
    this.easing = easing;
  }

  animate(currentTime, playState) {
    if (playState !== 'running') {
      return playState;
    }

    let progress = currentTime / this.duration;
    progress = Math.max(0, Math.min(progress, 1)); // Begrens fremdrift
    const easedProgress = this.easing(progress);
    return this.targetValue * easedProgress;
  }
}

// For å gjøre dette brukbart via `CSS.registerAnimation`, ville du vanligvis pakket
// det inn i en struktur som definerer en `KeyframeEffect` eller en egendefinert animasjon.

// For å animere egendefinerte egenskaper, er `Animation` API det primære grensesnittet,
// og Worklets gir egendefinert atferd som `Animation` API kan utnytte.

// La oss demonstrere kjernekonseptet: `animate`-metoden genererer verdier.

// Dette er en konseptuell representasjon av en Worklets kapasitet.
// Den faktiske implementeringen for `CSS.registerAnimation` er mer kompleks,
// og involverer `KeyframeEffect`-definisjoner.

// Den mest direkte måten å animere egendefinerte egenskaper med Houdini er å bruke Animation API,
// og la Worklets påvirke interpolasjonen.

// La oss anta at Worklet-en definerer hvordan man *genererer* verdier for en animasjon.
// `CSS.registerAnimation` er for å navngi disse egendefinerte animasjonssekvensene.

// `animate`-metodens rolle er å beregne verdien ved en gitt `currentTime`.
// `playState` indikerer animasjonens nåværende tilstand.

// En praktisk måte å integrere på er ved å lage en `KeyframeEffect` som retter seg mot den egendefinerte egenskapen.
// Nettleseren bruker da sin animasjonsmotor, som kan utvides av Worklets.

// For å gjøre en Worklet virkelig gjenbrukbar med `CSS.registerAnimation` for egendefinerte egenskaper,
// ville Worklet-en definert en egendefinert `KeyframeEffect`-fabrikk.

// Kjerneprinsippet er imidlertid at Worklets kan tilby egendefinert `animate`-logikk.

// La oss strukturere et mer komplett eksempel på lasting og bruk av en Worklet
// for animasjon av egendefinerte egenskaper.

// --- Konseptuell `progress-animation.js` --- 
// class CustomProgressAnimation {
//   constructor(options) {
//     this.options = options;
//   }
//   animate(currentTime, playState) {
//     if (playState !== 'running') return playState;
//     const { targetValue, duration, easing } = this.options;
//     let progress = currentTime / duration;
//     progress = Math.max(0, Math.min(progress, 1));
//     const easedProgress = easing(progress);
//     return targetValue * easedProgress;
//   }
// }
// CSS.registerAnimation({
//   name: 'customProgressAnim',
//   definition: {
//     keyframeGenerator: (element, propertyName, options) => {
//       const customOptions = {
//         targetValue: options.params.targetValue || 100,
//         duration: options.duration,
//         easing: (() => {
//           // Løs easing-funksjon fra streng eller funksjon
//           if (typeof options.easing === 'function') return options.easing;
//           if (options.easing === 'ease-in-out') return t => t < 0.5 ? 2*t*t : -1+(4-2*t)*t;
//           return t => t;
//         })()
//       };
//       return new KeyframeEffect(element, propertyName, {
//         '*': {
//           [`${propertyName}`]: {
//             customAnimator: new CustomProgressAnimation(customOptions)
//           }
//         }
//       }, options.duration, options.delay, options.endDelay, options.iterations, options.direction, options.fill);
//     }
//   }
// });
// --- Slutt på konseptuell `progress-animation.js` ---

// Konseptet med `keyframeGenerator` ovenfor er litt avansert. `animate`-metoden
// handler mer om å definere interpolasjonslogikken.

// La oss fokusere på Worklets' evne til å påvirke animasjonsinterpolasjonen.
// Når en egendefinert egenskap animeres, må nettleseren vite hvordan den skal interpolere verdien.
// Worklets kan tilby egendefinert interpolasjonslogikk.

// Nøkkelen er at `AnimationWorklet` tillater egendefinerte `animate`-funksjoner.


Rollen til animate-metoden

Hjertet i en Animation Worklet for animering av egendefinerte egenskaper ligger i dens animate-metode. Denne metoden kalles av nettleserens animasjonsmotor for hver animasjonsramme. Den mottar to primære argumenter:

  
currentTime: Den nåværende tiden i animasjonen, vanligvis i millisekunder, relativt til animasjonens start.
  
playState: En streng som indikerer animasjonens nåværende tilstand (f.eks. 'running', 'paused', 'finished').


animate-metoden forventes å returnere den beregnede verdien for egenskapen som animeres på det spesifikke tidspunktet. For egendefinerte egenskaper vil denne verdien bli brukt til å oppdatere egenskapen dynamisk.

Steg 2: Laste inn og anvende Worklet

Når Worklet-scriptet ditt er klart, må du laste det inn i nettleserens animasjonskontekst. Dette gjøres ved hjelp av CSS.animationWorklet.addModule(). Etter at modulen er lastet, kan du bruke nettleserens Animation API til å lage og spille av animasjoner som retter seg mot dine egendefinerte egenskaper. Når nettleseren animerer en egendefinert egenskap, vil den utnytte logikken som er definert i din Worklet.

Her er hvordan du kan laste Worklet-en og anvende en animasjon i din hoved-JavaScript-fil:


// main.js

// Sørg for at nettleseren støtter Houdini Animation Worklets
if ('animationWorklet' in CSS) {
  // Last Worklet-modulen
  CSS.animationWorklet.addModule('/path/to/progress-animation.js') // Pass på at stien er riktig
    .then(() => {
      console.log('Animation Worklet lastet vellykket!');

      const progressBarElement = document.querySelector('.progress-bar');
      const animationDuration = 1500; // millisekunder
      const targetProgress = 75; // Målverdien for --progress

      // Definer nøkkelrammene. Vi retter oss mot den egendefinerte egenskapen '--progress'.
      const keyframes = [
        { '--progress': 0 },
        { '--progress': targetProgress }
      ];

      // Definer timing-parametrene
      const timing = {
        duration: animationDuration,
        easing: 'ease-in-out', // Standard CSS easing eller egendefinert
        fill: 'forwards' // Behold den endelige tilstanden
      };

      // Lag en KeyframeEffect som retter seg mot elementet vårt og den egendefinerte egenskapen
      // Nettleseren vil bruke den registrerte Worklet-ens logikk for å interpolere '--progress'.
      const progressEffect = new KeyframeEffect(progressBarElement, keyframes, timing);

      // Lag et Animation-objekt fra effekten
      const progressAnimation = new Animation(progressEffect);

      // Eventuelt, koble den til et egendefinert animasjonsnavn hvis det er registrert
      // For direkte animasjon av egendefinerte egenskaper brukes ofte Animation API direkte.

      // Spill av animasjonen
      progressAnimation.play();
    })
    .catch(error => {
      console.error('Kunne ikke laste eller registrere Animation Worklet:', error);
      // Fallback eller feilhåndtering for nettlesere som ikke støtter det
    });
} else {
  console.warn('CSS Animation Worklets støttes ikke i denne nettleseren.');
  // Gi en fallback for eldre nettlesere
}


            

              
                Copy