Dünaamiliste visuaalide avamine: kohandatud CSS-i atribuutide animeerimine Houdini Workletitega

            
:root {
  --progress: 0;
}

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

.progress-bar {
  width: var(--progress)%; /* See ei animeeru CSS-is iseseisvalt sujuvalt */
}

            

              
                Copy
              
            
          

            
// progress-animation.js

// Määratlege klass, mis laiendab AnimationWorklet'i
class ProgressAnimation {
  constructor(delay, end, easing) {
    this.delay = delay;
    this.end = end;
    this.easing = easing;
  }

  // Brauser kutsub 'animate' meetodi välja iga kaadri jaoks
  animate(currentTime, playState) {
    // playState võib olla 'running', 'paused', 'finished' jne.
    if (playState !== 'running') {
      return playState;
    }

    // Arvutage edenemine aja ja leevenduse põhjal
    // Lihtsuse huvides eeldame praegu lineaarset leevendust
    // Tõelises stsenaariumis rakendaksite keerukamaid leevendusfunktsioone
    let progress = Math.min(currentTime / 1000, 1); // Eeldades 1-sekundilist kestust
    progress = Math.max(0, progress); // Piirake 0 ja 1 vahele

    // Rakendage leevendust (näide: ease-in-out)
    progress = this.easing(progress);

    // Arvutage tegelik väärtus lõppväärtuse põhjal
    const currentValue = this.end * progress;

    // Tagastage praegune väärtus kohandatud atribuudi jaoks
    return currentValue;
  }
}

