كيفية بناء التفاعلات الدقيقة المتحركة في رد الفعل

دليل Microactactions المستخدم من خلال التطبيق الخاص بك. أنها تعزز تجربة المستخدم الخاصة بك وتوفر البهجة.

ربما تكون قد شاهدت بعض الأمثلة البقعة للتفاعلات الدقيقة على Dribble أو CodePen. ولكن هل تعرف كيفية إنشاء مكتبتك الخاصة من الحاجيات واجهة المستخدم مماثلة؟

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

  • افتح وأغلق مربع النص
  • الانتقال إلى الجزء العلوي من الشاشة
  • رج (يشير إلى خطأ)

سأستخدم بعض التطبيقات المختلفة:

  • التحولات المغلق
  • رد فعل الحركة
  • الرسوم المتحركة-لرد

إليك عرض توضيحي مباشر والرمز الذي يشغله.

هذا هو واحد من العديد من الوظائف حول النظام العالي (HOC) والمكونات الوظيفية عديمي الجنسية. المنشور الأول يدور حول إعادة استخدام الكود في React و React Native ، عبر هذه التقنيات.

ما هو التفاعل الدقيق؟

يعطينا دان سافير (الذي ألف الكتاب) هذا التعريف: "التفاعلات الدقيقة هي لحظات المنتج التي تدور حول حالة استخدام واحدة - لديهم مهمة واحدة رئيسية."

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

لماذا يجب أن أهتم بالتفاعلات الدقيقة؟

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

لكنني لست مصمم UX. لذلك أقترح قراءة منشور نيك بابيتش حول التفاعلات الدقيقة.

ابدء

سوف أستخدم تطبيق create-react-app للتمهيد لتطبيق React ، لكن أي طريقة إعداد React ستعمل. أيضًا ، أنا أحب Material-UI ، لذلك سأقوم باستيراد ذلك أيضًا. (هذا الخيار تعسفي - يمكنك استخدام مكتبة عنصر واجهة مستخدم أخرى أو تصميم عناصرك يدويًا.)

إنشاء-التفاعل- التطبيق مربع البحث - الرسوم المتحركة
مؤتمر نزع السلاح بحث مربع الرسوم المتحركة
npm تثبيت - حفظ المواد واجهة المستخدم رد فعل الصنبور حدث البرنامج المساعد

المكون: مربع بحث بسيط

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

SearchBox.js

(سأستخدم رد الاتصال onClick لاحقًا.)

يعين isOpen prop SearchBox التقديم مفتوحًا أو مغلقًا.

isOpen = true / isOpen = false

استخدام مكونات الترتيب العالي لفصل المخاوف

يمكنني تغيير SearchBox إلى مكون عادي وإضافة رمز يفتح مربع النص ويغلقه عند النقر فوقه ، على سبيل المثال.

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

مكونات النظام العالي (HOC) هي وظائف تقوم بإرجاع مكون جديد. يلتف هذا المكون بمكون (مكونات) ويضيف وظائف. سوف أقوم بإنشاء HOC لإضافة سلوك الفتح / الإغلاق إلى SearchBox.

إنشاء توسيع animation.js

تحديث App.js على النحو التالي:

إذا قمت بتشغيل npm start ، فسيكون لديك رمز بحث يمكنك النقر فوقه لفتح مربع النص وإغلاقه.

إنه يعمل ، لكن الافتتاح والختام متقلبان. يمكن للرسوم المتحركة سلاسة التأثير.

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

هناك ثلاثة مناهج عامة للرسوم المتحركة.

  1. التحولات المغلق
  2. الرسوم المتحركة المغلق
  3. العرض السريع والمتكرر لعنصر لمحاكاة الحركة (تأطير المفتاح اليدوي)

تغير انتقالات CSS قيمة خاصية (مثل العرض) على مدار فترة زمنية معينة. لا يجب أن يكون التغيير خطيًا ؛ يمكنك تحديد وظائف لتغيير القيم.

تغير الرسوم المتحركة لـ CSS نمط عنصر (مثل الحجم واللون والموضع). كل نمط تدريجي هو إطار رئيسي. يمكنك إنشاء سلسلة keyframe لتحقيق التأثير المطلوب.

