الرسوم المتحركة باستخدام CSS

عناصر الموضوع

1- مفهوم الأنيميشين.

2- أساسيات الأنيميشين.

3- عناصر الرسوم المتحركة Animations.

4- خصائص الحركة Animation Properties.

5- استخدام حركات CSS.

6- مزايا حركات CSS.

7- ضبط الحركات.

8- تحديد تسلسل الحركات باستخدام الإطارات المفتاحية.

الرسوم المتحركة باستخدام CSS, في الماضي عند ظهور إعداد مواقع الويب كانت المواقع محددة فقط على النصوص لتبيين الفكرة فقط، ومع الوقت صار رؤية الصور والفيديوهات والوسائط المتنوعة وتنظيم المواقع ومراعاة التصميم لتبدو المواقع على نحو عصري أكثر من الأول.

وكانت لغة أل CSS هي القائدة عن كل هذا وأكثر، ولكن مع الوقت والتطور المستدام في اللغات والتكنولوجيا المستعملة في تقدم الويب عرفت كيفية تنفيذ الرسوم المتحركة باستخدام CSS. بينما نشأت خاصية في ال CSS مرتبطة بتنقل العناصر داخل الصفحة، وأطلق عليها Animation وبالتالي قد عرف كيفية تنفيذ الرسوم المتحركة باستخدام CSS.

1- مفهوم الأنيميشين

• الأنيميشين (Animations) نشأتها جعل خصائص العنصر تتبدل بالتدريج عبر مدة زمنية معينة، وعلى نحو تلقائي الأمر الذي يبين أنك تستطع على إظهار مؤثرات حركية مدهشة في صفحات الويب.
• تستطع تزويد أنيميشين أو مؤثرات المرئية لأي عنصر في الصفحة لتبينه على النحو الذي ترغبه، فمثلاً تستطع جعل لونه يتبدل كل مدة محددة، جعله يتنقل أو يلف أو يثقب، جعله يظهر، ويختفي وغيرها من الأشياء التي تقدر فعلها.
• في هذا المقال ستتعرف إلى كافة الخصائص الآتية التي عن طريقها تستطيع تزويد أنيميشين للعنصر والتحكم به:
• @keyframes animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-timing-function animation

2- أساسيات الأنيميشين

لتزويد أنيميشين للعنصر يستلزم عليك عمل خطوتين رئيستان وهما:

• تعريف الأنيميشين اسمه، وما هي القيم التي تتبدل فيه.
• تطبيق الأنيميشين على العنصر وتعيين المدة التي سيحدث خلالها. [1]

3- عناصر الرسوم المتحركة Animations

آل Animations معناها الرسوم المتحركة، بينما يتم تشييد الرسوم المتحركة عن طريق أل CSS وتزويدها في المواقع يتم استعمال شيئين أساسيان وهما:

أ- الخاصية @keyframes:

وهي العنصر الرئيسي عن تنقل أي عنصر ترغب تحريكه، ولا يستطع الاستغناء عنها، ويتم كتابتها مثل الآتي:

{} keyframes theName@

ب- خصائص الحركة Animation Properties:

وهي خصائص متنوعة كل خاصية تعمل بمهمة متنوعة، وسوف نظهر كل خاصية مع مثال للتوضيح.

4- خصائص الحركة Animation Properties

تكتب خواص الحركة ضمن العنصر المرغوب تنقله، وليس بداخل الخاصية @keyframes، وهذه هي أبرز خصائص الحركة وأكثرها استعمالا.

• خاصية الإسم animation-name
• خاصية الوقت animation-duration
• خاصية التأخير animation-delay
• عدد التكرارات animation-iteration-count
• خاصية ضبط الإتجاه animation-direction
• خاصية animation-fill-mode
• كل خاصية لها استعمال متنوع مثل animation-name هو كما ظاهر تقوم بتحديد إسم للعنصر، و animation-delay هو تأخير لوقت تفعيل العنصر. [2]

5- استخدام حركات CSS

• تسمح حركات CSS تفعيل التحوُّلات من نمط CSS لآخر.
• تحتوي الحركات على عنصرين، نمط CSS يوضحها، وعدة من الإطارات المفتاحية التي تدل على حالتي البداية والنهاية لنمط الحركة.

6- مزايا حركات CSS

يوجد امتيازات رئيسة لحركات CSS خلال تكنولوجيا الرسوم المتحركة التقليدية (script-driven):