// Registreerige kohandatud animatsioon
CSS.registerAnimation({
  name: 'animateProgress',
  // Kasutame kohandatud leevendusfunktsiooni, näiteks:
  // See on lihtsustatud versioon ease-in-out funktsioonist
  easingFunction: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
  // Määratlege animatsiooni kestus. Tõelises stsenaariumis oleks see dünaamiline.
  // Selles näites kodeerime selle lihtsuse huvides, kuid seda saaks edastada parameetrina.
  // Eeldame, et meie animatsiooni workleti 'animate' meetod on mõeldud kestma 1 sekund.
  // `end` väärtus antakse animatsiooni rakendamisel.
  // Tegelikku kestust haldab Workleti `animate` meetod.
  // See `duration` `registerAnimation`-is on rohkem CSS @keyframes'i jaoks.
  // Kohandatud atribuutide otse Workletiga animeerimiseks kontrollib ajastust `animate` meetod.
  // Siiski, et integreerida CSS `animation` atribuudiga, on vaja mingit kestuse kontseptsiooni.
  // Oletame, et `animate` meetod haldab ajastust ja keskendume sellele.
  // Kui tahame seda kasutada CSS `animation` atribuudiga nagu `animation: 1s ease-in-out my-animation;`,
  // peaksime kestuse ja leevenduse ka CSS-ile kättesaadavaks tegema.
  // Otse CSS-i kohandatud atribuudi animeerimiseks võiksime kasutada teist API-d või lähenemist.
  // Vaatame selle üle, et animeerida kohandatud atribuudi väärtust otse aja jooksul.
  // `CSS.paintWorklet.addModule` või `CSS.animationWorklet.addModule` kasutatakse workletite laadimiseks.
  // Kohandatud atribuutide animeerimiseks kasutame tavaliselt Animation-objekti `animate()` meetodit.

  // Mõtleme struktuuri ümber, et see vastaks kohandatud atribuutide animeerimisele.
  // `AnimationWorklet`'i kasutatakse kohandatud `KeyframeEffect` eksemplaride loomiseks.
  // Kui rakendame animatsiooni kohandatud atribuudile, loome sisuliselt väärtuste jada.
  // Workleti `animate` meetod vastutab nende väärtuste genereerimise eest.

  // Otsesem viis kohandatud atribuutide animeerimiseks Houdini abil on Animation API kaudu.
  // Saame määratleda kohandatud animatsiooniklassi, mis toodab väärtusi kohandatud atribuudile.

  // Selguse huvides lihtsustame ja keskendume põhikontseptsioonile: kohandatud atribuudi väärtuste juhtimine.
  // Kasutame lihtsat kohandatud leevendust ja CSS-iga seotud brauseri animatsiooniajakava poolt käsitletavat kaudset kestust.
  // `animate` meetod `CSSAnimation` objektis (mille me loome Workletist) saaks aja.
  // Lihtsuse huvides kaalume demonstreerimiseks lihtsamat lähenemist, mis keskendub `animate` meetodile.

  // `CSS.registerAnimation` uuesti läbimõtlemine kohandatud atribuutide animeerimiseks. See on CSS @keyframes'i jaoks.
  // Kohandatud atribuutide otse animeerimiseks kasutame sageli Animation API-d.
  // Siiski saavad Workletid määratleda kohandatud animatsioonitüüpe. `animation-timeline` atribuut on samuti asjakohane.

  // Eeldame stsenaariumi, kus tahame juhtida kohandatud atribuuti brauseri animatsiooniajakava abil.
  // `animate` meetod Workletis on tõepoolest koht, kus määratleda, kuidas väärtused aja jooksul muutuvad.

  // Proovime konkreetsemat lähenemist Animation API-ga, mis juhib otse kohandatud atribuuti.
  // `animation-worklet.js` lähenemist kasutatakse tavaliselt kohandatud animatsioonide registreerimiseks CSS `animation` atribuudi jaoks.
  // Kohandatud atribuutide animeerimiseks kasutame sageli JavaScripti Animation API-d.

  // Esialgne mõte võiks olla registreerida kohandatud animatsioon, mida kasutada koos `animation-name`'iga.
  // Kuid kohandatud atribuutide puhul tahame sageli nende väärtusi otse kontrollida.
  // Houdini pakub selleks Animation API-d: `const anim = new Animation(effect, timing); anim.play();`
  // `effect` võib olla `KeyframeEffect`, mis sihib kohandatud atribuuti.

  // Keskendume kohandatud animatsiooniajakava või -jada kontseptsioonile.
  // `AnimationWorklet` on loodud pakkuma kohandatud `KeyframeEffect` definitsioone või kohandatud animatsiooniloogikat.
  // Kaaluge, et see näide räägib kohandatud animatsioonijada loomisest, mida saab rakendada.

  // `CSS.registerAnimation` on tõepoolest mõeldud kohandatud võtmekaadripõhiste animatsioonide jaoks, mida saab rakendada `animation-name` kaudu.
  // Kasutades kohandatud atribuuti nagu `--progress`, tahaksime, et selle väärtus oleks interpoleeritud.
  // Workleti `animate` meetod peaks tagastama atribuudi väärtuse.

  // Loome lihtsa Workleti, mida saab kasutada kohandatud atribuudi juhtimiseks.
  // Põhiidee on `animate` funktsiooni signatuur: `animate(currentTime, playState)`.

  // Kohandatud animatsioonijada registreerimise korrektne lähenemine:
  // `animate` meetod peab olema osa struktuurist, mida Animation API mõistab.
  // Levinud muster on luua objekt, mida Animation API saab tarbida.

  // Eeldame, et see laaditakse `CSS.animationWorklet.addModule()` abil.
  // `animate` meetod ise genereerib interpoleeritud väärtused.

  // Kohandatud atribuutide animeerimiseks on `Animation` API võtmetähtsusega. Illustreerime, kuidas kohandatud animatsiooni *generaator* võiks töötada.
  // `CSS.registerAnimation` on CSS-taseme animatsioonide jaoks.
  // JavaScripti abil juhitava kohandatud atribuutide animatsiooni jaoks on `Animation` API otsesem.

  // Pöördume selgema näite juurde, mis keskendub Animation API-le.
  // Simuleerime kohandatud animatsiooniloogikat, mis genereerib väärtusi `--progress` jaoks.

  // Workleti `animate` meetod on loodud brauseri animatsiooniajakava poolt väljakutsumiseks.
  // Kui kasutame `CSS.registerAnimation`, on see CSS `@keyframes`-põhiste animatsioonide jaoks.
  // Kohandatud atribuudi animeerimisel tahame sageli JS-kontrolli.

  // Kaalume Workletit, mis *genereerib* interpoleerimisväärtusi.
  // AnimationWorklet API pakutav `animate` funktsiooni signatuur on: `animate(element, propertyName, currentTime, playbackRate, animationDefinition)`
  // See tundub olevat rohkem omaduste otse API kaudu animeerimiseks.

  // Joondume uuesti eesmärgiga: kohandatud CSS-i atribuudi animeerimine.
  // Kõige otsem viis, kuidas Houdini seda võimaldab, on lubada kohandatud atribuutidel olla Animation API sihtmärgiks ja Workletid saavad määratleda kohandatud leevenduse või animatsioonijadasid.

  // `CSS.registerAnimation` on tõepoolest õige API, kui tahame kasutada CSS-is nimega animatsiooni, mis juhib kohandatud atribuute.
  // Täpsustame `animate` meetodit, et see oleks rohkem kooskõlas kohandatud atribuudi väärtuse genereerimisega.

  // `animate(currentTime, playState)` tagastab antud võtmekaadri väärtuse.
  // See meetod on osa `AnimationWorklet` klassist.
  // `CSS.registerAnimation` registreerib `KeyframeEffect` tehase.

  // Eeldame, et Workleti `animate` funktsioon on loodud atribuudi väärtuste tootmiseks.
  // `CSS.registerAnimation` registreerib nimega animatsioonijada.
  // Kui seda jada rakendatakse kohandatud atribuudile, kasutatakse Workleti loogikat.

  // Lihtsustatud `animate` funktsioon kohandatud atribuudi animatsiooni jaoks:
  animate(currentTime, playState) {
    if (playState !== 'running') return playState;

    // Eeldades selle näite jaoks 1000ms kestust.
    const duration = 1000;
    let progress = currentTime / duration;

    // Piirake edenemist 0 ja 1 vahele
    progress = Math.max(0, Math.min(progress, 1));

    // Rakendage kohandatud leevendust (ease-in-out)
    const easedProgress = this.easingFunction(progress);

    // Arvutage sihtväärtus (nt 100 edenemise jaoks)
    const targetValue = this.end;
    const animatedValue = targetValue * easedProgress;

    return animatedValue;
  }
}

// Registreerige kohandatud animatsioon. See registreerib nimega animatsioonijada.
// CSS `animation` atribuudi `params` argumenti saab kasutada väärtuste, nagu 'end', edastamiseks.
CSS.registerAnimation({
  name: 'animateProgress',
  // Siin saame edastada kohandatud leevendusfunktsioone, mida Worklet kasutab.
  // Lihtsuse huvides kasutame eelmääratletud funktsiooni või edastame selle parameetrina.
  // Levinud muster on muuta Workleti tehas parameetreid aktsepteerivaks.
  // `CSS.registerAnimation` võtab vastu `keyframeGenerator` või `definition`.
  // Lihtsuse huvides eeldame, et Workleti klass haldab loogikat.
  // `CSS.registerAnimation` API on rohkem CSS `@keyframes` integratsiooni jaoks.

  // `AnimationWorklet`'i peamine roll on määratleda kohandatud animatsiooniloogika, mida brauser saab täita.
  // `animate` meetod on võtmetähtsusega. Brauser kutsub seda välja.
  // Eeldame, et kasutame Animation API-d otse kohandatud efektiga.

  // `CSS.registerAnimation` kasutuse ümberhindamine:
  // See registreerib animatsiooni, mida saab kasutada koos `animation-name`'iga.
  // Kohandatud atribuudi animeerimiseks peame selle ikkagi siduma.
  // Näide: `animation: 1s cubic-bezier(0.42, 0, 0.58, 1) animateProgress;`
  // `animateProgress` peab teadma, kuidas seda `--progress` atribuudiga kaardistada.

  // Otsesem Houdini lähenemine kohandatud atribuutide animeerimiseks hõlmab sageli Animation API-d ja potentsiaalselt kohandatud efekte.
  // Siiski on `AnimationWorklet` tõepoolest loodud pakkuma kohandatud animatsioonijadasid.
  // Eeldame, et `animate` meetod on osa kohandatud `KeyframeEffect` definitsioonist.

  // `animate` funktsioon `AnimationWorklet`'is on loodud antud atribuudi väärtuste tootmiseks.
  // Kasutades `CSS.registerAnimation`, tehakse `name` CSS-ile kättesaadavaks.
  // `definition` võib kirjeldada, kuidas animatsioonijada luua.

  // Esitame konkreetse näite, kus `animate` funktsioon on põhiloogika.
  // `CSS.registerAnimation` on mõeldud kohandatud animatsiooni*jadade* registreerimiseks, mida saab rakendada CSS `animation-name` kaudu.

  // Kasutame kontseptuaalselt otsesemat lähenemist:
  // `AnimationWorklet` määratleb `resolve` funktsiooni või `animate` meetodi.
  // `animate` meetod võtab `currentTime` ja `playState` ning peaks tagastama väärtuse.

  // Lihtsustatud registreerimine, mis keskendub `animate` meetodi rollile:
  // `animate` meetodit Workletis kutsub brauser välja.
  // Eeldame, et Worklet on laetud `CSS.animationWorklet.addModule()` kaudu.
  // Seejärel saame JS-is luua Animation'i eksemplari.

  // Näide Workletist, mis määratleb kohandatud `animate` funktsiooni:
  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; // Tagastage praegune olek, kui ei tööta
      }

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

  // Selle registreerimine kohandatud animatsioonijadana:
  CSS.registerAnimation({
    name: 'customProgress',
    // Definitsioon võib olla `KeyframeEffect` või kohandatud animatsiooniobjekt.
    // Eeldame, et Worklet määratleb põhilise `animate` loogika.
    // `CSS.registerAnimation` on mõeldud kohandatud animatsioonijadade registreerimiseks, mida CSS saab kasutada.
    // `animate` meetod tagastab atribuudi väärtuse.
    // Peame selle siduma konkreetse kohandatud atribuudiga.

    // Brauser kutsub Workleti `animate` meetodit animatsioonikaadrite jaoks välja.
    // Eeldame, et tahame luua animatsiooni, mis juhib `--progress` atribuuti.

    // `CSS.registerAnimation` registreerib nimega animatsiooni, mida saab kasutada CSS `animation-name`'is.
    // Kohandatud atribuudiga kasutamisel peab brauser teadma, kuidas seda rakendada.

    // Keskendume `Animation API`-le kohandatud atribuutide otse animeerimiseks.
    // Loome `KeyframeEffect`'i, mis sihib `--progress` atribuuti.
    // Worklet saab pakkuda kohandatud leevendust või ajakava käitumist.

    // Lihtsustatud kontseptuaalne näide Workletist, mida saab kasutada animatsiooniväärtuste genereerimiseks:
    // `animate` meetod on võtmetähtsusega.
    // Eeldame, et see worklet on laetud ja loome sellest Animation objekti.
    // `CSS.registerAnimation` on rohkem CSS `@keyframes` integratsiooni jaoks.

    // Keskenduge `animate` meetodi signatuurile ja eesmärgile:
    // See võtab `currentTime` ja `playState` ning tagastab interpoleeritud väärtuse.

    // Eeldame, et meil on klass `ProgressAnimator` koos `animate` meetodiga.
    // Registreeriksime selle klassi või selle eksemplari.

    // Viimane katse `CSS.registerAnimation` selguse huvides:
    // See registreerib korduvkasutatava animatsioonijada.
    // Seotud Workleti `animate` meetod kutsutakse välja.
    // `name` on see, mida kasutate `animation-name`'is.

    // Eeldame, et Workleti klass nimega `ProgressAnimationWorklet` on olemas ja laetud.
    // `CSS.registerAnimation` nõuab `definition`'i, mida brauser saab animatsiooni loomiseks kasutada.
    // See definitsioon võib viidata kohandatud `KeyframeEffect`'ile, mille pakub Worklet.

    // Lihtsustame ja keskendume põhifunktsionaalsusele: `animate` meetod tagastab väärtusi.
    // Brauseri animatsioonimootor kutsub selle meetodi välja.

    // Peame Workleti CSS-iga siduma.
    // `CSS.animationWorklet.addModule()` on viis Workletite laadimiseks.
    // Pärast laadimist saame kasutada `Animation` API-d.

    // Valmistame ette Workleti, mida saab laadida.
    // `animate` meetod on Workleti animatsiooniloogika süda.

    // Kaaluge `AnimationWorklet`'i kui viisi kohandatud `KeyframeEffect`'ide või animatsioonifunktsioonide määratlemiseks.
    // `CSS.registerAnimation` registreerib nimega animatsioonijada, mida saab kasutada CSS-is.

    // Määratleme kontseptuaalse `animate` meetodi, mida brauser kutsub välja.
    // See `animate` meetod peaks tagastama animeeritava atribuudi väärtuse.

    // `CSS.registerAnimation` API on rohkem kohandatud `@keyframes` käitumise määratlemiseks.
    // Kohandatud atribuutide animeerimiseks JavaScripti Animation API kaudu:
    // Loome `KeyframeEffect`, mis sihib kohandatud atribuuti.
    // Worklet saab pakkuda kohandatud leevendust või ajakava käitumist.

    // Eeldame, et `animate` on meetod, mis arvutab atribuudi väärtuse.
    // `CSS.registerAnimation` loob sellest animatsioonijada.

    // Eeldame, et `progress-animation.js`-s on määratletud klass `ProgressAnimation` koos `animate` meetodiga.
    // `CSS.registerAnimation` API-d kasutatakse nimega animatsiooni registreerimiseks.
    // `definition` parameeter võib olla `KeyframeEffect` või selle tehas.

    // Kohandatud atribuutide animeerimiseks kasutatakse sageli Animation API-d koos.
    // Worklet määratleb kohandatud animatsiooniloogika.

    // Esitame täpsema näite Workleti skriptist:
  },
  // `params` argument `CSS.registerAnimation`'is ei ole standardne. Ajastust ja leevendust kontrollitakse tavaliselt CSS `animation` atribuudi või Animation API kaudu.
  // `animate` funktsiooni signatuur on `(currentTime, playState)`, mis tagastab väärtuse.
  // Peame selle Workleti laadima ja seejärel seda kasutama.
});

// Eraldi skriptis (nt main.js):
/*
  // Laadige Animation Workleti moodul
  CSS.animationWorklet.addModule('progress-animation.js')
    .then(() => {
      const progressBarStyle = getComputedStyle(document.querySelector('.progress-bar'));
      const animationDuration = 2000; // ms
      const targetProgress = 80;

      // Määratlege võtmekaadrid kohandatud atribuudi jaoks
      const keyframes = [
        { '--progress': 0 },
        { '--progress': targetProgress }
      ];

      // Määratlege animatsiooni ajastus
      const timing = {
        duration: animationDuration,
        easing: 'ease-in-out',
        fill: 'forwards' // Hoidke lõppväärtust
      };

      // Looge KeyframeEffect, mis sihib elementi
      // Peame sihtima elementi, millel on --progress atribuut määratud.
      // Eeldame, et see on rakendatud body'le või konkreetsele elemendile.
      const progressBarElement = document.querySelector('.progress-bar');

      // Looge KeyframeEffect kohandatud atribuudi jaoks
      // Kohandatud atribuudi nimi on '--progress'.
      const effect = new KeyframeEffect(progressBarElement, keyframes, timing);

      // Looge Animation objekt
      // Kui oleksime registreerinud 'customProgress', saaksime seda siin kasutada.
      // Või saame kasutada vaike-Animation konstruktorit, mis kasutab kaudselt brauseri loogikat.
      // Workleti 'animate' meetod kohandab interpoleerimist.

      // Kohandatud atribuutide animeerimiseks on 'Animation' API peamine liides.
      // Worklet pakub sellele API-le kohandatud käitumist.

      // Simuleerime animatsiooni loomist, mis kasutab kohandatud loogikat.
      // 'CSS.registerAnimation' on mõeldud nimega CSS animatsioonidele.
      // Kohandatud atribuutide otse JS-i kontrollimiseks loome 'KeyframeEffect'.
      // Brauser kutsub Workleti 'animate' meetodi välja, kui 'Animation' API-d kasutatakse.

      // Kasutame 'Animation' API-d otse oma kohandatud atribuudiga.
      // Loome 'KeyframeEffect', mis sihib '--progress' atribuuti.
      // Brauser kasutab registreeritud Workleti loogikat, kui see on kohaldatav.

      // Näide: '--progress' otse animeerimine Animation API abil.
      const progressAnimation = new Animation(
        new KeyframeEffect(
          progressBarElement,
          [{ '--progress': 0 }, { '--progress': targetProgress }],
          {
            duration: animationDuration,
            easing: 'ease-in-out',
            fill: 'forwards'
          }
        )
      );

      // Esitage animatsioon
      progressAnimation.play();
    })
    .catch(error => {
      console.error('Animation Workleti laadimine ebaõnnestus:', error);
    });
*/


// Parandatud kontseptuaalne näide, mis keskendub `animate` meetodile Workletis,
// mis mõjutab, kuidas brauser väärtusi interpoleerib.

// Eeldame, et see skript `progress-animation.js` laaditakse `CSS.animationWorklet.addModule()` abil.

// See on lihtsustatud näide sellest, kuidas Worklet saab määratleda kohandatud animatsiooniloogikat.
// Brauseri animatsioonimootor kutsub `animate` meetodi välja.
// Tagastatav väärtus on animeeritava atribuudi interpoleeritud väärtus.

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)); // Piirake edenemist
    const easedProgress = this.easing(progress);
    return this.targetValue * easedProgress;
  }
}

