عنصر التحريك لـ SVG <Animation>

عنصر <Animation> لحركة SVG يستخدم لإنشاء حركات للرسومات SVG. تم تعريف العنصر في البداية في لغة تكامل وسائط متعددة (SMIL). في الحركة، يجب تحديد الخصائص، الحركة، الألوان، وقت بدء الحركة ووقت استمرار الحركة.

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

مثال على حركة SVG

هذا مثال بسيط على حركة SVG:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect x="10" y="10" height="110" width="110"
　　　　　　　　　style="stroke:#ff0000;　fill:　#0000ff">
　　　　　　　　<animateTransform
　　　　　　　　　　　　attributeName="transform"
　　　　　　　　　　　　begin="0s"
　　　　　　　　　　　　dur="20s"
　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　from="0 60 60"
　　　　　　　　　　　　to="360 60 60"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　/>
　　　　</rect>
</svg>

لاحظ كيف يتم دمج علامة <rect> داخل علامة <animateTransform>. هذا العنصر هو الذي يجعل الشكل مستطيلاً.

هذا هو SVG الحركة المولد:

ملخص خيارات الحركة

يتم إنتاج الحركة من خلال تحريك خصائص الشكل مع مرور الوقت. يمكنك القيام بذلك باستخدام واحد أو أكثر من عناصر SVG للتحرك الخمسة:

1. <set>

2. <animate>

3. <animateColor>

4. <animateTransform>

5. <animateMotion>

كل علامة من علامات SVG للتحرك تضبط أو تضبط مختلف جوانب شكل SVG. سيتم شرح هذه العلامات في باقي المقال.

set

هذه العلامة set هي أبسط علامة من عناصر SVG للتحرك. بعد فترة زمنية معينة، يضبطها فقط على قيمة معينة. لذلك، لن يتم تحريك الشكل بشكل مستمر، بل سيتم تغيير قيمة الخاصية مرة واحدة فقط.

هذا هو مثال على علامة <set>:

<svg width="500" height="100"><circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">
　　　　<set　attributeName="r"　attributeType="XML"
　　　　　　　　　to="100"
　　　　　　　　　begin="0s"　　/>
</circle></svg>

لاحظ أن علامة <set> مدمجة داخل علامة circle. هذا هو الطريقة التي يتم تطبيق علامة <set> على الشكل - من خلال دمجها داخل عنصر SVG الذي يتم تطبيقه.

تعيين قيمة الخاصية في علامة <set> في وقت معين. يتم تحديد اسم الخاصية في الخاصية attributeName. يتم تحديد القيمة التي يتم تعيينها في الخاصية to. يتم تحديد وقت تعيين القيمة في الخاصية begin.

النموذج السابق يضبط الخاصية r على 100 بعد 5 ثوانٍ. تأثير الصورة بعد تشغيلها:

attributeType

النموذج السابق يحتوي أيضًا على خاصية attributeType في علامة <set>. تم تعيين القيمة على XML. هذا لأن الخاصية التي يتم تعيينها قيمتها (الخصائص r) هي الخاصية لشكل SVG Circle. لأن عناصر SVG هي عناصر XML، فإن خصائص SVG هي خصائص XML.

يمكنك أيضًا تعيين تأثير الحركة للخصائص CSS للشكل. إذا قمت بذلك، فيجب إعداد attributeType على CSS. إذا لم تقدم الخاصية attributeType، فإن المتصفح سيحاول التنبؤ بالخصائص التي ستتم حركتها كخصائص XML أو CSS.

animate

يستخدم عنصر animate لتحريك خصائص SVG shapes. يمكنك دمج عنصر animate داخل الشكل الذي تريد تطبيقه عليه. إليك مثال:

<svg width="500" height="100"><circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">
　　　　<animate attributeName="cx" attributeType="XML"
　　　　　　　　　　　　　من="30" إلى="470"
　　　　　　　　　　　　　begin="0s" dur="5s"
　　　　　　　　　　　　　fill="remove" repeatCount="indefinite"/>
</circle></svg>

هذا المثال يوضح تحريك خاصية cx العنصر <circle> من القيمة 30 (ملحق from) إلى القيمة 479 (ملحق to). يبدأ التحريك من 0 ثانية (ملحق begin) ويستمر لمدة 5 ثواني (ملحق dur).

بعد اكتمال التحريك، سيتم تعيين خاصية التحريك إلى قيمتها الأصلية (ملحق fill=“remove”) إذا كنت ترغب في الحفاظ على خاصية التحريك على قيمة to-value، قم بتعيين خاصية fill إلى “freeze”. التحريك يمكن أن يتم تكراره إلى الأبد (ملحق repeatCount).

هذه هي الرسوم المتحركة التي تم إنشاؤها:

animateTransform

عنصر <AnimateTransform> يمكنه تعيين تحريك خاصية Transform للشكل. العنصر <Animate> لا يمكنه القيام بذلك.

هذا هو مثال:

