محاسبه طول مسیر حرکت CSS: اندازه‌گیری فاصله مسیر

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

مسیر حرکت CSS چیست؟

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

• مسیرهای SVG: با استفاده از عنصر <path> در SVG برای تعریف شکل‌های پیچیده.
• شکل‌های پایه: با استفاده از شکل‌های CSS مانند circle()، ellipse()، rect() و polygon().
• توابع هندسی: استفاده از توابعی مانند ray()، url()، یا حتی ویژگی‌های سفارشی (متغیرها) برای توصیف یک مسیر.

ویژگی‌های اصلی CSS درگیر عبارتند از:

• offset-path: مسیری را که عنصر باید دنبال کند، مشخص می‌کند.
• offset-distance: موقعیت را در امتداد مسیر مشخص می‌کند (0٪ شروع، 100٪ پایان).
• offset-rotate: نحوه چرخش عنصر در حین حرکت در امتداد مسیر را مشخص می‌کند.
• offset-anchor: نقطه‌ای را روی عنصر که باید با مسیر تراز شود، تعریف می‌کند.

چرا طول مسیر را محاسبه کنیم؟

محاسبه طول یک مسیر حرکت CSS به دلایل متعددی ضروری است:

• زمان‌بندی دقیق انیمیشن: برای همگام‌سازی انیمیشن‌ها با سایر عناصر یا رویدادها بر اساس فاصله واقعی طی شده، نه فقط یک درصد. یک نوار پیشرفت را تصور کنید که باید متناسب با حرکت جسم در امتداد یک مسیر منحنی پر شود. دانستن طول مسیر امکان ترسیم دقیق فاصله تا پیشرفت را فراهم می‌کند.
• طراحی واکنش‌گرا: طول مسیرها می‌تواند بر اساس اندازه و جهت صفحه نمایش، به‌ویژه با مسیرهای SVG که مقیاس می‌شوند، تغییر کند. محاسبه طول به‌صورت پویا تضمین می‌کند که انیمیشن‌ها در دستگاه‌های مختلف ثابت می‌مانند. انیمیشنی از لوگو که یک مسیر را دنبال می‌کند ممکن است در صفحه‌های کوچک‌تر نیاز به تنظیم داشته باشد و نیاز به محاسبه مجدد طول مسیر داشته باشد.
• تعاملات پیچیده: برای راه‌اندازی رویدادها یا تغییر رفتار انیمیشن در نقاط خاصی در امتداد مسیر، نیاز به دانش فواصل مطلق است. یک نقشه تعاملی را در نظر بگیرید که در آن کلیک در امتداد یک مسیر، نمایش‌های اطلاعات مختلف را بسته به مسافت طی شده، فعال می‌کند.
• بهینه‌سازی عملکرد: درک طول مسیرها می‌تواند به بهینه‌سازی عملکرد انیمیشن با جلوگیری از محاسبات یا تنظیمات غیرضروری در طول انیمیشن کمک کند.
• دسترسی‌پذیری: با درک طول مسیرها، توسعه‌دهندگان می‌توانند انیمیشن‌های دسترس‌پذیرتری ایجاد کنند که سرنخ‌های بصری روشن و ثابتی را برای کاربران فراهم می‌کند. به عنوان مثال، استفاده از طول مسیر حرکت برای کنترل سرعت یک انیمیشن می‌تواند به کاربران مبتلا به اختلالات دهلیزی کمک کند از بیماری حرکت جلوگیری کنند.

روش‌های محاسبه طول مسیر

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

1. جاوا اسکریپت و متد `getTotalLength()` SVG

مطمئن‌ترین و دقیق‌ترین روش شامل استفاده از جاوا اسکریپت و متد `getTotalLength()` است که در عناصر مسیر SVG موجود است. این متد طول کل مسیر را بر حسب واحدهای کاربر (معمولاً پیکسل) برمی‌گرداند.

مراحل:

1. تعبیه مسیر SVG: مسیر SVG را مستقیماً در HTML خود جاسازی کنید یا آن را به‌صورت خارجی بارگیری کنید.
2. دسترسی به عنصر مسیر: از جاوا اسکریپت برای انتخاب عنصر مسیر با استفاده از شناسه یا انتخابگر مناسب دیگر استفاده کنید.
3. فراخوانی `getTotalLength()`: متد `getTotalLength()` را روی عنصر مسیر فراخوانی کنید تا طول آن را بازیابی کنید.
4. ذخیره طول: مقدار طول برگشتی را در یک متغیر جاوا اسکریپت برای استفاده‌های بعدی ذخیره کنید.

