تسلط بر بخش‌های مسیر حرکتی CSS: مروری عمیق بر انیمیشن بخشی از مسیر

در چشم‌انداز همیشه در حال تحول طراحی و توسعه وب، حرکت به یک زبان حیاتی برای تجربه کاربری تبدیل شده است. این توجه را هدایت می‌کند، بازخورد ارائه می‌دهد و داستان‌ها را به روش‌هایی بیان می‌کند که رابط‌های استاتیک نمی‌توانند. سال‌ها، حرکت پیچیده به کتابخانه‌های سنگین جاوا اسکریپت یا ابزارهای انیمیشن اختصاصی نیاز داشت. با این حال، ماژول مسیر حرکتی CSS به عنوان یک راه‌حل قدرتمند و بومی ظاهر شده است و به توسعه‌دهندگان اجازه می‌دهد عناصر را در امتداد مسیرهای سفارشی تعریف‌شده مستقیماً در برگه‌های سبک خود متحرک کنند. این یک تغییر دهنده بازی برای ایجاد انیمیشن‌های اعلانی با عملکرد بالا است.

بیشتر آموزش‌ها Motion Path را با متحرک‌سازی یک عنصر در امتداد کل یک مسیر، از ابتدا تا انتها معرفی می‌کنند. اما وقتی دیدگاه خلاقانه شما به ظرافت بیشتری نیاز دارد چه اتفاقی می‌افتد؟ اگر نیاز دارید که یک شیء فقط در امتداد یک منحنی از یک شکل پیچیده حرکت کند، مکث کند و سپس در امتداد یک بخش متفاوت ادامه دهد چه؟ اینجاست که تسلط واقعی نهفته است: در کنترل نه تنها مسیر، بلکه بخش‌های خاصی از سفر.

این راهنمای جامع برای توسعه‌دهندگان و طراحان در سراسر جهان است که می‌خواهند از اصول اولیه فراتر بروند. ما تکنیک‌های مورد نیاز برای متحرک‌سازی عناصر را در امتداد بخش‌های خاصی از یک مسیر حرکتی CSS، باز کردن یک سطح جدید از انیمیشن‌های وب طراحی‌شده و رسا، بدون یک خط جاوا اسکریپت، تشریح خواهیم کرد.

بنیادها: مروری سریع بر مسیر حرکتی CSS

قبل از اینکه بتوانیم بخش‌ها را کنترل کنیم، باید درک کاملی از خواص اصلی داشته باشیم که باعث می‌شوند Motion Path کار کند. اگر از قبل با آنها آشنا هستید، این را یک مرور مختصر در نظر بگیرید. اگر تازه وارد هستید، این نقطه شروع ضروری شماست.

خواص اصلی

مشخصات سطح 1 مسیر حرکتی CSS مجموعه‌ای از خواص را تعریف می‌کند که برای تعریف و کنترل حرکت یک عنصر با هم کار می‌کنند. مهم‌ترین آنها عبارتند از:

• offset-path: این قلب ماژول است. این مسیر هندسی را که عنصر دنبال می‌کند تعریف می‌کند. رایج‌ترین و قدرتمندترین راه برای تعریف آن، استفاده از تابع path() است که یک رشته داده مسیر SVG را می‌پذیرد. این بدان معناست که شما می‌توانید یک مسیر پیچیده را در هر ویرایشگر گرافیکی برداری (مانند Illustrator، Inkscape یا Figma) طراحی کنید، داده‌های مسیر SVG را کپی کنید و مستقیماً در CSS خود جای‌گذاری کنید.
• offset-distance: این را به عنوان نوار پیشرفت برای انیمیشن در نظر بگیرید. موقعیت عنصر را در امتداد offset-path مشخص می‌کند. مقدار 0% عنصر را در ابتدای مسیر قرار می‌دهد، در حالی که 100% آن را در انتهای مسیر قرار می‌دهد. متحرک‌سازی این ویژگی همان چیزی است که حرکت را ایجاد می‌کند.
• offset-rotate: این ویژگی جهت‌گیری عنصر را هنگام حرکت در امتداد مسیر کنترل می‌کند. به طور پیش‌فرض، عنصر نمی‌چرخد. تنظیم آن بر روی auto باعث می‌شود که خط پایه عنصر خود را با جهت مسیر جهت‌دهی کند، که برای چیزهایی مانند اتومبیل در جاده یا هواپیما در آسمان عالی است. همچنین می‌توانید یک زاویه اضافه کنید، مانند auto 90deg، تا عنصر عمود بر جهت مسیر باشد.
• offset-anchor: این مشخص می‌کند که کدام نقطه روی خود عنصر به مسیر ثابت شده است. پیش‌فرض auto است که معادل 50% 50% یا مرکز عنصر است. می‌توانید مختصات دیگری را مشخص کنید (به عنوان مثال، 0% 0% برای گوشه بالا سمت چپ) تا نحوه «پین» شدن عنصر به مسیر خود را تغییر دهید.

یک مثال ساده از انیمیشن «مسیر کامل»

بیایید این ویژگی‌ها را با یک مثال کلاسیک در عمل ببینیم: متحرک‌سازی یک شیء از ابتدا تا انتهای یک مسیر منحنی ساده. این خط پایه ما را قبل از ورود به کنترل بخش ایجاد می‌کند.

            
<!-- HTML Structure -->
<div class="scene">
  <div class="dot"></div>
</div>

<style>
  .scene {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    margin: 2em auto;
  }

  .dot {
    width: 20px;
    height: 20px;
    background-color: dodgerblue;
    border-radius: 50%;
    offset-path: path('M 20,100 C 50,20 250,20 280,100');
    animation: move-along-full-path 4s infinite linear;
  }

  @keyframes move-along-full-path {
    from {
      offset-distance: 0%;
    }
    to {
      offset-distance: 100%;
    }
  }
</style>

            

              
                Copy
              
            
          

در این مثال، عنصر .dot یک offset-path منحنی اختصاص داده شده است. انیمیشن move-along-full-path سپس offset-distance را از 0% به 100% در مدت چهار ثانیه دستکاری می‌کند. این یک مورد استفاده اساسی است. اما هدف ما این است که از این پارادایم ساده شروع به پایان رهایی یابیم.

چالش اصلی: متحرک‌سازی یک بخش خاص از مسیر

دنیای واقعی به ندرت یک سفر ساده A-to-Z است. یک نقشه مترو را در وب‌سایت حمل و نقل عمومی یک شهر تصور کنید. شما نمی‌خواهید قطار را در سراسر کل شبکه شهر متحرک کنید. شما می‌خواهید سفر آن را بین دو ایستگاه خاص نشان دهید. یا یک تور محصول تعاملی را در نظر بگیرید که در آن می‌خواهید توجه کاربر را از صفحه نمایش دستگاه به لنز دوربین آن جلب کنید، که ممکن است نشان‌دهنده حرکت از 20٪ به 35٪ در امتداد یک مسیر از پیش تعریف شده باشد که دستگاه را مشخص می‌کند.

این سناریوها نیاز به کنترل دقیق را برجسته می‌کنند. ما به یک راه نیاز داریم تا به انیمیشن خود بگوییم:

• در یک نقطه دلخواه در امتداد مسیر (به عنوان مثال، 25%) شروع شود.
• در یک نقطه دلخواه دیگر (به عنوان مثال، 80٪) پایان یابد.
• این سفر جزئی را در طول مدت زمان کامل انیمیشن ما اجرا کنید.

اینجاست که درک عمیق‌تری از CSS Keyframes نه تنها مفید، بلکه ضروری می‌شود. جادو در یک ویژگی CSS جدید و کشف‌نشده نیست؛ بلکه در دستکاری استراتژیک ویژگی offset-distance در قانون @keyframes است که قبلاً می‌دانیم.