// Et muuta see `CSS.registerAnimation` kaudu kasutatavaks, peaksite selle tavaliselt mähkima
// struktuuri, mis määratleb `KeyframeEffect`'i või kohandatud animatsiooni.

// Kohandatud atribuutide animeerimiseks on `Animation` API peamine liides,
// ja Workletid pakuvad kohandatud käitumist, mida `Animation` API saab ära kasutada.

// Demonstreerime põhikontseptsiooni: `animate` meetod genereerib väärtusi.

// See on Workleti võimekuse kontseptuaalne esitus.
// Tegelik implementatsioon `CSS.registerAnimation` jaoks on keerulisem,
// hõlmates `KeyframeEffect` definitsioone.

// Kõige otsesem viis kohandatud atribuutide animeerimiseks Houdini abil on kasutada Animation API-d
// ja lubada Workletitel interpoleerimist mõjutada.

// Eeldame, et Worklet määratleb, kuidas animatsiooni jaoks väärtusi *genereerida*.
// `CSS.registerAnimation` on mõeldud nende kohandatud animatsioonijadade nimetamiseks.

// `animate` meetodi roll on arvutada väärtus antud `currentTime` ajahetkel.
// `playState` näitab animatsiooni praegust olekut.

// Praktiline viis integreerimiseks on luua `KeyframeEffect`, mis sihib kohandatud atribuuti.
// Brauser kasutab seejärel oma animatsioonimootorit, mida saab Workletitega laiendada.