مثال:

            
<svg width="200" height="200">
  <path id="myPath" d="M10,10 C20,20 40,20 50,10 A30,30 0 0 1 150,10 L190,190" stroke="black" fill="transparent"/>
</svg>

            

              
                Copy
              
            
          

            
const path = document.getElementById('myPath');
const pathLength = path.getTotalLength();

console.log('Path Length:', pathLength); // Output: The length of the path

            

              
                Copy
              
            
          

توضیحات:

• کد HTML شامل یک SVG است که حاوی یک عنصر <path> با شناسه "myPath" است. ویژگی d شکل مسیر را با استفاده از دستورات مسیر SVG تعریف می‌کند.
• کد جاوا اسکریپت عنصر مسیر را با استفاده از `document.getElementById('myPath')` انتخاب می‌کند.
• متد `path.getTotalLength()` طول کل مسیر را برمی‌گرداند که سپس در کنسول ثبت می‌شود.

مزایا:

• دقت: `getTotalLength()` دقیق‌ترین اندازه‌گیری از طول مسیر را ارائه می‌دهد.
• پشتیبانی از مرورگر: در مرورگرهای مدرن به‌خوبی پشتیبانی می‌شود.
• انعطاف‌پذیری: با مسیرهای SVG پیچیده، از جمله منحنی‌ها و کمان‌ها، کار می‌کند.

معایب:

• نیاز به جاوا اسکریپت: برای دسترسی به DOM SVG و فراخوانی متد، به جاوا اسکریپت نیاز دارد.
• وابستگی به SVG: فقط برای مسیرهای تعریف‌شده در داخل SVG اعمال می‌شود.

2. تقریب طول با جاوا اسکریپت

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

الگوریتم:

1. تعریف مسیر: مسیر را به‌عنوان مجموعه‌ای از نقاط یا یک تابع ریاضی نمایش دهید.
2. تقسیم به بخش‌ها: مسیر را به تعداد زیادی بخش کوچک تقسیم کنید.
3. محاسبه طول بخش‌ها: برای هر بخش، طول آن را با استفاده از فرمول فاصله (قضیه فیثاغورس) محاسبه کنید.
4. جمع طول‌ها: طول‌های همه بخش‌ها را جمع کنید تا طول کل مسیر را تقریب بزنید.

مثال (تقریب برای یک منحنی ساده):

            
function approximateCurveLength(curvePoints, segments) {
  let length = 0;
  for (let i = 0; i < segments; i++) {
    const t1 = i / segments;
    const t2 = (i + 1) / segments;

    // Assuming curvePoints is an array of control points for a Bezier curve
    const p1 = getPointOnBezierCurve(curvePoints, t1);
    const p2 = getPointOnBezierCurve(curvePoints, t2);

    const dx = p2.x - p1.x;
    const dy = p2.y - p1.y;
    length += Math.sqrt(dx * dx + dy * dy);
  }
  return length;
}

function getPointOnBezierCurve(curvePoints, t) {
  // Bezier curve calculation logic (implementation not shown for brevity)
  // Returns {x: number, y: number}
  // ... (implementation omitted)
}

// Example usage:
const curveControlPoints = [
  { x: 10, y: 10 },
  { x: 50, y: 100 },
  { x: 150, y: 50 },
  { x: 190, y: 190 },
];

const numberOfSegments = 1000;
const approximatedLength = approximateCurveLength(curveControlPoints, numberOfSegments);
console.log('Approximated Length:', approximatedLength);

            

              
                Copy
              
            
          

توضیحات:

• تابع `approximateCurveLength` یک آرایه از نقاط منحنی (نقاط کنترل برای یک منحنی Bezier در این مثال) و تعداد بخش‌هایی را که باید منحنی به آن تقسیم شود، می‌گیرد.
• تابع از طریق هر بخش تکرار می‌شود و نقاط را در ابتدا و انتهای بخش با استفاده از `getPointOnBezierCurve` محاسبه می‌کند. (پیاده‌سازی `getPointOnBezierCurve` برای اختصار حذف شده است، اما شامل محاسبات منحنی Bezier می‌شود).
• فاصله بین این دو نقطه با استفاده از قضیه فیثاغورس محاسبه می‌شود و این فاصله به طول کل اضافه می‌شود.
• متغیر `numberOfSegments` دقت تقریب را کنترل می‌کند. تعداد بیشتر بخش‌ها منجر به تقریب دقیق‌تری می‌شود، اما به محاسبات بیشتری نیز نیاز دارد.

