Motion

Motion adapteris naudoja Motion DOM animacijų sekas. Įdiekite viešąjį paketą ir 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>

Šiai sąrankai GSAP nereikia. Abiem varikliams bendri pagrindiniai analizavimo, numatytųjų reikšmių, parinkiklių, išankstinių nustatymų, stebėjimo ir gyvavimo ciklo metodai.

Motion 14.6 DOM deklaracijose naudojamas tipas, kurį teikia @types/react. Jei TypeScript projektuose tikrinamos priklausomybių deklaracijos, šiuos tipus taip pat įdiekite kaip kūrimo priklausomybę. Pačios React nereikia:

pnpm add -D @types/react

Įtraukite "react" į compilerOptions.types, kai TypeScript konfigūracija apriboja numanomuosius tipų paketus.

Palaikomos reikšmės

• Motion DOM ypatybės su skaitinėmis arba tekstinėmis reikšmėmis, įskaitant nepermatomumą, transformacijas ir spalvas.
• from, to ir suporuotos from/to būsenos. Jei nepateikta to reikšmė, from animacija baigiasi natūraliu elemento stiliumi.
• Skaitinės duration, delay, repeatDelay ir stagger reikšmės sekundėmis.
• Elemento repeat reikšmės nuo 0 iki 19 ir loginė yoyo reikšmė. Ilgesniam arba begaliniam kartojimui naudokite laiko juostos kartojimą.
• Laiko juostos defaults, delay, repeatDelay, repeat ir yoyo; laiko juostos repeat--1 kartojasi neribotai.
• Skaitinės laiko juostos pozicijos, nuoseklus išdėstymas, <, > ir santykiniai poslinkiai, pavyzdžiui, +=0.2, -=0.2 ir <+=0.2.
• Motion pavadinti švelninimo variantai, linear/none ir įprasti GSAP švelninimo pavadinimai: nuo power0 iki power4, sine, expo, circ ir back su priesagomis .in, .out arba .inOut.
• GSAP sukimosi sinonimai, pavyzdžiui, rotation, susieti su Motion rotate.

Pavyzdžiui, animuokite vaikus paeiliui, persidengiant animacijoms:

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

Varikliui būdingi apribojimai

Adapteris pateikia klaidą naudojant tik GSAP skirtus nustatymus, įskaitant ScrollTrigger, GSAP papildinius, autoAlpha, procentines transformacijas, pvz., xPercent, atgalinio iškvietimo priemones, įdėtus attr/css objektus ir santykines ypatybių reikšmes, pvz., x-+=100. Nepalaikomos ir procentais pagrįstos laiko juostos pozicijos bei objekto formos pakopinis išdėstymas. Jei reikia šių funkcijų, naudokite GSAP adapterį.

Palaikomos priemonės nereiškia, kad abiejuose varikliuose interpoliavimas veikia vienodai. Motion valdo savo animacijų atkūrimą ir ypatybių interpoliavimą.

Valymas

Naudokite animations.refresh() po DOM atnaujinimų arba įjunkite watch. Išardydami iškvieskite animations.destroy(). Jis atšaukia Motion atkūrimą, pašalina medijos užklausų klausytojus ir stebėtojus bei atkuria pradinius įterptinius stilius.