Motion

Adapter Motion korzysta z sekwencji animacji DOM Motion. Zainstaluj publiczny pakiet i 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>

W tej konfiguracji nie potrzebujesz GSAP. Analizowanie kodu, wartości domyślne, selektory, presety, obserwowanie i metody cyklu życia są wspólne dla obu silników.

Deklaracje DOM w Motion 14.6 odwołują się do typu dostarczanego przez @types/react. W projektach TypeScript z rygorystycznymi ustawieniami, które sprawdzają deklaracje zależności, zainstaluj też typy jako zależność deweloperską. Samo React nie jest potrzebne:

pnpm add -D @types/react

Uwzględnij "react" w compilerOptions.types, jeśli konfiguracja TypeScript ogranicza pakiety typów dostępne globalnie.

Obsługiwane wartości

• Właściwości DOM Motion z wartościami liczbowymi lub tekstowymi, w tym krycie, transformacje i kolory.
• from, to oraz sparowane stany from/to. Animacja from kończy się naturalnym stylem elementu, jeśli nie podano wartości to.
• Liczbowe wartości duration, delay, repeatDelay i stagger w sekundach.
• Wartości repeat elementu od 0 do 19 oraz wartość logiczna yoyo. Do dłuższych lub nieskończonych powtórzeń użyj powtarzania osi czasu.
• defaults, delay, repeatDelay, repeat i yoyo osi czasu; powtórzenia repeat--1 osi czasu są nieskończone.
• Liczbowe pozycje osi czasu, sekwencyjne umieszczanie, <, > oraz przesunięcia względne, takie jak +=0.2, -=0.2 i <+=0.2.
• Nazwane funkcje łagodzenia Motion, linear/none oraz popularne nazwy funkcji łagodzenia GSAP: od power0 do power4, sine, expo, circ i back, z przyrostkami .in, .out lub .inOut.
• Aliasy obrotu GSAP, takie jak rotation, mapowane na rotate Motion.

Na przykład animuj elementy potomne kolejno, z nakładaniem się animacji:

<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>

Ograniczenia specyficzne dla silnika

Adapter zgłasza błąd w przypadku ustawień dostępnych wyłącznie w GSAP, w tym ScrollTrigger, wtyczek GSAP, autoAlpha, transformacji procentowych, takich jak xPercent, funkcji zwrotnych narzędzi, zagnieżdżonych obiektów attr/css oraz względnych wartości właściwości, takich jak x-+=100. Nieobsługiwane są również procentowe pozycje osi czasu i przesunięcie w formie obiektu. Jeśli potrzebujesz tych funkcji, użyj adaptera GSAP.

Obsługiwane narzędzia nie gwarantują identycznej interpolacji w obu silnikach. Motion zarządza odtwarzaniem animacji i interpolacją właściwości.

Czyszczenie

Użyj animations.refresh() po aktualizacjach DOM lub włącz watch. Podczas demontażu wywołaj animations.destroy(). Anuluje odtwarzanie Motion, usuwa nasłuchiwacze zapytań o media i obserwatory oraz przywraca pierwotne style wbudowane.