مزایا:

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

معایب:

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

3. ویژگی `pathLength` CSS (منسوخ شده)

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

چرا منسوخ شده است:

• عدم سازگاری: ویژگی `pathLength` می‌تواند منجر به ناسازگاری در رندر در مرورگرهای مختلف و پیاده‌سازی‌های SVG شود.
• مفید بودن محدود: این ویژگی در درجه اول بر ترسیم خطوط و الگوهای خط تیره تأثیر می‌گذارد و یک راه‌حل عمومی برای محاسبه طول مسیر نبود.
• جایگزین‌های بهتر: متد `getTotalLength()` یک رویکرد قابل‌اعتمادتر و انعطاف‌پذیرتر ارائه می‌دهد.

مثال‌ها و موارد استفاده عملی

بیایید برخی از نمونه‌های عملی نحوه استفاده از محاسبه طول مسیر را در توسعه وب بررسی کنیم:

1. انیمیشن‌های همگام‌سازی‌شده

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

            
const car = document.getElementById('car');
const roadPath = document.getElementById('roadPath');
const progressBar = document.getElementById('progressBar');

const roadLength = roadPath.getTotalLength();

car.addEventListener('animationiteration', () => {
  // Reset the animation and progress bar when the animation repeats.
  car.style.offsetDistance = '0%';
  progressBar.style.width = '0%';
});

function updateProgressBar() {
  const carOffset = parseFloat(car.style.offsetDistance) / 100;
  const distanceTraveled = carOffset * roadLength;
  const progressPercentage = (distanceTraveled / roadLength) * 100;
  progressBar.style.width = progressPercentage + '%';
}

car.addEventListener('animationframe', updateProgressBar);

//CSS for setting up motion path animation on the car element. 
//This is just an example of how the car can be animated and it uses 'animationiteration' event

            

              
                Copy
              
            
          

در این مثال، ما طول `roadPath` را با استفاده از `getTotalLength()` دریافت می‌کنیم. در داخل تابع `updateProgressBar` (که باید توسط یک رویداد انیمیشن یا `requestAnimationFrame` فعال شود)، ما فاصله طی شده توسط ماشین را بر اساس `offset-distance` آن محاسبه می‌کنیم. سپس درصد پیشرفت مربوطه را محاسبه کرده و عرض نوار پیشرفت را به‌روز می‌کنیم.

2. مسیرهای حرکت تعاملی

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

            
const timelinePath = document.getElementById('timelinePath');
const eventMarkers = document.querySelectorAll('.event-marker'); // Assumes each event has a marker element.
const timelineLength = timelinePath.getTotalLength();

// Mock data
const eventData = [
  { distance: timelineLength * 0.2, description: 'Event 1 Description' },
  { distance: timelineLength * 0.5, description: 'Event 2 Description' },
  { distance: timelineLength * 0.8, description: 'Event 3 Description' }
];


timelinePath.addEventListener('click', (event) => {
  const clickX = event.offsetX;
  const clickY = event.offsetY;

  let closestEvent = null;
  let minDistance = Infinity;

  for (const event of eventData) {
    const distance = Math.abs(calculateDistanceFromClick(clickX, clickY, timelinePath, event.distance)); // Implement this function. Calculates the actual distance along the path. See Below!
    if (distance < minDistance) {
      minDistance = distance;
      closestEvent = event;
    }
  }

  // Display closest event information.
  if(closestEvent){
  console.log('Closest event:', closestEvent.description);
  //Update some HTML element here to show it (not shown)!
  }
});


function calculateDistanceFromClick(clickX, clickY, pathElement, targetDistance) {
    let closestPoint = findPointOnPathByDistance(pathElement, targetDistance);
    if(!closestPoint) return Infinity;

    const dx = clickX - closestPoint.x;
    const dy = clickY - closestPoint.y;
    return Math.sqrt(dx * dx + dy * dy);
}

