Lås upp dynamiska visuella effekter: Animera anpassade CSS-egenskaper med Houdini Worklets

            
:root {
  --progress: 0;
}

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

.progress-bar {
  width: var(--progress)%; /* Detta animeras inte mjukt med enbart CSS */
}

            

              
                Copy
              
            
          

            
// progress-animation.js

// Definiera en klass som ärver från AnimationWorklet
class ProgressAnimation {
  constructor(delay, end, easing) {
    this.delay = delay;
    this.end = end;
    this.easing = easing;
  }

  // animate-metoden anropas av webbläsaren för varje bildruta
  animate(currentTime, playState) {
    // playState kan vara 'running', 'paused', 'finished', etc.
    if (playState !== 'running') {
      return playState;
    }

    // Beräkna förloppet baserat på tid och easing
    // För enkelhetens skull, låt oss anta en linjär ease för nu
    // I ett verkligt scenario skulle du implementera mer sofistikerade easing-funktioner
    let progress = Math.min(currentTime / 1000, 1); // Antar 1 sekunds varaktighet
    progress = Math.max(0, progress); // Kläm mellan 0 och 1

    // Tillämpa easing (exempel: ease-in-out)
    progress = this.easing(progress);

    // Beräkna det faktiska värdet baserat på slutvärdet
    const currentValue = this.end * progress;

    // Returnera det aktuella värdet för den anpassade egenskapen
    return currentValue;
  }
}