كلا تكتيكات CSS تقدم العناصر مرارًا وتكرارًا لمحاكاة الحركة. يمكنك إجراء الحسابات بنفسك ، أي الخيار (3). تستخدم العديد من أطر عمل Javascript للرسوم المتحركة هذا النهج ، لإدارة الحسابات. (سأستخدم رد فعل الحركة في مثال لاحق.)

سأستخدم كل هذه التقنيات في الأمثلة أدناه ، لكنني سأبدأ بتحولات CSS.

توسيع مربع البحث

يحتاج الرسم المتحرك لمربع النص الموسع إلى خاصية CSS واحدة: انتقال

تغيير expand-animation.js كما يلي ،

بالنظر إلى التغيير في السطر 21 ، أنماط إضافية ، سيقوم SearchBox بدمج هذا النمط مع أنماطه الحالية في السطرين 29 و 31 أدناه. (سأعود إلى خاصية CSS الانتقالية في السطر 2 في لحظة.)

تحديث SearchBox.js

مع دمج الأنماط ، ستصبح الرسوم المتحركة نافذة المفعول.

انتقال المغلق: العرض

والنتيجة هي توسيع سلس لعرض مربع النص ، مع إعطاء المظهر الذي يفتحه. تتحكم خاصية انتقال CSS في هذا (من السطر 2 في expand-animation.js).

انتقال: "العرض 0.75s مكعب - بيزير (0.000 ، 0.795 ، 0.000 ، 1.000)"

أشجعك على قراءة الوثائق الخاصة بخاصية انتقال CSS ، حيث توجد مجموعة متنوعة من الخيارات. في المثال ، هناك ثلاثة معلمات:

  1. الخاصية لتغيير: العرض
  2. مدة الانتقال: 0.75s
  3. وظيفة للتحكم في التوقيت: مكعب - بيز (0.000 ، 0.795 ، 0.000 ، 1.000) "

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

تحريك مربع البحث

تحقق من مفهوم الرسوم المتحركة التالي الذي عثرت عليه على Dribble:

https://dribbble.com/shots/2751256-Google-Search

هناك عناصر متعددة في التفاعل ؛ لكنني أرغب في التركيز على حركة مربع البحث إلى أعلى الشاشة.

يمكنني نقل مربع البحث المتواضع الخاص بي مع انتقال CSS. قم بإنشاء HOC جديد ، move-up-animation.js

هذا يشبه وظيفة makeExpanding HOC ، باستثناء القيام بترجمة (الانتقال لأعلى). أيضًا ، ينطبق نمط الرسوم المتحركة فقط على الإطار الخارجي (div).

تحديث App.js ،

ويجب أن ترى

انتقال المغلق. تحويل: ترجمة Y

ربما تريد تأثير نطاط. يمكنك استخدام رد فعل الحركة. إنها مكتبة React الشعبية التي تستخدم ديناميات الربيع للسيطرة على الرسوم المتحركة. (مقدمة جيدة ، من خلال ناش فيل ، هنا.)

تثبيت npm - حفظ رد فعل الحركة

إنشاء spring-up-animation.js

نظرًا لأن هذا ليس درسًا تفاعليًا عن الحركة ، فسأوجز باختصار كيف يعمل هذا. تعمل حركة التفاعل على لف المكوّن المتحرك ، الهدف ، بمكونه الخاص ، الحركة. (هناك مكونات حركة رد فعل أخرى ، مثل TransitionMotion و Staggered Motion.)

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

تُظهر الصورة أدناه النتيجة (مع نبع متقلب لتسليط الضوء على التأثير).

رد فعل ديناميات الربيع

يمكنك استخدام حركة رد الفعل لمجموعة من الآثار. على سبيل المثال ، يمكنك تغيير مربع النص لتوسيع مثل الربيع.

(spring-up-animation.js و move-up-animation.js لها نفس منطق حالة onClick ، ​​لذلك قمت بإعادة تشكيل الأجزاء الشائعة. التفاصيل هنا.)

هز مربع البحث

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

