الحركة

يستخدم محول 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>

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

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

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

التنظيف

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