Κίνηση

Ο adapter Motion χρησιμοποιεί ακολουθίες κινούμενων εικόνων DOM του Motion. Εγκαταστήστε το δημόσιο πακέτο και το 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>

Δεν χρειάζεστε το GSAP για αυτήν τη ρύθμιση. Η ανάλυση του πυρήνα, οι προεπιλεγμένες τιμές, οι επιλογείς, οι προεπιλογές, η παρακολούθηση και οι μέθοδοι κύκλου ζωής είναι κοινές και στις δύο μηχανές.

Οι δηλώσεις DOM του Motion 14.6 αναφέρονται σε έναν τύπο που παρέχεται από το @types/react. Για έργα TypeScript με αυστηρούς ελέγχους, που ελέγχουν τις δηλώσεις εξαρτήσεων, εγκαταστήστε επίσης τους τύπους ως εξάρτηση ανάπτυξης. Το ίδιο το React δεν χρειάζεται:

pnpm add -D @types/react

Συμπεριλάβετε το "react" στο compilerOptions.types όταν η διαμόρφωση TypeScript περιορίζει τα πακέτα τύπων που είναι διαθέσιμα σε όλη την εφαρμογή.

Υποστηριζόμενες τιμές

• Ιδιότητες DOM του Motion με αριθμητικές ή συμβολοσειρές τιμές, όπως αδιαφάνεια, μετασχηματισμούς και χρώματα.
• from, to και ζευγαρωμένες καταστάσεις from/to. Μια κινούμενη εικόνα from τελειώνει στο φυσικό στυλ του στοιχείου, όταν δεν παρέχεται τιμή to.
• Αριθμητικές τιμές duration, delay, repeatDelay και stagger σε δευτερόλεπτα.
• Τιμές στοιχείου repeat από 0 έως 19 και δυαδική τιμή yoyo. Για μεγαλύτερη ή άπειρη επανάληψη, χρησιμοποιήστε την επανάληψη χρονογραμμής.
• defaults, delay, repeatDelay, repeat και yoyo χρονογραμμής· η χρονογραμμή repeat--1 επαναλαμβάνεται επ' αόριστον.
• Αριθμητικές θέσεις χρονογραμμής, διαδοχική τοποθέτηση, <, > και σχετικές μετατοπίσεις όπως +=0.2, -=0.2 και <+=0.2.
• Ονομασμένες καμπύλες επιτάχυνσης Motion, linear/none και κοινές ονομασίες καμπυλών επιτάχυνσης GSAP: από power0 έως power4, sine, expo, circ και back, με καταλήξεις .in, .out ή .inOut.
• Ψευδώνυμα περιστροφής GSAP, όπως το rotation, που αντιστοιχίζεται στο rotate του Motion.

Για παράδειγμα, κινήστε τα θυγατρικά στοιχεία διαδοχικά με επικάλυψη:

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

Περιορισμοί ανά μηχανή

Ο adapter προκαλεί σφάλμα για ρυθμίσεις που υποστηρίζει μόνο το GSAP, όπως τα ScrollTrigger, πρόσθετα GSAP, autoAlpha, μετασχηματισμούς ποσοστών όπως το xPercent, βοηθητικές συναρτήσεις επανάκλησης, εμφωλευμένα αντικείμενα attr/css και σχετικές τιμές ιδιοτήτων όπως το x-+=100. Δεν υποστηρίζονται επίσης θέσεις χρονογραμμής βάσει ποσοστών και stagger σε μορφή αντικειμένου. Όταν χρειάζεστε αυτές τις λειτουργίες, χρησιμοποιήστε τον adapter GSAP.

Η υποστήριξη των βοηθητικών συναρτήσεων δεν σημαίνει ότι οι δύο μηχανές χρησιμοποιούν πανομοιότυπη παρεμβολή. Το Motion διαχειρίζεται τη δική του αναπαραγωγή κινούμενων εικόνων και την παρεμβολή ιδιοτήτων.

Καθαρισμός

Χρησιμοποιήστε το animations.refresh() μετά από ενημερώσεις του DOM ή ενεργοποιήστε το watch. Καλέστε το animations.destroy() κατά τον τερματισμό. Ακυρώνει την αναπαραγωγή του Motion, αφαιρεί τους ακροατές συμβάντων ερωτημάτων πολυμέσων και τους παρατηρητές και επαναφέρει τα αρχικά ενσωματωμένα στυλ.