// Registrera den anpassade animeringen
CSS.registerAnimation({
  name: 'animateProgress',
  // Vi använder en anpassad easing-funktion, till exempel:
  // Detta är en förenklad version av en ease-in-out-funktion
  easingFunction: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
  // Definiera animeringens varaktighet. I ett verkligt scenario skulle detta vara dynamiskt.
  // För detta exempel hårdkodar vi det för enkelhetens skull, men det skulle kunna skickas som en parameter.
  // Låt oss anta att vår animerings-worklets animate-metod är utformad för att köras i 1 sekund.
  // `end`-värdet kommer att anges när animeringen tillämpas.
  // Den faktiska varaktigheten hanteras av Workletens `animate`-metod.
  // Denna `duration` i `registerAnimation` är mer för CSS @keyframes.
  // För direkt Worklet-animering av anpassade egenskaper styr `animate`-metoden timingen.
  // Men för att integrera med CSS `animation`-egenskapen behövs ett varaktighetskoncept.
  // Låt oss betrakta att `animate`-metoden hanterar timing, och vi fokuserar på det.
  // Om vi vill använda detta med CSS `animation`-egenskapen som `animation: 1s ease-in-out my-animation;`,
  // skulle vi behöva exponera varaktighet och easing till CSS också.
  // För direkt CSS-animering av anpassade egenskaper kan vi använda ett annat API eller tillvägagångssätt.
  // Låt oss förfina detta för att direkt animera ett anpassat egenskapsvärde över tid.
  // `CSS.paintWorklet.addModule` eller `CSS.animationWorklet.addModule` används för att ladda worklets.
  // För att animera anpassade egenskaper använder vi vanligtvis `animate()`-metoden på ett Animation-objekt.

  // Låt oss ompröva strukturen för att anpassa den till animering av anpassade egenskaper.
  // `AnimationWorklet` används för att skapa anpassade `KeyframeEffect`-instanser.
  // När vi tillämpar en animering på en anpassad egenskap skapar vi i huvudsak en sekvens av värden.
  // Workletens `animate`-metod är ansvarig för att generera dessa värden.

  // Ett mer direkt sätt att uppnå animering av anpassade egenskaper med Houdini är genom Animation API.
  // Vi kan definiera en anpassad animeringsklass som producerar värden för en anpassad egenskap.

  // Låt oss förenkla för tydlighetens skull och fokusera på kärnkonceptet: att driva värden för anpassade egenskaper.
  // Vi använder en enkel anpassad easing och en implicit varaktighet som hanteras av webbläsarens animeringsschemaläggare när den är länkad till CSS.
  // `animate`-metoden i ett `CSSAnimation`-objekt (som vi skulle skapa från en Worklet) skulle ta emot tid.
  // För enkelhetens skull, låt oss överväga ett enklare tillvägagångssätt för demonstration som fokuserar på `animate`-metoden.

  // Omtanke kring registreringen för animering av anpassade egenskaper. `CSS.registerAnimation` är för CSS @keyframes.
  // För att direkt animera anpassade egenskaper använder vi ofta Animation API.
  // Men Worklets kan definiera anpassade animeringstyper. Egenskapen `animation-timeline` är också relevant.

  // Låt oss anta ett scenario där vi vill driva en anpassad egenskap med webbläsarens animeringstidslinje.
  // `animate`-metoden i en Worklet är verkligen platsen att definiera hur värden förändras över tid.

  // Låt oss prova ett mer konkret tillvägagångssätt med Animation API som direkt driver den anpassade egenskapen.
  // `animation-worklet.js`-metoden är vanligtvis för att registrera anpassade animeringar för CSS `animation`-egenskapen.
  // För att animera anpassade egenskaper använder vi ofta JavaScripts Animation API.

  // Den första tanken kan vara att registrera en anpassad animering som ska användas med `animation-name`.
  // Men för anpassade egenskaper vill vi ofta direkt kontrollera deras värden.
  // Houdini tillhandahåller Animation API för detta:
  // const anim = new Animation(effect, timing); anim.play();
  // `effect` kan vara en `KeyframeEffect` som riktar sig mot en anpassad egenskap.

  // Låt oss fokusera på konceptet med en anpassad animeringstidslinje eller sekvens.
  // `AnimationWorklet` är utformad för att tillhandahålla anpassade `KeyframeEffect`-definitioner eller anpassad animeringslogik.
  // Tänk på detta exempel som att skapa en anpassad animeringssekvens som kan tillämpas.

  // `CSS.registerAnimation` är verkligen för anpassade nyckelbildrutebaserade animeringar som kan tillämpas via `animation-name`.
  // När vi använder en anpassad egenskap som `--progress` vill vi att dess värde ska interpoleras.
  // `animate`-metoden i Workleten ska returnera värdet för egenskapen.

  // Låt oss skapa en enkel Worklet som kan användas för att driva en anpassad egenskap.
  // Kärnidéen är `animate`-funktionens signatur: `animate(currentTime, playState)`.

  // Korrekt tillvägagångssätt för att registrera en anpassad animeringssekvens:
  // `animate`-metoden måste vara en del av en struktur som Animation API förstår.
  // Ett vanligt mönster är att skapa ett objekt som Animation API kan konsumera.

  // Låt oss anta att `CSS.animationWorklet.addModule()` används för att ladda detta.
  // `animate`-metoden i sig är det som kommer att generera de interpolerade värdena.

  // För att animera anpassade egenskaper är `Animation`-API:et nyckeln. Låt oss illustrera hur en anpassad animerings*generator* kan fungera.
  // `CSS.registerAnimation` är för animeringar på CSS-nivå.
  // För JavaScript-driven animering av anpassade egenskaper är `Animation`-API:et mer direkt.

  // Låt oss gå över till ett tydligare exempel som fokuserar på Animation API.
  // Vi simulerar en anpassad animeringslogik som genererar värden för `--progress`.

  // `animate`-metoden inom Workleten är utformad för att anropas av webbläsarens animeringsschemaläggare.
  // Om vi använder `CSS.registerAnimation`, är det för `@keyframes`-drivna animeringar i CSS.
  // När vi animerar en anpassad egenskap vill vi ofta ha JS-kontroll.

  // Låt oss överväga en Worklet som *genererar* interpoleringsvärden.
  // `animate`-funktionens signatur som tillhandahålls av AnimationWorklet API är:
  // `animate(element, propertyName, currentTime, playbackRate, animationDefinition)`
  // Detta verkar vara mer för att direkt animera egenskaper via API:et.

  // Låt oss återgå till målet: animera en anpassad CSS-egenskap.
  // Det mest direkta sättet Houdini möjliggör detta är genom att tillåta anpassade egenskaper att riktas av Animation API, och Worklets kan definiera anpassad easing eller animeringssekvenser.

  // `CSS.registerAnimation` är verkligen rätt API om vi vill använda en namngiven animering i CSS som driver anpassade egenskaper.
  // Låt oss förfina `animate`-metoden för att vara mer i linje med att generera ett värde för en anpassad egenskap.

  // `animate(currentTime, playState)` returnerar värdet för en given nyckelbildruta.
  // Denna metod är en del av en `AnimationWorklet`-klass.
  // `CSS.registerAnimation` registrerar en fabrik för `KeyframeEffect`.

  // Låt oss anta att `animate`-funktionen inom Workleten är utformad för att producera värden för en egenskap.
  // `CSS.registerAnimation` registrerar en namngiven animeringssekvens.
  // När denna sekvens tillämpas på en anpassad egenskap kommer Workletens logik att användas.

  // Förenklad `animate`-funktion för en animering av anpassad egenskap:
  animate(currentTime, playState) {
    if (playState !== 'running') return playState;

    // Antar en varaktighet på 1000 ms för detta exempel.
    const duration = 1000;
    let progress = currentTime / duration;

    // Kläm förloppet mellan 0 och 1
    progress = Math.max(0, Math.min(progress, 1));

    // Tillämpa anpassad easing (ease-in-out)
    const easedProgress = this.easingFunction(progress);

    // Beräkna målvärdet (t.ex. 100 för förlopp)
    const targetValue = this.end;
    const animatedValue = targetValue * easedProgress;

    return animatedValue;
  }
}

// Registrera den anpassade animeringen. Detta registrerar en namngiven animeringssekvens.
// `params` i CSS `animation`-egenskapen kan användas för att skicka värden som 'end'.
CSS.registerAnimation({
  name: 'animateProgress',
  // Vi kan skicka anpassade easing-funktioner här som Workleten kommer att använda.
  // För enkelhetens skull, låt oss använda en fördefinierad eller skicka den som en parameter.
  // Ett vanligt mönster är att göra Worklet-fabriken kapabel att ta emot parametrar.
  // `CSS.registerAnimation` tar en `keyframeGenerator` eller en `definition`.
  // För enkelhetens skull, låt oss anta att Worklet-klassen hanterar logiken.
  // `CSS.registerAnimation`-API:et är mer för integration med CSS `@keyframes`.

  // `AnimationWorklet`s primära roll är att definiera anpassad animeringslogik som webbläsaren kan exekvera.
  // `animate`-metoden är nyckeln. Den anropas av webbläsaren.
  // Låt oss anta att vi använder Animation API direkt med en anpassad effekt.

  // Omvärdering av `CSS.registerAnimation`-användningen:
  // Den registrerar en animering som kan användas med `animation-name`.
  // För att animera en anpassad egenskap skulle vi fortfarande behöva länka den.
  // Exempel: `animation: 1s cubic-bezier(0.42, 0, 0.58, 1) animateProgress;`
  // `animateProgress` måste veta hur man mappar detta till `--progress`-egenskapen.

  // Ett mer direkt Houdini-tillvägagångssätt för animering av anpassade egenskaper involverar ofta Animation API och potentiellt anpassade effekter.
  // Men `AnimationWorklet` är verkligen utformad för att tillhandahålla anpassade animeringssekvenser.
  // Låt oss anta att `animate`-metoden är en del av en anpassad `KeyframeEffect`-definition.

  // `animate`-funktionen i `AnimationWorklet` är utformad för att producera värden för en given egenskap.
  // När man använder `CSS.registerAnimation` exponeras `name` för CSS.
  // `definition` kan beskriva hur man skapar animeringssekvensen.

  // Låt oss ge ett konkret exempel på `animate`-funktionen som kärnlogik.
  // `CSS.registerAnimation` är avsett för att registrera anpassade animerings*sekvenser* som kan tillämpas via CSS `animation-name`.

  // Låt oss använda ett mer direkt tillvägagångssätt konceptuellt:
  // `AnimationWorklet` definierar en `resolve`-funktion eller `animate`-metod.
  // `animate`-metoden tar `currentTime` och `playState` och ska returnera värdet.

  // Förenklad registrering som fokuserar på `animate`-metodens roll:
  // `animate`-metoden inom Workleten anropas av webbläsaren.
  // Låt oss anta att Workleten laddas via `CSS.animationWorklet.addModule()`.
  // Då kan vi i JS skapa en Animation-instans.

  // Exempel på en Worklet som definierar en anpassad `animate`-funktion:
  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; // Returnera nuvarande tillstånd om den inte körs
      }

      let progress = currentTime / this.duration;
      progress = Math.max(0, Math.min(progress, 1)); // Kläm förloppet
      const easedProgress = this.easing(progress);
      return this.targetValue * easedProgress;
    }
  }

  // Registrera detta som en anpassad animeringssekvens:
  CSS.registerAnimation({
    name: 'customProgress',
    // Definitionen kan vara en `KeyframeEffect` eller ett anpassat animeringsobjekt.
    // Låt oss anta att Workleten definierar kärnlogiken för `animate`.
    // `CSS.registerAnimation` är för att registrera anpassade animeringssekvenser som CSS kan använda.
    // `animate`-metoden returnerar värdet för en egenskap.
    // Vi behöver länka detta till en specifik anpassad egenskap.

    // `animate`-metoden i en Worklet anropas av webbläsaren för animeringsbildrutor.
    // Låt oss anta att vi vill skapa en animering som driver `--progress`.

    // `CSS.registerAnimation` registrerar en namngiven animering som kan användas i CSS `animation-name`.
    // När den används med en anpassad egenskap måste webbläsaren veta hur den ska tillämpas.

    // Låt oss fokusera på `Animation API` för direkt animering av anpassade egenskaper.
    // Vi skapar en `KeyframeEffect` som riktar sig mot `--progress`.
    // `animate`-funktionen inom en Worklet kan definiera anpassad timing eller easing.

    // Förenklat konceptuellt exempel på en Worklet som kan användas för att generera animeringsvärden:
    // `animate`-metoden är nyckeln.
    // Låt oss anta att denna worklet laddas och vi skapar ett Animation-objekt från den.
    // `CSS.registerAnimation` är mer för integration med CSS `@keyframes`.

    // Fokus på `animate`-metodens signatur och syfte:
    // Den tar `currentTime` och `playState` och returnerar det interpolerade värdet.

    // Låt oss anta att vi har en klass `ProgressAnimator` med en `animate`-metod.
    // Vi skulle registrera denna klass eller dess instans.

    // Sista försöket till `CSS.registerAnimation` för tydlighetens skull:
    // Detta registrerar en återanvändbar animeringssekvens.
    // `animate`-metoden i den associerade Workleten kommer att anropas.
    // `name` är vad du använder i `animation-name`.

    // Låt oss anta att en Worklet-klass med namnet `ProgressAnimationWorklet` finns och är laddad.
    // `CSS.registerAnimation` kräver en `definition` som webbläsaren kan använda för att skapa en animering.
    // Denna definition kan referera till en anpassad `KeyframeEffect` som tillhandahålls av Workleten.

    // Låt oss förenkla och fokusera på kärnfunktionaliteten: `animate`-metoden som returnerar värden.
    // Webbläsarens animeringsmotor kommer att anropa denna metod.

    // Vi måste länka Workleten till CSS.
    // `CSS.animationWorklet.addModule()` är sättet att ladda Worklets.
    // Efter laddning kan vi använda `Animation` API.

    // Låt oss förbereda en Worklet som kan laddas.
    // `animate`-metoden är hjärtat i Workletens animeringslogik.

    // Betrakta `AnimationWorklet` som att den tillhandahåller ett sätt att definiera anpassade `KeyframeEffect`s eller animeringsfunktioner.
    // `CSS.registerAnimation` registrerar en namngiven animeringssekvens som kan användas i CSS.

    // Låt oss definiera en konceptuell `animate`-metod som webbläsaren anropar.
    // Denna `animate`-metod ska returnera värdet för den egenskap som animeras.

    // `CSS.registerAnimation` API är mer för att definiera anpassat `@keyframes`-beteende.
    // För animering av anpassade egenskaper via JavaScripts Animation API:
    // Vi skapar en `KeyframeEffect` som riktar sig mot den anpassade egenskapen.
    // Workleten kan tillhandahålla anpassad easing eller tidslinjebeteende.

    // Låt oss anta att `animate` är metoden som beräknar egenskapsvärdet.
    // `CSS.registerAnimation` kommer att skapa en animeringssekvens från detta.

    // Låt oss anta att en `ProgressAnimation`-klass är definierad i `progress-animation.js` med en `animate`-metod.
    // `CSS.registerAnimation` API används för att registrera en namngiven animering.
    // `definition`-parametern kan vara en `KeyframeEffect` eller en fabrik för den.

    // För att animera anpassade egenskaper används ofta Animation API i kombination.
    // Workleten definierar den anpassade animeringslogiken.

    // Låt oss presentera ett förfinat exempel på Worklet-skriptet:
  },
  // `params`-argumentet i `CSS.registerAnimation` är inte standard. Timing och easing styrs vanligtvis via CSS `animation`-egenskapen eller Animation API.
  // `animate`-funktionens signatur är `(currentTime, playState)` och returnerar ett värde.
  // Vi måste ladda denna Worklet och sedan använda den.
});

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

      // Definiera nyckelbildrutorna för den anpassade egenskapen
      const keyframes = [
        { '--progress': 0 },
        { '--progress': targetProgress }
      ];

      // Definiera animeringens timing
      const timing = {
        duration: animationDuration,
        easing: 'ease-in-out',
        fill: 'forwards' // Behåll slutvärdet
      };

      // Skapa en KeyframeEffect som riktar sig mot elementet
      // Vi måste rikta in oss på elementet som har --progress-egenskapen inställd.
      // Låt oss anta att den tillämpas på body eller ett specifikt element.
      const progressBarElement = document.querySelector('.progress-bar');

      // Skapa en KeyframeEffect för den anpassade egenskapen
      // Namnet på den anpassade egenskapen är '--progress'.
      const effect = new KeyframeEffect(progressBarElement, keyframes, timing);

      // Skapa ett Animation-objekt
      // Om vi hade registrerat 'customProgress' kunde vi ha använt det här.
      // Eller så kan vi använda standard Animation-konstruktorn som implicit använder webbläsarens logik.
      // `animate`-metoden i Workleten är det som anpassar interpoleringen.

      // För att animera anpassade egenskaper är `Animation`-API:et det primära gränssnittet.
      // Workleten tillhandahåller anpassat beteende till detta API.

      // Låt oss simulera skapandet av en animering som använder anpassad logik.
      // `CSS.registerAnimation` är för namngivna CSS-animeringar.
      // För direkt JS-kontroll av anpassade egenskaper skapar vi `KeyframeEffect`.
      // Workletens `animate`-metod anropas av webbläsaren när `Animation`-API:et används.

      // Låt oss använda `Animation`-API:et direkt med vår anpassade egenskap.
      // Vi skapar en `KeyframeEffect` som riktar sig mot `--progress`.
      // Webbläsaren kommer att använda den registrerade Workletens logik om tillämpligt.

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

      // Spela upp animeringen
      progressAnimation.play();
    })
    .catch(error => {
      console.error('Misslyckades med att ladda Animation Worklet:', error);
    });
