الصور المتحركة

تُعد الرسوم المتحركة طريقة رائعة لتسليط الضوء على العناصر التفاعلية وإضافة الاهتمام والمتعة إلى تصميماتك. في هذه الوحدة، تعرَّف على طريقة إضافة تأثيرات الصور المتحركة والتحكّم فيها باستخدام CSS.

في بعض الأحيان، ترى بعض المساعدين على الواجهات، والتي عند النقر عليها، تقدّم بعض المعلومات المفيدة حول هذا القسم المحدد. تحتوي هذه الإعلانات غالبًا على صورة متحركة نابضة بالحياة تُعلمك ببراعة بأنّ المعلومات متوفّرة ويجب التفاعل معها. كيف يمكنك استخدام CSS على الرغم من ذلك؟

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

ما هو الإطار الرئيسي؟

في برامج الصور المتحركة وCSS ومعظم الأدوات الأخرى التي تمكّنك من تحريك شيء ما، الإطارات الرئيسية هي الآلية التي تستخدمها لتعيين حالات الرسوم المتحركة للطوابع الزمنية، على طول مخطط زمني.

لنستخدم "pler" (النبض) كسياق لذلك. يتم تشغيل الرسوم المتحركة بالكامل لمدة ثانية واحدة ويتم تشغيلها على حالتين.

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

@keyframes

لقد تعرفت الآن على الإطار الرئيسي، ومن المفترض أن تساعدك هذه المعرفة في فهم آلية عمل قاعدة CSS @keyframes. إليك قاعدة أساسية بحالتين.

@keyframes my-animation {
    from {
        transform: translateY(20px);
    }
    to {
        transform: translateY(0px);
    }
}

الجزء الأول الذي يجب ملاحظته هو المعرف المخصص (المعرف المخصص)—أو بعبارات إنسانية، اسم قاعدة الإطارات الرئيسية. معرِّف هذه القاعدة هو my-animation. يعمل المعرّف المخصّص مثل اسم الدالة. وكما علمت في وحدة الدوال، يتيح لك الرجوع إلى قاعدة الإطارات الرئيسية في مكان آخر في رمز CSS.

داخل قاعدة الإطارات الرئيسية، يمثّل كل من from وto كلمتَين رئيسيتَين 0% و100%، وهما بداية الصورة المتحركة ونهايتها. يمكنك إعادة إنشاء القاعدة نفسها على النحو التالي:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

يمكنك إضافة أي عدد تريده من المواضع على طول الإطار الزمني. باستخدام سياق مثال "معامل النبض"، تظهر حالتان، تتحولان إلى إطارين رئيسيين. وهذا يعني أنه لديك موضعان داخل قاعدة الإطارات الرئيسية لتمثيل التغييرات التي طرأت على كل من هذه الإطارات الرئيسية.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

سمات animation

لاستخدام @keyframes في قاعدة CSS، حدِّد خصائص مختلفة للصور المتحركة أو استخدِم سمة الاختصار animation.

animation-duration

.my-element {
    animation-duration: 10s;
}

تحدّد الخاصية animation-duration المدة المطلوبة للمخطط الزمني في @keyframes. يجب أن تكون قيمة زمنية. ويتم تعيينها افتراضيًا على 0 ثانية، مما يعني استمرار تشغيل الرسوم المتحركة، لكنها لن تراها بسرعة. لا يمكنك إضافة قيم زمنية سالبة.

animation-timing-function

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

تتوفّر عدة كلمات رئيسية يمكن استخدامها كإعدادات مسبقة في CSS، والتي تُستخدم كقيمة animation-timing-function: linear وease وease-in وease-out وease-in-out.

.my-element {
    animation-timing-function: ease-in-out;
}

يبدو أن القيم منحنية مع دوال الإرخاء لأنه يتم حساب التخفيف باستخدام منحنى بيزيه، والذي يُستخدم لوضع نماذج للسرعة. تشير كل كلمة من الكلمات الرئيسية لدوال التوقيت، مثل ease، إلى منحنى بيزيه محدّد مسبقًا. في CSS، يمكنك تحديد منحنى بيزييه مباشرةً، باستخدام الدالة cubic-bezier()، التي تقبل أربع قيم رقمية: x1 وy1 وx2 وy2.

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

تحدد هذه القيم كل جزء من المنحنى على طول المحورين "س" و"ص".

يُعدّ فهم منحنيات البيزيه معقّدًا وأدوات مرئية، مثل هذا المنشئ من إنشاء "ليا فيرو" مفيد للغاية.

وظيفة التخفيف steps