راه‌حل: کنترل دقیق با Keyframes

کلید انیمیشن بخشی از مسیر این است که بفهمیم نشانگرهای from و to (یا 0% و 100%) در داخل یک بلوک @keyframes به جدول زمانی خود انیمیشن اشاره دارند، نه لزوماً ابتدای و انتهای مسیر حرکت. ما می‌توانیم هر مقدار offset-distance را به این نشانگرها اختصاص دهیم.

تکنیک 1: متحرک‌سازی یک بخش اساسی

بیایید مثال قبلی خود را تطبیق دهیم. به جای حرکت نقطه در امتداد کل مسیر، آن را فقط در امتداد بخش میانی، به طور خاص از علامت 25٪ به علامت 75٪، حرکت می‌دهیم.

            
<!-- HTML is the same -->
<div class="scene">
  <div class="dot-segment"></div>
</div>

<style>
  /* .scene styles are the same */
  .scene {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    margin: 2em auto;
  }

  .dot-segment {
    width: 20px;
    height: 20px;
    background-color: crimson;
    border-radius: 50%;
    /* The same path as before */
    offset-path: path('M 20,100 C 50,20 250,20 280,100');
    
    /* Set initial position if needed */
    offset-distance: 25%;

    /* Animate with new keyframes */
    animation: move-along-segment 4s forwards;
  }

  @keyframes move-along-segment {
    from {
      offset-distance: 25%;
    }
    to {
      offset-distance: 75%;
    }
  }
</style>

            

              
                Copy
              
            
          

بیایید تغییرات حیاتی را بررسی کنیم:

1. Keyframes: به جای متحرک‌سازی از 0% به 100%، keyframes move-along-segment صریحاً نقاط شروع و پایان سفر را به عنوان offset-distance: 25% و offset-distance: 75% تعریف می‌کنند.
2. animation-fill-mode: forwards;: این بسیار مهم است. این ویژگی به مرورگر می‌گوید که پس از اتمام انیمیشن، عنصر باید سبک‌های keyframe نهایی (to یا 100%) را حفظ کند. بدون forwards، پس از پایان انیمیشن 4 ثانیه‌ای، نقطه به حالت اولیه خود قبل از اعمال انیمیشن بازمی‌گردد. با استفاده از آن، اطمینان حاصل می‌کنیم که نقطه از 25٪ تا 75٪ متحرک می‌شود و سپس در علامت 75٪ باقی می‌ماند.
3. حالت اولیه (اختیاری اما تمرین خوبی است): تنظیم offset-distance: 25%; مستقیماً روی عنصر تضمین می‌کند که حتی قبل از شروع انیمیشن در موقعیت صحیح شروع می‌شود.

با این تغییر ساده، شما تکنیک اساسی را باز کرده‌اید. مدت زمان کل انیمیشن 4 ثانیه است که اکنون فقط به پیمودن 50٪ از طول مسیر (از 25٪ تا 75٪) اعمال می‌شود و به شما کنترل دقیقی بر دامنه و سرعت حرکت می‌دهد.

تکنیک 2: طراحی سفرهای چند مرحله‌ای

اکنون برای یک سناریوی پیشرفته‌تر و کاربردی‌تر: ایجاد یک انیمیشن چند مرحله‌ای با مکث. این برای تورهای راهنما، داستان‌سرایی یا دستورالعمل‌های گام به گام عالی است. بیایید یک انیمیشن با طراحی زیر ایجاد کنیم:

• مرحله 1: از ابتدا (0٪) به علامت 40٪ حرکت کنید.
• مرحله 2: در علامت 40٪ لحظه‌ای مکث کنید.
• مرحله 3: حرکت از علامت 40٪ به علامت نهایی 90٪ را ادامه دهید.