*/


// Korrigerat konceptuellt exempel som fokuserar på `animate`-metoden inom en Worklet,
// vilket påverkar hur webbläsaren interpolerar värden.

// Anta att detta skript `progress-animation.js` laddas av `CSS.animationWorklet.addModule()`.

// Detta är ett förenklat exempel på hur en Worklet kan definiera anpassad animeringslogik.
// `animate`-metoden kommer att anropas av webbläsarens animeringsmotor.
// Returvärdet är det interpolerade värdet för den egenskap som animeras.

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)); // Kläm förloppet
    const easedProgress = this.easing(progress);
    return this.targetValue * easedProgress;
  }
}

// För att göra detta användbart via `CSS.registerAnimation`, skulle du vanligtvis linda
// in det i en struktur som definierar en `KeyframeEffect` eller en anpassad animering.

// För att animera anpassade egenskaper är `Animation`-API:et det primära gränssnittet,
// och Worklets tillhandahåller anpassat beteende som `Animation`-API:et kan utnyttja.

// Låt oss demonstrera kärnkonceptet: `animate`-metoden genererar värden.

// Detta är en konceptuell representation av en Worklets kapacitet.
// Den faktiska implementeringen för `CSS.registerAnimation` är mer komplex,
// och involverar `KeyframeEffect`-definitioner.

