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

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

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

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

ما المقصود بالإطار الرئيسي؟

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

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

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

@keyframes

تستند صفحة CSS @keyframes إلى مفهوم الإطارات الرئيسية للصور المتحركة.

إليك مثال بحالتين:

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

الجزء الأول المهم هو المعرّف المخصّص (custom-ident)، وهو اسم قاعدة الإطارات الرئيسية. المعرّف في هذا المثال هو 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، إلى منحنى Bézier محدَّد مسبقًا. في CSS، يمكنك تحديد منحنى Bézier مباشرةً باستخدام دالة 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);
}

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

الوسيطة الثانية هي الاتجاه. في حال ضبط السياسة على 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;
}

ويمكنك تحديد اتجاه تشغيل المخطط الزمني على الإطارات الرئيسية باستخدام سمة animation-direction التي تأخذ القيم التالية:

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

animation-delay

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

تحدد الخاصية animation-delay المدة التي ينتظرها المتصفّح قبل بدء الحركة. وعلى غرار السمة animation-duration، تستغرق هذه العملية قيمة زمنية.

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

animation-play-state

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

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

animation-fill-mode

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

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

اختصار 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;
  }
}

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

التحقق من فهمك

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