برای دستیابی به این هدف، باید داستان خود را با استفاده از درصد keyframe به جدول زمانی انیمیشن خود ترسیم کنیم. بیایید بگوییم مدت زمان کل انیمیشن ما 10 ثانیه است. ما می‌توانیم زمان را به صورت زیر اختصاص دهیم:

• اولین حرکت (4s): از 40٪ اول از جدول زمانی انیمیشن (keyframes 0٪ تا 40٪) استفاده کنید.
• مکث (2s): از 20٪ بعدی از جدول زمانی (keyframes 40٪ تا 60٪) استفاده کنید.
• حرکت دوم (4s): از 40٪ نهایی جدول زمانی (keyframes 60٪ تا 100٪) استفاده کنید.

در اینجا نحوه تبدیل آن به کد آمده است:

            
@keyframes multi-stage-journey {
  /* Stage 1: Move from 0% to 40% of the path */
  /* This happens during the first 40% of the animation's duration */
  0% {
    offset-distance: 0%;
  }
  40% {
    offset-distance: 40%;
  }

  /* Stage 2: Pause */
  /* Hold the position at 40% of the path */
  /* This happens between 40% and 60% of the animation's duration */
  60% {
    offset-distance: 40%;
  }

  /* Stage 3: Move from 40% to 90% of the path */
  /* This happens during the final 40% of the animation's duration */
  100% {
    offset-distance: 90%;
  }
}

.dot-multi-stage {
  /* ... other styles ... */
  animation: multi-stage-journey 10s forwards;
}

            

              
                Copy
              
            
          

کلید مکث این است که دو نشانگر keyframe مجاور (40% و 60%) با مقدار offset-distance یکسان داشته باشید. در طول زمان بین علامت 40٪ و 60٪ از جدول زمانی انیمیشن، `offset-distance` تغییر نمی‌کند و یک مکث عالی در حرکت ایجاد می‌کند. این تکنیک به شما کنترل سطح کارگردان را بر سرعت و ریتم انیمیشن‌هایتان می‌دهد.

تکنیک‌های پیشرفته برای گردش‌های کاری حرفه‌ای

تسلط بر اصول اولیه عالی است، اما توسعه حرفه‌ای به راه‌حل‌هایی نیاز دارد که قابل نگهداری، پویا و قابل دسترس باشند. بیایید برخی از تکنیک‌های پیشرفته را بررسی کنیم.

بخش‌های پویا با خواص سفارشی CSS (متغیرها)

مقادیر کدگذاری شده مانند 25% و 75% در keyframes شما کار می‌کند، اما خیلی انعطاف‌پذیر نیست. با استفاده از خواص سفارشی CSS، می‌توانید بخش‌های انیمیشن خود را به‌صورت پویا تعریف کنید و کد خود را قابل استفاده مجدد و به‌روزرسانی آسان‌تر می‌کند، به‌ویژه با جاوا اسکریپت.

            
.element-dynamic {
  /* Define the segment endpoints as variables */
  --segment-start: 15%;
  --segment-end: 85%;

  offset-path: path('...');
  animation: move-dynamic-segment 5s forwards;
}

@keyframes move-dynamic-segment {
  from { 
    offset-distance: var(--segment-start);
  }
  to {
    offset-distance: var(--segment-end);
  }
}

            

              
                Copy
              
            
          

این رویکرد فوق‌العاده قدرتمند است. به عنوان مثال، می‌توانید چندین عنصر داشته باشید که از یک انیمیشن یکسان استفاده می‌کنند اما دارای متغیرهای شروع و پایان متفاوتی هستند. یا، می‌توانید از جاوا اسکریپت برای به‌روزرسانی --segment-start و --segment-end در پاسخ به تعامل کاربر، مانند کلیک کردن روی دکمه‌های مختلف برای نشان دادن قسمت‌های مختلف یک سفر روی نقشه، استفاده کنید.

سهولت در هر بخش با animation-timing-function