// Det mest direkta sättet att animera anpassade egenskaper med Houdini är att använda Animation API,
// och låta Worklets påverka interpoleringen.

// Låt oss anta att Workleten definierar hur man *genererar* värden för en animering.
// `CSS.registerAnimation` är för att namnge dessa anpassade animeringssekvenser.

// `animate`-metodens roll är att beräkna värdet vid en given `currentTime`.
// `playState` indikerar animeringens nuvarande tillstånd.

// Ett praktiskt sätt att integrera är genom att skapa en `KeyframeEffect` som riktar sig mot den anpassade egenskapen.
// Webbläsaren använder sedan sin animeringsmotor, som kan utökas av Worklets.

// För att göra en Worklet verkligt återanvändbar med `CSS.registerAnimation` för anpassade egenskaper,
// skulle Workleten definiera en anpassad `KeyframeEffect`-fabrik.

// Men kärnprincipen är att Worklets kan tillhandahålla anpassad `animate`-logik.

// Låt oss strukturera ett mer komplett exempel på att ladda och använda en Worklet
// för animering av anpassade egenskaper.

// --- Konceptuell `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-funktionen från sträng eller funktion
//           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);
//     }
//   }
// });
// --- Slut på konceptuell `progress-animation.js` ---

// Ovanstående `keyframeGenerator`-koncept är lite avancerat. `animate`-metoden
// handlar mer om att definiera interpoleringslogiken.