<svg width="500" height="100"><rect x="20" y="20" width="100" height="40"
　　　　style="stroke: #ff00ff; fill:none;" >
　　<animateTransform　attributeName="transform"
　　　　　　　　　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　　　　　　　　　من="0 100 100" إلى="360 100 100"
　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　/>
</rect></svg>

هذا مثال <animateTransform> يوضح عملية التحريك التفاعلي للأصفاف المدمجة في خاصية transform من <rect>. تم تعيين خاصية type إلى rotate (وظيفة التحريك الدائري)، مما يعني أن التحريك سيكون دورانيًا. يتم تحديد المعلمات في خصائص from وto للتحريك، ويتم نقلها إلى دالة rotate. هذا المثال يدور حول النقطة 100,100 من 0 درجة إلى 360 درجة.

هذا مثال على تحويل نسبة المربع بشكل ديناميكي:

<svg　width="500"　height="200">
　　　　<rect　x="20"　y="20"　width="40"　height="40"
　　　　　　　　　　style="stroke:　#ff00ff;　fill:　none;"　>
　　　　　　　　<animateTransform　attributeName="transform"
　　　　　　　　　　　　　　　　　　　　　　　　　　type="scale"
　　　　　　　　　　　　　　　　　　　　　　　　　　from="1 1"　to="2 3"
　　　　　　　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　　　　　　</animateTransform>
　　　　</rect>
</svg>

لاحظ مرة أخرى، تحتوي خصائص from و to على القيم التي يتم نقلها عادةً إلى دالة التحويل scale().

هذه هي الرسوم المتحركة التي تم إنشاؤها:

animateMotion (حركة الرسم)

<animateMotion> العنصر يمكنه أن يتحرك على طول المسار ويدير الشكل ليتوافق مع ميل المسار، مثل السيارة التي تسير على الجبل. إليك مثال:

<svg　width="500"　height="150">
　　　　<path　d="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　style="stroke:　#000000;　fill:　none;"
　　　　　　　　　　　　</path>
　　　　<rect　x="0"　y="0"　width="30"　height="15"
　　　　　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　　　　　<animateMotion
　　　　　　　　　　　　　　　　path="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　　　　　　　begin="0s"　dur="10s"　repeatCount="indefinite"
　　　　　　　　　　　　　　　　</animateMotion>
　　　　</rect>
</svg>

يحدد العنصر path مسار الرسم البياني داخل خاصية العنصر <animateMotion>. يستخدم هذا العنصر خاصية path بنفس الطريقة التي يستخدمهاعنصر pathنفس الجملة.

هذا هو الرسم المتولد للمسار، مما يسمح لك بمتابعة الحركة بشكل أفضل.

للدوران المربع ليتوافق مع ميل المسار، قم بتعيين خاصية rotate لـ <animateMotion> إلى auto. إليك مثال:

<svg　width="500"　height="150">
　　　　<path　d="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　style="stroke:　#000000;　fill:　none;"></path>
　　　　<rect　x="0"　y="0"　width="30"　height="15"
　　　　　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　　　　　<animateMotion
　　　　　　　　　　　　　　　　path="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　　　　　　　begin="0s"　dur="10s"　repeatCount="indefinite"
　　　　　　　　　　　　　　　　rotate="auto"
　　　　　　　　　　　　　　　</animateMotion>
　　　　</rect>
</svg>

هذا هو الرسم المتولد. لاحظ كيف يغير السيناريو دوران المربع لتتوافق مع المسار.

يمكنك أيضًا تعيين خاصية rotate إلى قيمة محددة، مثل 20 أو 30 وما إلى ذلك. بهذا يمكن للشكل أن يدور بناءً على هذه الزاوية خلال كل حركة الرسم.

وحدة الوقت

عند تعريف رسوم متحركة SVG، يمكنك تحديد وقت بدء الرسوم المتحركة ومده. عند تحديد، يمكنك اختيار وحدة الزمن المختلفة. يتم تحديد begin، dur و end في خصائص عدة عناصر رسوم متحركة داخل وحدات الزمن المختلفة.

في هذه الخصائص، يمكنك تحديد عدد، يتبعه وحدة من الزمن، مثل مثال هذا النص. على سبيل المثال، 5s5 ثانية. إليك قائمة بالوحدات الزمنية التي يمكنك استخدامها:

يمكنك أيضًا تحديد الوقت بتنسيق يحتوي على ساعات، دقائق وثواني. التنسيق كما يلي:

hh:mm:ss

هذا هو مثال:

1:30:45

هذا المثال يحدد وقتًا قدره 1 ساعة و30 دقيقة و45 ثانية (بالطبع هذا وقت طويل جدًا بالنسبة للرسوم المتحركة).

سينكبدء الرسوم المتحركة

يمكنك سينكبدء رسوم متحركة واحدة مع نهاية أخرى. مثل ما يلي:

<svg　width="500"　height="100">
<rect　x="0"　y="0"　width="30"　height="15"
　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　<animate　id="one"　attributeName="x"　attributeType="XML"
　　　　　　　　　　　　　from="0"　to="400"
　　　　　　　　　　　　　begin="0s"　dur="10s"　fill="freeze"
　　　　　　　　　　</animate>
　　　　<animate　attributeName="y"　attributeType="XML"
　　　　　　　　　　　　from="0"　to="50"　begin="one.end"　dur="10s"　fill="freeze"
　　　　　　　　　　</animate>
</rect>
　　　　</svg>