حرکت فقط در مورد موقعیت نیست. در مورد شخصیت است. سهولت (میزان تغییر یک پارامتر در طول زمان) به انیمیشن شما شخصیت می‌دهد. یک تصور اشتباه رایج این است که ویژگی animation-timing-function فقط برای کل انیمیشن اعمال می‌شود. با این حال، می‌توانید آن را درون یک keyframe اعلام کنید تا بر انتقال منجر به آن keyframe تأثیر بگذارد.

بیایید سفر چند مرحله‌ای خود را اصلاح کنیم. ما می‌خواهیم حرکت اول سرعت بگیرد (ease-in)، مکث ثابت باشد و حرکت دوم تا توقف ملایم (ease-out) کاهش یابد.

            
@keyframes multi-stage-eased-journey {
  0% {
    offset-distance: 0%;
    animation-timing-function: ease-in;
  }
  40% {
    offset-distance: 40%;
    /* This timing function applies to the pause */
    animation-timing-function: linear; 
  }
  60% {
    offset-distance: 40%;
    /* This timing function applies to the next movement */
    animation-timing-function: ease-out;
  }
  100% {
    offset-distance: 90%;
  }
}

            

              
                Copy
              
            
          

با مشخص کردن تابع زمان‌بندی در keyframes 0%، 40% و 60%، ما در حال تعیین سهولت برای هر فاز مجزای انیمیشن هستیم: حرکت 0-40٪، مکث 40-60٪ و حرکت 60-100٪. این سطح از کنترل امکان ایجاد حرکتی پیچیده و طبیعی را فراهم می‌کند.

دسترسی ابتدا: prefers-reduced-motion

به عنوان متخصصانی با مخاطبان جهانی، ما مسئولیت داریم که تجربیات فراگیر ایجاد کنیم. برای برخی از کاربران، به‌ویژه کسانی که اختلالات دهلیزی دارند، انیمیشن‌های مقیاس بزرگ می‌توانند باعث سرگیجه، حالت تهوع و سایر مشکلات جدی شوند. CSS یک راه ساده و مؤثر برای احترام به تنظیمات برگزیده کاربر با پرس و جو رسانه‌ای prefers-reduced-motion ارائه می‌دهد.

همیشه انیمیشن‌های مسیر حرکت خود را به گونه‌ای بپیچید که جایگزینی را برای کسانی که حرکت کاهش‌یافته را درخواست می‌کنند، ارائه دهد.

            
/* Apply the animation by default */
.animated-element {
  animation: my-motion-path-animation 5s forwards;
}

/* Override it for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
    /* Optionally, you could replace it with a simple, non-distracting fade-in */
    /* opacity: 0; */
    /* animation: fade-in 1s forwards; */
  }
}

            

              
                Copy
              
            
          

این افزودن کوچک تفاوت زیادی را برای بخش مهمی از مخاطبان شما ایجاد می‌کند. این یک بخش غیرقابل مذاکره از توسعه وب مدرن و مسئولانه است.

کاربردهای عملی و موارد استفاده جهانی

تئوری ارزشمند است، اما بیایید این تکنیک‌ها را به سناریوهای عملی و بین‌المللی درک شده متصل کنیم.

تجارت الکترونیک: برجسته کردن ویژگی محصول

یک صفحه محصول برای یک گوشی هوشمند جهانی جدید را تصور کنید. به جای فهرست‌های گلوله‌ای استاتیک، می‌توانید یک offset-path را تعریف کنید که طرح کلی دستگاه را ردیابی می‌کند. سپس یک نقطه اتصال متحرک می‌تواند از لبه صفحه (به عنوان مثال، 10٪-30٪) حرکت کند، در سیستم دوربین جدید مکث کند (در 30٪ نگه دارید) و سپس در امتداد منحنی ادامه دهد تا پورت شارژ پرسرعت را برجسته کند (40٪-60٪). این یک تور محصول پویا، جذاب و آموزنده ایجاد می‌کند.