// Låt oss fokusera på Worklets förmåga att påverka animeringsinterpoleringen.
// När en anpassad egenskap animeras måste webbläsaren veta hur den ska interpolera dess värde.
// Worklets kan tillhandahålla anpassad interpoleringslogik.

// Nyckeln är att `AnimationWorklet` tillåter anpassade `animate`-funktioner.


Rollen för `animate`-metoden

Hjärtat i en Animation Worklet för animering av anpassade egenskaper ligger i dess animate-metod. Denna metod anropas av webbläsarens animeringsmotor för varje animeringsbildruta. Den tar emot två primära argument:

  
currentTime: Den aktuella tiden för animeringen, vanligtvis i millisekunder, i förhållande till animeringens start.
  
playState: En sträng som indikerar animeringens aktuella tillstånd (t.ex. 'running', 'paused', 'finished').


animate-metoden förväntas returnera det beräknade värdet för den egenskap som animeras vid den specifika tidpunkten. För anpassade egenskaper kommer detta värde att användas för att uppdatera egenskapen dynamiskt.

Steg 2: Ladda och tillämpa Workleten

När ditt Worklet-skript är klart måste du ladda in det i webbläsarens animeringskontext. Detta görs med CSS.animationWorklet.addModule(). När modulen har laddats kan du använda webbläsarens Animation API för att skapa och spela upp animeringar som riktar sig mot dina anpassade egenskaper. När webbläsaren animerar en anpassad egenskap kommer den att utnyttja logiken som definierats i din Worklet.

