إضافة animation لsvg في ريآكت

ما تريده هو إضافة الـ animation إلى path.wheel، و يمكنك بذلك باستخدام خواص الـ CSS الخاصة بالـ stroke-dasharray و stroke-dashoffset مع الـ keyframes.

حيث سيتم ربط الـ stroke-dasharray بطول الـ path والـ stroke-dashoffset سيتم استخدامه لتحديد موقع بدء الـ path.

حاول تجربة الكود التالي:

.wheel {
  stroke-dasharray: 80, 250; /* قيمة الطول الإجمالي للـ path وهي 250px */
  stroke-dashoffset: 0;
  animation: scoll 2s ease infinite;
}

@keyframes scoll {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -250; /* سيتم تحريك الـ path بطولها الإجمالي باتجاه الأعلى 250px */
  }
}

لاحظ أن stroke-dasharray تأخذ مجموعة من الأرقام، وتحدد القيمة الأولى طول الـ dash (الخط المتقطع) والقيمة الثانية طول الـ gap (الفراغ)، وفي المثال تم استخدام 80 لطول الـ dash و 250 لطول الـ gap، والطول الإجمالي للـ path هو 250، بمعنى آخر، يتم رسم dash بطول 80، ثم رسم gap بطول 250 وهكذا.

وفي keyframes يتم تحريك الـ stroke-dashoffset من 0 إلى -250، وهذا يعني أن الـ path سيتحرك باتجاه الأعلى بمقدار طول الـ path الإجمالي (250)، وسيتم تكرار هذه الحركة بلا نهاية باستخدام infinite في الـ animation.

أظنك تحاول تحريك المسار (path) بالاسم (wheel) باستخدام تحريك CSS، ولكن الطريقة الصحيحة لتحريك عناصر SVG هي باستخدام تحريكات (animations) SVG.

اذ يمكنك استخدام العنصر <animateTransform> لتحريك المسار بشكل دائم.

قم بإضافة العنصر <animateTransform> داخل العنصر <path> الخاص بـ wheel وحدد الخاصية التي تريد تحريكها (في هذه الحالة transform) والقيمة التي تريد تحريكها (في هذه الحالة translateY). على سبيل المثال:

<path
  class="wheel"
  d="M123.359,79.775l0,72.843"
  style="fill:none;stroke:#000;stroke-width:20px;"
  id="wheel"
>
  <animateTransform
    attributeName="transform"
    attributeType="XML"
    type="translate"
    from="0 0"
    to="0 72.843"
    dur="2s"
    repeatCount="indefinite"
  />
</path>

يحب أن تحدد الخاصية attributeType كـتوصيف XML وليس CSS، والحد الأدنى الذي يجب تعيينه هو type (translate, scale, rotate أو skew). يمكنك تغيير القيمة to و dur حسب احتياجاتك.

يمكنك تكرار العملية نفسها لتحريك المسار الآخر وتطبيق أي تحريكات أخرى على أي عناصر داخل الـ SVG.

عند تحريك عنصر مسار (path) في SVG يفضل استخدام JavaScript بدلاً من CSS. يمكن استخدام مكتبة JavaScript مثل GreenSock (GSAP) أو anime.js لتحقيق ذلك بسهولة.

فيما يلي مثال يوضح كيفية تحريك عنصر مسار (path) في SVG باستخدام GreenSock:

HTML:

<svg width="200" height="200">
  <path id="myPath" d="M10 10 H 90 V 90 H 10 L 10 10" stroke="black" stroke-width="2" fill="none" />
</svg>

JavaScript:

// تحديد العنصر path الذي يراد تحريكه
const myPath = document.querySelector('#myPath');

// تحديد مسار الحركة الذي يراد تطبيقه على العنصر path
const motionPath = MorphSVGPlugin.pathDataToBezier(myPath.getAttribute('d'), {align: myPath});

// تحديد مدة وتأخير الحركة
const tl = gsap.timeline({repeat: -1, yoyo: true, delay: 1});
tl.to('#myCircle', {
  duration: 2,
  motionPath: {
    path: motionPath,
    align: myPath,
    autoRotate: true
  }
});

تتضمن هذه الحركة تحريك دائرة (circle) على طول مسار الـ path. يتم استخدام `MorphSVGPlugin` من GSAP لتحويل مسار الـ path المحدد إلى مسار منحنى يمكن استخدامه في تحريك الدائرة. يتم تطبيق الحركة باستخدام `motionPath` من GSAP، حيث يتم تحديد المسار الذي يجب على الدائرة اتباعه.

يمكن تعديل قيم `duration` و `delay` و `repeat` و `yoyo` و `autoRotate` حسب الحركة التي تريدها.

إذا كنت تريد استخدام العديد من ال animation يفضل استخدام مكتبة GSAP حيث توفر هذه المكتبة العديد من مميزات الرائعة وتسهل عليك تنفيذ ال animation بشكل كبير