صور متحركة مشروطة

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

بول لويس

التجربة الآن

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

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

يجب محاذاة التراكب المشروط مع إطار العرض، لذا اضبِط position الخاص به على fixed:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  opacity: 0;

  will-change: transform, opacity;
}

ويحتوي على قيمة أولية opacity من 0، لذا فهو مخفي عن العرض، ولكن بعد ذلك يحتاج أيضًا إلى ضبط السمة pointer-events على none بحيث تمر النقرات واللمسات من خلالها. وبدون ذلك، سيتم حظر جميع التفاعلات، ما يؤدي إلى عدم استجابة الصفحة بأكملها. وأخيرًا، يجب وضع علامة على السمتَين opacity وtransform بأنّها متغيرة باستخدام will-change (راجِع أيضًا استخدام السمة will-change).

عندما تكون طريقة العرض مرئية، يجب أن تقبل التفاعلات وأن تتضمّن opacity من 1:

.modal.visible {
  pointer-events: auto;
  opacity: 1;
}

عندما يكون العرض المشروط مطلوبًا، يمكنك الآن استخدام JavaScript لتبديل الفئة "مرئية":

modal.classList.add('visible');

في هذه المرحلة، تظهر طريقة العرض المشروطة بدون أي رسوم متحركة، لذا يمكنك الآن إضافة ذلك في (راجع أيضًا تعديل مخصّص):

.modal {
  transform: scale(1.15);

  transition:
    transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

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

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

.modal.visible {
  transform: scale(1);

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

يستغرق الآن ظهور طريقة العرض المشروطة 0.3 ثانية على الشاشة، وهي أقل قوة بعض الشيء، ولكن يتم تجاهلها بسرعة، وهو ما سيقدره المستخدم.