Så här kan du ladda Workleten och tillämpa en animering i din huvudsakliga JavaScript-fil:


// main.js

// Säkerställ att webbläsaren stöder Houdini Animation Worklets
if ('animationWorklet' in CSS) {
  // Ladda Worklet-modulen
  CSS.animationWorklet.addModule('/path/to/progress-animation.js') // Se till att sökvägen är korrekt
    .then(() => {
      console.log('Animation Worklet har laddats framgångsrikt!');

      const progressBarElement = document.querySelector('.progress-bar');
      const animationDuration = 1500; // millisekunder
      const targetProgress = 75; // Målvärdet för --progress

      // Definiera nyckelbildrutorna. Vi riktar in oss på den anpassade egenskapen '--progress'.
      const keyframes = [
        { '--progress': 0 },
        { '--progress': targetProgress }
      ];

      // Definiera tidsparametrarna
      const timing = {
        duration: animationDuration,
        easing: 'ease-in-out', // Standard CSS-easing eller anpassad
        fill: 'forwards' // Behåll sluttillståndet
      };

      // Skapa en KeyframeEffect som riktar sig mot vårt element och den anpassade egenskapen
      // Webbläsaren kommer att använda den registrerade Workletens logik för att interpolera '--progress'.
      const progressEffect = new KeyframeEffect(progressBarElement, keyframes, timing);

      // Skapa ett Animation-objekt från effekten
      const progressAnimation = new Animation(progressEffect);

      // Valfritt, länka den till ett anpassat animeringsnamn om det är registrerat
      // För direkt animering av anpassade egenskaper används ofta Animation API direkt.

      // Spela upp animeringen
      progressAnimation.play();
    })
    .catch(error => {
      console.error('Misslyckades med att ladda eller registrera Animation Worklet:', error);
      // Reservlösning eller felhantering för webbläsare som inte stöder det
    });
} else {
  console.warn('CSS Animation Worklets stöds inte i denna webbläsare.');
  // Tillhandahåll en reservlösning för äldre webbläsare
}


            

              
                Copy