Motion

Adapter Motion uporablja zaporedja animacij DOM v Motion. Namestite javni paket in Motion:

pnpm add glazejs motion

import glaze from "glazejs"
import { createMotionAdapter } from "glazejs/motion"
import { animate, stagger } from "motion"

const animations = glaze({
  adapter: createMotionAdapter({ animate, stagger }),
  breakpoints: { md: "(min-width: 768px)" },
  defaults: { element: "duration-0.6" },
  presets: { rise: "from:opacity-0|y-24" },
})

<div data-animate="preset-rise"></div>
<div data-animate="from:opacity-0 to:opacity-1|x-120"></div>
<div data-animate="@md:from:rotate-180|scale-0.5"></div>

Za to nastavitev ne potrebujete GSAP. Osnovno razčlenjevanje, privzete vrednosti, izbirniki, prednastavitve, spremljanje in metode življenjskega cikla so skupni obema pogonoma.

Deklaracije DOM za Motion 14.6 se sklicujejo na tip, ki ga zagotavlja @types/react. Pri projektih TypeScript s strogim preverjanjem deklaracij odvisnosti namestite te tipe tudi kot razvojno odvisnost. React sam po sebi ni potreben:

pnpm add -D @types/react

Vključite "react" v compilerOptions.types, kadar vaša konfiguracija TypeScript omejuje pakete ambientnih tipov.

Podprte vrednosti

• Lastnosti DOM v Motion s številskimi ali besedilnimi vrednostmi, vključno z neprosojnostjo, transformacijami in barvami.
• from, to in seznanjena stanja from/to. Animacija from se konča pri naravnem slogu elementa, če vrednost to ni podana.
• Številske vrednosti duration, delay, repeatDelay in stagger v sekundah.
• Vrednosti repeat elementa od 0 do 19 in logična vrednost yoyo. Za daljše ali neskončno ponavljanje uporabite ponovitev časovnice.
• defaults, delay, repeatDelay, repeat in yoyo časovnice; repeat--1 časovnice se ponavlja neskončno.
• Številski položaji na časovnici, zaporedna umestitev, <, > in relativni odmiki, kot so +=0.2, -=0.2 in <+=0.2.
• Poimenovano glajenje Motion, linear/none in običajna imena glajenja GSAP: od power0 do power4, sine, expo, circ in back s priponami .in, .out ali .inOut.
• GSAP vzdevki za vrtenje, kot je rotation, preslikan v rotate v Motion.

Na primer, animirajte otroke zaporedno s prekrivanjem:

<div data-animate="tl defaults:duration-0.6">
  <div data-animate="from:opacity-0|y-24"></div>
  <div data-animate="from:opacity-0|y-24 tl:[-=0.2]"></div>
</div>

Omejitve posameznega pogona

Adapter sproži napako pri nastavitvah, ki so na voljo samo v GSAP, vključno z ScrollTrigger, vtičniki GSAP, autoAlpha, odstotkovnimi transformacijami, kot je xPercent, povratnimi funkcijami, ugnezdenimi objekti attr/css in relativnimi vrednostmi lastnosti, kot je x-+=100. Odstotkovni položaji na časovnici in zamik v obliki objekta prav tako niso podprti. Če potrebujete te funkcije, uporabite adapter GSAP.

Podprte funkcije ne zagotavljajo enake interpolacije v obeh pogonih. Motion upravlja predvajanje animacij in interpolacijo lastnosti.

Čiščenje

Po posodobitvah DOM uporabite animations.refresh() ali omogočite watch. Ob odstranitvi pokličite animations.destroy(). Prekliče predvajanje Motion, odstrani poslušalce medijskih poizvedb in opazovalnike ter obnovi izvirne vdelane sloge.