Framer Motion: هماهنگی مهم‌تر از انیمیشن

انیمیشن در مقابل ارکستراسیون

یک عنصر متحرک واحد آسان است. چیزی که به عنوان کیفیت خوانده می شود این است که چگونه چندین عنصر در زمان به هم مرتبط می شوند - چه چیزی منجر می شود، چه چیزی به دنبال دارد، چه چیزی منتظر است. این ارکستراسیون است و Framer Motion برای آن ساخته شده است.

با قصد تلو تلو خوردن

انواع مختلف به والدین اجازه می دهند فرزندان خود را هدایت کنند. یک staggerChildren کوچک، یک فهرست صاف را به دنباله‌ای تبدیل می‌کند که چشم واقعاً می‌تواند دنبال کند.

const list = {
  show: { transition: { staggerChildren: 0.06 } }
};
const item = {
  hidden: { opacity: 0, y: 12 },
  show:   { opacity: 1, y: 0 }
};

طرح بندی مشترک برای تداوم

layoutId یک عنصر را بین دو مکان در درخت متحرک می کند - یک تصویر کوچک که به نمای جزئیات گسترش می یابد، یک نشانگر برگه که اسلاید می شود. حس مکان کاربر را در طول یک انتقال حفظ می کند.

دانستن زمان توقف

بهترین حرکت، مهربانی است که کاربران احساس می کنند اما هرگز متوجه آن نمی شوند. وقتی شک دارید، کمتر عمل کنید.

حرکت را برای کاربرانی که آن را درخواست می کنند کاهش دهید، مدت زمان را کوتاه نگه دارید و اجازه دهید رقص در خدمت محتوا باشد – هرگز برعکس.