function findPointOnPathByDistance(pathElement, distance) {
  // Use binary search to find the point on the path that corresponds to the given distance.
  // This can be implemented by progressively subdividing the path and calculating the distance 
  // to the midpoint.  If the distance to the midpoint is greater than the target distance, search
  // the first half of the path. Otherwise, search the second half.

  // (This is a complex function to implement, but it is much more precise than just sampling point across the entire path. The latter would be much more expensive in terms of performance.
  // An example (but potentially inefficient implementation) to find points and compute the actual coordinate (SVGPoint) would involve:
    // let point = pathElement.getPointAtLength(distance);
  
    //However that method above has performance issues if you do it many times because it forces the browser to re-render.
    //For this specific case, you'd want to compute a few of these, save them, and use them as reference points to interpolate among.
    //Returning `null` here to indicate that the point cannot be found.
    return null; // placeholder.
}



            

              
                Copy
              
            
          

در این مثال، ما یک شنونده رویداد کلیک را به `timelinePath` متصل می‌کنیم. هنگامی که کاربر کلیک می‌کند، ما فاصله از ابتدای مسیر تا نقطه کلیک را محاسبه می‌کنیم. سپس از طریق آرایه `eventData` (که مکان هر رویداد را در امتداد مسیر ذخیره می‌کند) تکرار می‌کنیم و نزدیک‌ترین رویداد را بر اساس فاصله محاسبه شده پیدا می‌کنیم. در نهایت، اطلاعات مربوط به نزدیک‌ترین رویداد را نمایش می‌دهیم.

3. الگوهای خط تیره پویا

می‌توانید جلوه‌های بصری جذابی را با متحرک‌سازی ویژگی‌های `stroke-dasharray` و `stroke-dashoffset` یک مسیر SVG بر اساس طول آن ایجاد کنید. این به شما امکان می‌دهد خطوط نقطه‌چینی را ایجاد کنید که به نظر می‌رسد خودشان در امتداد مسیر ترسیم می‌شوند.

            
<svg width="200" height="200">
  <path id="dashedPath" d="M10,10 C20,20 40,20 50,10 A30,30 0 0 1 150,10 L190,190" stroke="blue" stroke-width="3" fill="transparent"/>
</svg>

            

              
                Copy
              
            
          

            
const dashedPath = document.getElementById('dashedPath');
const pathLength = dashedPath.getTotalLength();

// Set initial dash array and offset.
dashedPath.style.strokeDasharray = pathLength;
dashedPath.style.strokeDashoffset = pathLength;

//Animate stroke-dashoffset to create the drawing effect
// Using CSS animations is usually much smoother than Javascript for these low-level properties.

// Example using CSS animations:
// Add this to your CSS:
// #dashedPath {
//  animation: drawLine 5s linear forwards;
// }

//@keyframes drawLine {
//  to {
//   stroke-dashoffset: 0;
//  }
//}

            

              
                Copy
              
            
          

در این مثال، ما طول `dashedPath` را دریافت می‌کنیم و `stroke-dasharray` را برابر با طول مسیر تنظیم می‌کنیم. ما همچنین `stroke-dashoffset` را در ابتدا روی همان مقدار تنظیم می‌کنیم. با متحرک‌سازی `stroke-dashoffset` از طول مسیر به 0، ما این تصور را ایجاد می‌کنیم که خط نقطه‌چین خود در امتداد مسیر ترسیم می‌شود. سپس این را می‌توان با مقادیر و افست‌های دیگر همانطور که می‌خواهید تنظیم و سفارشی کرد.

ملاحظات پیشرفته

1. بهینه‌سازی عملکرد

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

• ذخیره طول مسیر: طول مسیر را یک بار محاسبه کرده و آن را در یک متغیر برای استفاده مجدد ذخیره کنید. از محاسبه مجدد طول مگر اینکه مسیر تغییر کند، خودداری کنید.
• محاسبات De-bounce یا Throttle: اگر محاسبات طول مسیر توسط ورودی کاربر یا رویدادها فعال می‌شوند، از de-bouncing یا throttling برای محدود کردن دفعات محاسبات استفاده کنید.
• ساده‌سازی مسیرها: مسیرهای پیچیده را ساده کنید تا تعداد بخش‌ها و محاسبات مورد نیاز را کاهش دهید.
• استفاده از شتاب سخت‌افزاری: اطمینان حاصل کنید که انیمیشن‌ها با استفاده از transform CSS و opacity، از نظر سخت‌افزاری شتاب‌دهی شده‌اند.

2. مسیرهای پاسخگو

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

            
const path = document.getElementById('responsivePath');

function updatePathLength() {
  const pathLength = path.getTotalLength();
  // Use pathLength for animations or calculations.
  console.log("pathLength: " + pathLength);
}

window.addEventListener('resize', updatePathLength);