حمل و نقل و تدارکات: تجسم یک سفر

برای هر شرکت حمل و نقل بین‌المللی، شرکت هواپیمایی یا وبلاگ مسافرتی، تجسم مسیرها کلیدی است. یک نماد هواپیما یا کشتی را می‌توان در امتداد نقشه‌ای از جهان متحرک کرد. با استفاده از انیمیشن بخش، می‌توانید یک پرواز از توکیو به سنگاپور (بخش 1) را نشان دهید، یک توقف را با متوقف کردن انیمیشن نشان دهید و سپس پرواز متصل به سیدنی (بخش 2) را متحرک کنید. این داستان‌سرایی بصری واضحی را ارائه می‌دهد که از موانع زبانی فراتر می‌رود.

بازخورد رابط کاربری: هدایت کاربر

وقتی کاربر عملی را کامل می‌کند، بازخورد واضح ضروری است. فرض کنید کاربر روی دکمه «ذخیره» در یک برنامه وب کلیک می‌کند. یک نماد علامت تیک کوچک می‌تواند در امتداد یک کمان ظریف از دکمه به یک ناحیه پیام وضعیت (به عنوان مثال، «سند شما ذخیره شد») متحرک شود. این انیمیشن بخش، عمل کاربر را به واکنش برنامه متصل می‌کند، قابلیت استفاده را بهبود می‌بخشد و تجربه کاربری بهتری ایجاد می‌کند.

سازگاری مرورگر و افکار نهایی

مسیر حرکتی CSS یک استاندارد وب مدرن است. از این نوشته، از پشتیبانی عالی در تمام مرورگرهای اصلی همیشه سبز، از جمله Chrome، Firefox، Safari و Edge برخوردار است. با این حال، همیشه عاقلانه است که یک توسعه‌دهنده جهانی با منبعی مانند CanIUse.com مشورت کند تا به روزترین اطلاعات سازگاری را دریافت کند، به خصوص اگر نیاز به پشتیبانی از نسخه‌های قدیمی‌تر مرورگر در مناطق خاصی دارید.

توانایی کنترل انیمیشن در طول بخش‌هایی از یک مسیر، ماژول مسیر حرکتی CSS را از یک تازگی به یک ابزار ضروری برای توسعه‌دهندگان فرانت‌اند حرفه‌ای و طراحان حرکت ارتقا می‌دهد. این امکان ایجاد انیمیشن‌های پیچیده، طراحی‌شده و معنادار را فراهم می‌کند که عملکردی و سخت‌افزاری هستند، همه بدون سربار کتابخانه‌های خارجی.

نتیجه‌گیری

ما از اصول اولیه مسیر حرکتی CSS به هنر ظریف کنترل بخش سفر کرده‌ایم. درس اصلی این است که با دستکاری استراتژیک offset-distance در داخل CSS @keyframes، شما کنترل دقیقی بر سفر عنصر خود به دست می‌آورید. شما دیگر به یک سفر ساده از ابتدا تا انتها محدود نمی‌شوید.

با تسلط بر انیمیشن بخش پایه، طراحی سفرهای چند مرحله‌ای با مکث، و استفاده از تکنیک‌های پیشرفته مانند خواص سفارشی CSS و سهولت در هر بخش، می‌توانید انیمیشن‌هایی بسازید که پویا، رسا و قابل نگهداری‌تر هستند. و با همیشه در نظر گرفتن دسترس‌پذیری با prefers-reduced-motion، اطمینان حاصل می‌کنید که آثار زیبای شما نیز برای همه کاربران فراگیر و محترمانه هستند.

وب یک بوم برای حرکت است. اکنون شما یک قلم مو همه‌کاره‌تر و قدرتمندتر دارید. بروید آزمایش کنید، چیزهای شگفت‌انگیزی بسازید و به گسترش مرزهای آنچه با CSS امکان‌پذیر است ادامه دهید.