إضافة تأثيرات حركية بين عدد المشاهدات

تعرَّف على كيفية إنشاء تأثيرات حركية بين طريقتَي عرض في تطبيقاتك.

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

• استخدِم الترجمات للتنقّل بين طرق العرض وتجنَّب استخدام left أو top أو أي سمة أخرى تؤدي إلى تشغيل التنسيق.
• تأكد من أن أي رسوم متحركة تستخدمها سريعة وأن تكون مدّتها قصيرة.
• ضع في اعتبارك كيف تتغير الرسوم المتحركة والتخطيطات مع زيادة أحجام الشاشة؛ ما يناسب الشاشة الأصغر قد يبدو غريبًا عند استخدامه في سياق سطح المكتب.

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

استخدام الترجمات للتنقّل بين طرق العرض

لتسهيل المهام اليومية، لنفترض أن هناك طريقتين: عرض على شكل قائمة وعرض تفاصيل. وعندما ينقر المستخدم على عنصر قائمة داخل العرض على شكل قائمة، ينزلق عرض التفاصيل إلى الداخل، ويخرج العرض على شكل قائمة.

ولتحقيق هذا التأثير، ستحتاج إلى حاوية لكلّ من طريقتَي العرض الذين تم ضبط overflow: hidden عليهما. وبهذه الطريقة، يمكن أن تكون طريقتا العرض داخل الحاوية جنبًا إلى جنب دون إظهار أي أشرطة تمرير أفقية، ويمكن أن يتم تمرير كل طريقة عرض جنبًا إلى جنب داخل الحاوية حسب الحاجة.

لغة CSS للحاوية هي:

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

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

.view {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;

  /* let the browser know we plan to animate
     each view in and out */
  will-change: transform;
}

تتيح إضافة transition في السمة transform تأثير شريحة جميل. ولإضفاء طابع جميل، تستخدم منحنى cubic-bezier مخصّص، وهذا ما ناقشناه في دليل تغيير السرعة المخصّص.

.view {
  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

يجب ترجمة العرض الموجود خارج الشاشة إلى اليسار، بحيث يلزم في هذه الحالة نقل عرض التفاصيل:

.details-view {
  transform: translateX(100%);
}

الآن، من الضروري استخدام مقدار صغير من JavaScript للتعامل مع الفئات. يؤدي هذا الإجراء إلى تبديل الصفوف المناسبة في طرق العرض.

var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');

/**
    * Toggles the class on the container so that
    * we choose the correct view.
    */
function onViewChange(evt) {
    container.classList.toggle('view-change');
}

// When you click a list item, bring on the details view.
for (var i = 0; i < listItems.length; i++) {
    listItems[i].addEventListener('click', onViewChange, false);
}

// And switch it back again when you click the back button
backButton.addEventListener('click', onViewChange);

وأخيرًا، نضيف بيانات CSS لتلك الفئات.

.view-change .list-view {
  transform: translateX(-100%);
}

.view-change .details-view {
  transform: translateX(0);
}

التجربة الآن

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

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

التأكّد من أنّ الصورة المتحركة تعمل مع الشاشات الأكبر حجمًا

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