# الحركة

يستخدم محول Motion تسلسلات الرسوم المتحركة لعناصر DOM في Motion. ثبّت الحزمة العامة وMotion:

```sh
pnpm add glazejs motion
```

```ts
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" },
})
```

```html
<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 نفسه:

```sh
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.

على سبيل المثال، حرّك العناصر الفرعية بالتتابع مع تداخل بينها:

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

## قيود خاصة بالمحرك

يصدر المحول خطأً عند استخدام إعدادات خاصة بـGSAP فقط، بما فيها ScrollTrigger وإضافات GSAP و`autoAlpha` وتحويلات النسبة المئوية مثل `xPercent` وأدوات الاستدعاء الراجعة وكائنات `attr`/`css` المتداخلة وقيم الخصائص النسبية مثل `x-+=100`. كما أن مواضع المخطط الزمني المعتمدة على النسبة المئوية والتفاوت بصيغة الكائن غير مدعومة. استخدم محول GSAP عند الحاجة إلى هذه الميزات.

لا يعني دعم الأدوات المساعدة تطابق الاستيفاء بين المحركين. يتولى Motion تشغيل الرسوم المتحركة واستيفاء الخصائص.

## التنظيف

استخدم `animations.refresh()` بعد تحديثات DOM، أو فعّل `watch`. استدعِ `animations.destroy()` عند تفكيك المكوّن. فهو يلغي تشغيل Motion، ويزيل مستمعي استعلامات الوسائط والمراقبين، ويستعيد الأنماط المضمنة الأصلية.