• بساطة الاستعمال للحركات السلسة؛ تستطع إعدادها من دون داع إلى معرفة بِ
• تشغل الحركات على نحو جيد، حتى في ظل تنزيل النظام العادي.
• من المحتمل أن يصبح عمل الحركات السلسة ضعيفًا باستعمال JavaScript ما لم تصبح جيدة الصنع. بينما يستطع للمحرك المصيِّر استعمال تكنولوجيا تعدي الإطار frame-skipping وغيرها من التكنولوجيا للمحافظة على الأداء السهل قدر المستطاع.
• الإتاحة للمتصفح بالتحكم في ترتيب الحركات ما يسمح للمتصفح تعزيز الأداء والكفاءة، على سبيل المثال، خفض وتيرة تقدم الحركات التي تشغل في علامات التبويب، وهي غير مبينة في مشهد المستعمل الحالي.

7- ضبط الحركات

• لإعداد ترتيب حركات CSS، تستطع تهيئة العنصر الذي ترغب تنقله في استعمال الخاصية animation أو خصائصها الفرعية.
• يسمح لك ذلك تنظيم التوقيت والمدة والتفاصيل الأخرى لطريقة عمل تنظيم الحركات.
• ينظم الظهور الحقيقي للحركة باستعمال قاعدة keyframes@ كما هو مبين في تعريف ترتيب الحركة باستعمال الإطارات المفتاحية أدناه.

الخاصيات الفرعية للخاصية animation هي:

1- animation-name

تستخدم لتعيين أسماء الحركات التي ستنفذ على العنصر، وكل اسم لا بد أن يُشير إلى قاعدة ‎@keyframesالتي تُعرِّف قيم الخاصيات الضرورية للحركة.

2- Animation-duration

تخصص الزمن الواجب لإكمال دورة شاملة من الحركة.

3- Animation-timing-function

تستخدم لوصف طريقة تأثر القيم الوسطية لخاصيات CSS بالحركة، أي أنها تتيح لك بتعيين ما هو منحني التسارع acceleration curve للحركة في أثناء دورة واحدة.

4- animation-delay

تستعمل لتخصيص التأخير بين وقت تنزيل العنصر وبداية ترتيب الحركة.

5- animation-iteration-count

تستخدم لتعيين عدد مرات إعادة الحركة؛ تستطع عن طريقها تخصيص إعادة لا نهائية للحركة خلال الكلمة المفتاحية infinite.

6- Animation-direction

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

7- Animation-fill-mode

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

8- Animation-play-state

تسمح وقف وتشغيل تسلسل الحركة.

8- تحديد تسلسل الحركات باستخدام الإطارات المفتاحية

• بمجرد تعيين توقيت الحركة، ستتطلب إلى تعيين مظهرها. بينما يحدث ذلك بوساطة إعداد إطارين مفتاحيّين أو أكثر باستعمال قاعدة ‎@keyframes. يصور كل إطار مفتاحي طريقة يستلزم أن يبين العنصر المتنقل في وقت محدد خلال تسلسل الحركة.
• وفقا لتعيين موعد الحركة في نمط CSS الذي يعمل بإعداد الحركة، تستعمل الإطارات المفتاحية القيمة <percentage> للدلالة على الوقت الذي يتم فيه ترتيب الحركة.
• تدل النسبة 0٪ إلى اللحظة الأولى لظهور تسلسل الحركة، ولكن تدل النسبة 100٪ إلى الحالة النهائية للحركة.
• لأن هاتين الخطوتان مهمتان للغاية، فيمتلكان أسماء مستعارة بالأخص: من from، وإلى to، كلاهما اختياري؛ فإذا لم يحدث تعيين البداية (خلال from أو ‎0%‎) أو النهاية (خلال to أو ‎100%‎) فإن المتصفح يشرع أو يُنهي الحركة باستعمال القيم المحسوبة لكل الخاصيات.
• تستطع اختياريًا إدخال إطارات مفتاحية تزايدي تصف المراحل الوسيطة بين بداية ونهاية الحركة. [3]

وفي الختام، تستطع استعمال لغة الأنماط الانسيابية CSS في إعداد رسوم تنقلية سهلة، من دون داع إلى شيفرة JavaScript إطلاقًا، لكن تستطع بالتأكيد استعمال JavaScript للتحكم برسوم CSS المتحركة وجعلها أحسن بكتابة القليل من الشيفرة.

• harmashCSS -بتصرف
• iktechnالرسوم المتحركة CSS Animations، شرح لكيفية تحريك العناصر في مواقع الويب -بتصرف
• wiki.hsoubاستخدام حركات CSS -بتصرف

مشاركة المقال

وسوم