يمكنني استخدام حركة رد الفعل ، لكنني أرغب في إلقاء نظرة على تقنية أخرى: الرسوم المتحركة للإطار الرئيسي.

React-animations هي مكتبة React للرسوم المتحركة للرسوم المتحركة. يقوم بإدخال إطارات مفتاحية CSS في ورقة أنماط DOM. (استخدمت الأمثلة الأخرى فقط أنماط مضمّنة.)

npm تثبيت - حفظ رد فعل الرسوم المتحركة

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

تثبيت npm - حفظ أفروديت

إنشاء HOC آخر ، shake-animation.js

هناك عدد قليل من الأقسام الرئيسية. يستخدم السطر 4 أفروديت لإنشاء ورقة أنماط لتأثير الحركة التفاعلية ، هز الرأس. يعين السطر 29 فئة CSS للرسوم المتحركة على الهدف. (يتطلب ذلك قرصًا SearchBox لاستخدام فئة CSS. انظر إلى استخدام frameClass في مصدر SearchBox.js.) معالج onClick على السطر 17 أكثر تعقيدًا.

إعادة تشغيل الرسوم المتحركة

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

رد فعل الرسوم المتحركة (يستخدم إطارات مفتاحية ، رسوم متحركة CSS)

تجميعها معًا: تكوين مكون معقد

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

أولاً ، ستحتاج إلى إجراء بعض التغييرات على SearchBox

أصبح SearchBox الآن عنصرًا خاضعًا للتحكم (مصطلح خيالي لاستخدام React لإدارة قيمة إدخال مربع النص). كما يوفر رد اتصال ، onSubmit ، لإرسال استعلام البحث (عندما يضغط المستخدم على مفتاح Enter).

تحتاج أيضًا إلى تغيير shake-animation.js. يجب أن لا يؤدي النقر فوق رمز البحث إلى حدوث اهتزاز. بدلاً من ذلك ، أريد مكونًا آخر لتحديد وقت "الاهتزاز". هذا يفصل منطق التحقق من الصحة عن الكود الذي يتحكم في الرسوم المتحركة.

startShake هو علامة لإعادة تعيين الرسوم المتحركة. ولكن هذه تفاصيل التنفيذ. يجب تغليفها ، كحالة داخلية ، في makeShakeAnimation HOC.

startShake يعتمد على shouldShake. يمكنني استخدام componentWillReceiveProps للرد على تغييرات الدعم. (هو الأصل ، مكون التحقق من الصحة ، يوفر هذه الدعائم.) لذلك قمت بنقل منطق onClick السابق إلى componentWillReceiveProps.

التغيير في السطر 27 ، {... this.props} ، يمرر كل الدعائم إلى المكون المُلف ، الهدف. (أحتاج إلى تغيير طريقة العرض بطريقة مماثلة في expand-animation.js. التفاصيل هنا.)

يمكنني الآن إضافة مكون يتحكم في وقت الاهتزاز.

إنشاء مربع البحث ، controller.js

هذا هو آخر HOC. لا يحتوي على عناصر مرئية ، لكنه يتحكم في السلوك المنطقي للمكون المُلف. (لدى Dan Abramov وظيفة جيدة تشرح هذا الفصل.) في هذه الحالة ، جميع الاستعلامات خاطئة ، ولكن في تطبيق حقيقي ، قمت بالتحقق من صحة الاستعلامات والاتصال بواجهات برمجة التطبيقات.

أخيرًا ، أود أن أبرز أن makeAnimatedValidationSearchBox عبارة عن HOC الذي يقوم بسلاسل HOCs اثنين آخرين.

const WrappedComponent = makeShakingAnimation (makeExpanding (Target))؛

تحديث صغير آخر toApp.js

(السطر 12 يستخدم HOC الجديد)

وتنفيذ بدء تشغيل npm

مكون مركب ، مصنوعة من سلاسل ثلاثة HOCs

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

تغليف

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

قد ترغب في التحقق من المكتبات مثل إعادة التركيب ، والتي تجعل إنشاء HOC أسهل.

الريبو جيثب لهذا المشروع هنا.

يرجى ♡ هذا المنصب ومتابعتي للقصص المستقبلية. شكرا للقراءة.