// Et Worklet oleks tõeliselt korduvkasutatav `CSS.registerAnimation`'iga kohandatud atribuutide jaoks,
// määratleks Worklet kohandatud `KeyframeEffect` tehase.

// Kuid põhiprintsiip on see, et Workletid saavad pakkuda kohandatud `animate` loogikat.

// Struktureerime täielikuma näite Workleti laadimisest ja kasutamisest
// kohandatud atribuutide animatsiooniks.

// --- Kontseptuaalne `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: (() => {
//           // Lahenda leevendusfunktsioon stringist või funktsioonist
//           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);
//     }
//   }
// });
// --- Kontseptuaalse `progress-animation.js` lõpp ---

// Ülaltoodud `keyframeGenerator` kontseptsioon on veidi keerukas. `animate` meetod
// on rohkem interpoleerimisloogika määratlemise kohta.

// Keskendume Workletite võimele mõjutada animatsiooni interpoleerimist.
// Kui kohandatud atribuuti animeeritakse, peab brauser teadma, kuidas selle väärtust interpoleerida.
// Workletid saavad pakkuda kohandatud interpoleerimisloogikat.

// Võti on see, et `AnimationWorklet` võimaldab kohandatud `animate` funktsioone.


animate meetodi roll

Animation Workleti süda kohandatud atribuutide animeerimisel peitub selle animate meetodis. Seda meetodit kutsub brauseri animatsioonimootor välja igal animatsioonikaadril. See saab kaks peamist argumenti:

  
currentTime: animatsiooni praegune aeg, tavaliselt millisekundites, suhtes animatsiooni algusega.
  