// Initial calculation on page load.
updatePathLength();

            

              
                Copy
              
            
          

3. دسترسی‌پذیری

اطمینان حاصل کنید که انیمیشن‌ها با استفاده از مسیرهای حرکت برای همه کاربران قابل دسترس هستند:

• ارائه جایگزین‌ها: راه‌های جایگزینی را برای دسترسی به اطلاعات منتقل‌شده توسط انیمیشن، مانند توضیحات متنی یا عناصر تعاملی، ارائه دهید.
• احترام به ترجیحات کاربر: به ترجیحات کاربران برای کاهش حرکت (با استفاده از پرس و جو رسانه `prefers-reduced-motion`) احترام بگذارید. اگر کاربر حرکت کمتری را ترجیح می‌دهد، انیمیشن را غیرفعال یا ساده کنید.
• استفاده از سرنخ‌های بصری واضح و ثابت: از سرنخ‌های بصری واضح و ثابت برای نشان دادن هدف و وضعیت انیمیشن استفاده کنید. از انیمیشن‌هایی که حواس‌پرتی یا جهت‌گیری را مختل می‌کنند، خودداری کنید.
• تست با فناوری‌های کمکی: انیمیشن‌های خود را با فناوری‌های کمکی، مانند صفحه‌خوان‌ها، تست کنید تا اطمینان حاصل کنید که برای کاربران دارای معلولیت قابل دسترسی هستند.

کتابخانه‌ها و ابزارهای جایگزین مسیر حرکت

چندین کتابخانه و ابزار جاوا اسکریپت می‌توانند ایجاد و مدیریت مسیرها و انیمیشن‌های حرکت CSS را ساده کنند:

• پلتفرم انیمیشن GreenSock (GSAP): یک کتابخانه انیمیشن قدرتمند و همه‌کاره که ویژگی‌های پیشرفته‌ای را برای ایجاد انیمیشن‌های پیچیده مسیر حرکت فراهم می‌کند. GSAP پلاگین‌هایی را برای ترسیم روی مسیرهای SVG و کنترل دقیق زمان‌بندی و سهولت انیمیشن ارائه می‌دهد.
• Anime.js: یک کتابخانه انیمیشن جاوا اسکریپت سبک وزن با یک API ساده و شهودی. Anime.js از انیمیشن‌های مسیر حرکت، لکه‌گذاری و توابع سه‌ولت مختلف پشتیبانی می‌کند.
• Velocity.js: یک موتور انیمیشن که عملکرد بالایی را ارائه می‌دهد و طیف گسترده‌ای از جلوه‌های انیمیشن را دارد. Velocity.js از انیمیشن‌های مسیر حرکت پشتیبانی می‌کند و به‌طور یکپارچه با jQuery ادغام می‌شود.
• Mo.js: یک کتابخانه گرافیک حرکتی اعلانی برای وب. Mo.js به شما امکان می‌دهد انیمیشن‌های پیچیده و تعاملی را با استفاده از یک API ماژولار و قابل توسعه ایجاد کنید.
• ScrollMagic: یک کتابخانه جاوا اسکریپت که به شما امکان می‌دهد انیمیشن‌ها را بر اساس موقعیت پیمایش کاربر فعال کنید. ScrollMagic می‌تواند برای ایجاد انیمیشن‌های مسیر حرکت مبتنی بر اسکرول و تجربه‌های تعاملی استفاده شود.

نتیجه‌گیری

محاسبه طول مسیرهای حرکت CSS برای ایجاد انیمیشن‌های وب دقیق، پاسخگو و دسترس‌پذیر ضروری است. با درک روش‌ها و تکنیک‌های مختلف مورد بحث در این مقاله، می‌توانید پتانسیل کامل مسیرهای حرکت را باز کنید و تجربه‌های وب بصری جذاب و تعاملی ایجاد کنید. چه تصمیم بگیرید از جاوا اسکریپت و `getTotalLength()` برای دقت استفاده کنید یا طول را با کد سفارشی تقریب بزنید، توانایی اندازه‌گیری فواصل مسیر به شما این امکان را می‌دهد که انیمیشن‌های خود را تنظیم کنید و تجربه‌های کاربری استثنایی را در همه دستگاه‌ها و پلتفرم‌ها ارائه دهید. قدرت مسیرهای حرکت را در آغوش بگیرید و طرح‌های وب خود را با انیمیشن‌های جذاب و معنادار ارتقا دهید.