في بعض الأحيان، قد ترغب في التحكم بشكل أكثر دقة في الرسوم المتحركة، وبدلاً من التحرك على منحنى، تحتاج إلى التحرك على فترات زمنية بدلاً من ذلك. تتيح لك وظيفة التخفيف steps() تقسيم المخطط الزمني إلى فترات زمنية متساوية.

.my-element {
    animation-timing-function: steps(10, end);
}

الوسيطة الأولى هي عدد الخطوات. إذا تم تحديد 10 إطارات رئيسية وكان هناك 10 إطارات رئيسية، سيتم تشغيل كل إطار رئيسي بالتسلسل للمدة الزمنية المحددة، بدون انتقال بين الحالات. وإذا لم تكن هناك إطارات رئيسية كافية للخطوات، ستتم إضافة الخطوات بين الإطارات الرئيسية بناءً على الوسيطة الثانية.

الوسيطة الثانية هي الاتجاه. إذا كان مضبوطًا على end وهو الإعداد التلقائي، ستنتهي الخطوات في نهاية المخطط الزمني. في حال ضبط السياسة على start، تكتمل الخطوة الأولى من الصورة المتحركة فور بدئها، ما يعني أنّها تنتهي قبل end بخطوة واحدة.

animation-iteration-count

.my-element {
    animation-iteration-count: 10;
}

تحدد الخاصية animation-iteration-count عدد مرات تشغيل المخطط الزمني لـ @keyframes. بشكل افتراضي، هذا هو 1، مما يعني أنه عندما تصل الرسوم المتحركة إلى نهاية المخطط الزمني، ستتوقف في النهاية. لا يمكن أن يكون الرقم سالبًا.

يمكنك استخدام الكلمة الرئيسية infinite التي ستؤدي إلى تكرار الصورة المتحركة، وهي طريقة عمل العرض التوضيحي "النبضات" من بداية هذا الدرس.

animation-direction

.my-element {
    animation-direction: reverse;
}

يمكنك تعيين اتجاه تشغيل المخطط الزمني فوق الإطارات الرئيسية باستخدام ميزة اتجاه الرسوم المتحركة:

• normal: القيمة التلقائية، وهي إعادة التوجيه
• reverse: تخطّي المخطط الزمني
• alternate: لكل تكرار لحركة، سيتم تشغيل المخطط الزمني للأمام أو للخلف بالتسلسل.
• alternate-reverse: عكس alternate.

animation-delay

.my-element {
    animation-delay: 5s;
}

تحدد الخاصية animation-delay مدة الانتظار قبل بدء الحركة. مثل السمة animation-duration، تقبل هذه السمة قيمة زمنية.

على عكس السمة animation-duration، يمكنك تعريفها على أنّها قيمة سالبة. وفي حال ضبط قيمة سالبة، سيبدأ المخطّط الزمني في @keyframes عند هذه النقطة. على سبيل المثال، إذا كانت مدة الصورة المتحركة 10 ثوانٍ وضبطت animation-delay على -5s، ستبدأ من منتصف المخطّط الزمني.

animation-play-state

.my-element:hover {
    animation-play-state: paused;
}

تتيح لك الخاصية animation-play-state تشغيل الصورة المتحركة وإيقافها مؤقتًا. القيمة التلقائية هي running، وفي حال ضبطها على paused، سيتم إيقاف الصورة المتحركة مؤقتًا.

animation-fill-mode

تحدّد خاصية animation-fill-mode القيم الموجودة في المخطط الزمني @keyframes التي تستمر قبل بدء الحركة أو بعدها. القيمة التلقائية هي none، ما يعني أنّه عند اكتمال الرسم المتحرك، سيتم تجاهل القيم في المخطط الزمني. وتشمل الخيارات الأخرى ما يلي:

• forwards: يستمر ظهور الإطار الرئيسي الأخير، بناءً على اتجاه الحركة.
• backwards: يستمر ظهور الإطار الرئيسي الأول، بناءً على اتجاه الحركة.
• both: يتّبع قواعد كل من forwards وbackwards.

الاختصار animation

بدلاً من تعريف كل الخصائص بشكل منفصل، يمكنك تحديدها باختصار animation، مما يتيح لك تحديد خصائص الحركة بالترتيب التالي:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

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

يمكن للمستخدمين في نظام التشغيل أن يحددوا أنهم يفضلون تقليل الحركة التي يواجهونها عند تفاعلهم مع التطبيقات ومواقع الويب. يمكن اكتشاف هذا الخيار المفضّل باستخدام طلب البحث عن الوسائط prefers-reduced-motion للبحث.

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

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

التحقّق من استيعابك

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