playState: string, mis näitab animatsiooni praegust olekut (nt 'running', 'paused', 'finished').


animate meetod peaks tagastama arvutatud väärtuse animeeritava atribuudi jaoks sel konkreetsel ajahetkel. Kohandatud atribuutide puhul kasutatakse seda väärtust atribuudi dünaamiliseks uuendamiseks.

2. samm: Workleti laadimine ja rakendamine

Kui teie Workleti skript on valmis, peate selle laadima brauseri animatsioonikonteksti. Seda tehakse käsuga CSS.animationWorklet.addModule(). Pärast mooduli laadimist saate kasutada brauseri Animation API-d, et luua ja esitada animatsioone, mis sihivad teie kohandatud atribuute. Kui brauser animeerib kohandatud atribuuti, kasutab see teie Workletis määratletud loogikat.

Siin on, kuidas võiksite laadida Workleti ja rakendada animatsiooni oma peamises JavaScripti failis:


// main.js

// Veenduge, et brauser toetab Houdini Animation Workleteid
if ('animationWorklet' in CSS) {
  // Laadige Workleti moodul
  CSS.animationWorklet.addModule('/path/to/progress-animation.js') // Veenduge, et tee on õige
    .then(() => {
      console.log('Animation Worklet on edukalt laetud!');

      const progressBarElement = document.querySelector('.progress-bar');
      const animationDuration = 1500; // millisekundit
      const targetProgress = 75; // --progress'i sihtväärtus

      // Määratlege võtmekaadrid. Sihime kohandatud atribuuti '--progress'.
      const keyframes = [
        { '--progress': 0 },
        { '--progress': targetProgress }
      ];

      // Määratlege ajastusparameetrid
      const timing = {
        duration: animationDuration,
        easing: 'ease-in-out', // Standardne CSS leevendus või kohandatud
        fill: 'forwards' // Säilitage lõppolek
      };

      // Looge KeyframeEffect, mis sihib meie elementi ja kohandatud atribuuti
      // Brauser kasutab registreeritud Workleti loogikat '--progress' interpoleerimiseks.
      const progressEffect = new KeyframeEffect(progressBarElement, keyframes, timing);

      // Looge Animation objekt efektist
      const progressAnimation = new Animation(progressEffect);

      // Soovi korral siduge see kohandatud animatsiooni nimega, kui see on registreeritud
      // Otse kohandatud atribuudi animeerimiseks kasutatakse sageli otse Animation API-d.

      // Esitage animatsioon
      progressAnimation.play();
    })
    .catch(error => {
      console.error('Animation Workleti laadimine või registreerimine ebaõnnestus:', error);
      // Varumehhanism või veakäsitlus brauseritele, mis seda ei toeta
    });
} else {
  console.warn('CSS Animation Workletid ei ole selles brauseris toetatud.');
  // Pakkuge varumehhanismi vanematele brauseritele
}


            

              
                Copy