هذه هي الرسوم المتحركة التي تم إنشاؤها:

تم تعيين خاصية id للرسوم المتحركة الأولى إلى one.

الرسوم المتحركة الثانية تشير إلى الرسوم المتحركة الأولى من خلال خاصية begin. يتم تعيين قيمة خاصية begin لهذه الرسوم المتحركة إلى one.end، مما يعني أن هذه الرسوم المتحركة يجب أن تبدأ عند انتهاء الرسوم المتحركة التي تحمل ID one.

عند بدء أو انتهاء رسوم متحركة أخرى، يمكنك بدء الرسوم المتحركة باستخدام id.begin أو id.end. بدلاً من استخدام id، يمكنك استخدام ID عنصر الرسوم المتحركة للتوافق.

يمكنك أيضًا تحديد الزيادة في وقت بدء أو انتهاء رسوم متحركة أخرى، مثل ما يلي:

one.begin+10s
one.end+5s

بالإضافة إلى ذلك، يمكنك تحديد وقت انتهاء واضح في خاصية end للرسوم المتحركة. لن يبدل هذا خاصية dur. ما يفعله هو إضافة نهاية أخرى ممكنة في الرسوم المتحركة، لذا يتم اعتماد الذي يحدث أولاً.

<animate
　　　　　　　　attributeName="y"　attributeType="XML"
　　　　　　　　from="0"　to="50"
　　　　　　　　begin="one.begin+3s"　dur="10s"　end="one.end"
　　　　　　　　fill="freeze"
　　　　　　　　/>

مدة هذا التحريك هي 10 ثانية، أو يتوقف عند انتهاء التحريك الذي يحمل ID one، اعتمادًا على الأول الذي يصل.

تكرار التحريك

يمكنك استخدام خصائصين داخل عنصر التحريك لتكرار التحريك.

الخصائص الأولى هي repeatCount. داخل هذه الخاصية، يمكنك تعيين عدد، حيث سيتم تكرار التحريك هذا العدد من المرات، أو indefinite لجعل التحريك يستمر دون توقف.

الخصائص الثانية هي repeatDur، حيث يحدد المدة التي يجب فيها تكرار عرض التحريك. يمكنك أيضًا استخدام قيمة indefinite في repeatDur لتحقيق نفس تأثير استخدام قيمة repeatCount.

هذه هي أمثالان:

<animate
　　　　　　　　attributeName="y"　attributeType="XML"
　　　　　　　　from="0"　to="50"
　　　　　　　　begin="one.begin+3s"　dur="10s"
　　　　　　　　repeatCount="3"
　　　　　　　　fill="freeze"
　　　　　　　　/>

<animate
　　　　　　　　attributeName="y"　attributeType="XML"
　　　　　　　　from="0"　to="50"
　　　　　　　　begin="one.begin+3s"　dur="10s"
　　　　　　　　repeatDur="30s"
　　　　　　　　fill="freeze"
　　　　　　　　/>

دمج التحريكات

يمكنك استخدام <animation> لقائمة عدة تحريكات داخل العنصر لتجميع التحريكات. رأيت ذلك، ولكن هذا مثال آخر:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
<rect　x="10"　y="10"　width="40"　height="20"
　　　　　style="stroke:　#000000;　fill:　none;">
　　　<animate　attributeName="x"
　　　　　　　　　　　　attributeType="XML"
　　　　　　　　　　　　from="10"　to="400"
　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　</animate>
　　　<animate　attributeName="y"
　　　　　　　　　　　　attributeType="XML"
　　　　　　　　　　　　from="10"　to="100"
　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　fill="freeze"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　</animate>
</rect>
</svg>

في هذا المثال، هناك تحريكان، كل تحريك يضبط خصائص x و y للرسم البياني. هذا هو التحريك الناتج:

عند تجميع عنصر <animateTransform>، السلوك الافتراضي هو أن التحريك الثاني يلغي التحريك الأول. ولكن، يمكنك دمج تحريكات التحويل من خلال إضافة خصائص additive و sum إلى عنصري <animateTransform>. هذا مثال:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><rect　x="10"　y="10"　width="40"　height="20"
　　　　　　style="stroke:　#000000;　fill:　none;">
　　　　<animateTransform　attributeName="transform"　attributeType="XML"
　　　　　　　　　　　　　　　　　　　　　　type="scale"
　　　　　　　　　　　　　　　　　　　　　　from="1"　to="3"
　　　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　　　　additive="sum"
　　　　　　　　　　　　</animateTransform>
　　　　<animateTransform　attributeName="transform"　attributeType="XML"
　　　　　　　　　　　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　　　　　　　　　　　from="0　30　20"　to="360　30　20"
　　　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　　　fill="freeze"
　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"　additive="sum"
　　　　　　　　　　　　</animateTransform>
</svg>

هذا هو تأثير التكبير واللفة لمستطيل: