كيفية إنشاء الرسوم المتحركة والتحولات مع الحركة واجهة المستخدم

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

يمكننا إنشاء الرسوم المتحركة والانتقالات إما من نقطة الصفر أو باستخدام المكتبات أو الأطر. الأخبار السارة بالنسبة لنا ، الواجهة الأمامية ، هي أن زورب ، مؤسس مؤسسة ، في أكتوبر الماضي مفتوح المصدر Motion UI ، مكتبة الرسوم المتحركة والانتقال على أساس ساس.

كانت في الأصل مجمعة مع Foundation for Apps ، والآن ، بالنسبة للإصدار المستقل ، حصلت على تجديد ، بما في ذلك الرسوم المتحركة نظام طابور و أنماط CSS مرنة. تعمل Motion UI أيضًا على تشغيل بعض مكونات إطار العمل الأساسي ، مثل شريط تمرير Orbit ومحول Toggler و Reveal modal ، لذلك فهي أداة قوية جدًا.

ابدء

على الرغم من أن Motion UI هي مكتبة Sass ، إلا أنك لا تحتاج بالضرورة إلى استخدامها مع Sass ، حيث يوفر Zurb للمطورين مجموعة أدوات سهلة الاستخدام تحتوي فقط على CSS المترجمة. يمكنك تنزيله من الصفحة الرئيسية لـ Motion UI ، والبدء بسرعة في النموذج الأولي باستخدام فئات الرسوم المتحركة والانتقال المحددة مسبقًا لـ CSS.

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

يتم شحنها أيضا طقم بداية مع index.html و ملف يسمح لك باختبار الإطار بسرعة.

إذا كنت بحاجة إلى تعديلات أكثر تطوراً وتريد الاستفادة من مزيج Sass القوي من Motion UI ، يمكنك تثبيت الإصدار الكامل الذي يحتوي على المصدر .SCSS الملفات مع npm أو Bower.

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

النماذج الأولية السريعة

لبدء النماذج ، يمكنك تحرير index.html و ملف مجموعة المبتدئين ، أو قم بإنشاء ملف HTML الخاص بك. يمكنك إنشاء التصميم باستخدام شبكة Foundation ، ولكن يمكن أيضًا استخدام Motion UI كمكتبة مستقلة بدون إطار عمل Foundation.

هناك 3 أنواع رئيسية من فئات CSS المعرفة مسبقًا في Motion UI:

1. فئات الانتقال - تتيح إضافة انتقالات ، مثل تأثيرات الانزلاق والبهت والمفصلات إلى عنصر HTML.
2. فئات الرسوم المتحركة - تمكنك من استخدام تأثيرات اهتزاز وتهتز وغزل مختلفة
3. فئات التعديل - العمل مع كل من فصول الانتقال والرسوم المتحركة ، وتتيح لك ضبط السرعة والتوقيت وتأخير الحركة.

بناء HTML

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

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

 
 انقر فوق لي  

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

يتضمن Motion UI مكتبة جافا سكريبت صغيرة يمكنها أيضًا تشغيل التحولات والرسوم المتحركة عند حدوث حدث معين.

يمكن العثور على المكتبة نفسها في مجموعة أدوات البداية motion-ui-starter> js> vendor> motion-ui.js مسار.

يخلق MotionUI الكائن الذي يحتوي على طريقتين: animateIn () و animateOut (). الانتقال أو الرسوم المتحركة المنضمة إلى عنصر HTML معين ( يمكن تشغيل العلامة في مثالنا) باستخدام jQuery بالطريقة التالية:

 $ (function () $ (". button"). انقر فوق (function () var $ animation = $ ("# boom"). data ("animation")؛ MotionUI.animateIn ($ ("# boom")) ، $ animation)؛)؛)؛

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

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

نظرًا لأن Motion UI مرنة جدًا ، يمكنك أيضًا إضافة وتحريك انتقالات ورسوم متحركة بعدة طرق أخرى.

على سبيل المثال في المثال أعلاه ، لسنا بحاجة بالضرورة إلى استخدام بيانات الرسوم المتحركة السمة المخصصة ، ولكن يمكن ببساطة إضافة فئة السلوك مع addClass () طريقة مسج ل العنصر بالطريقة التالية:

 $ ( '# الطفرة') addClass ( 'النطاق في متابعة')؛

التخصيص مع ساس

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

لن يعمل التخصيص مع مجموعة أدوات البداية ، فأنت بحاجة إلى تثبيت إصدار Sass إذا كنت تريد تكوين التأثيرات وفقًا لاحتياجاتك الخاصة.

لتخصيص الانتقال أو الرسوم المتحركة ، في البداية تحتاج إلى العثور على mixin ذات الصلة. ال _classes.scss يحتوي الملف على أسماء فئات CSS المترجمة مع المزج المعني.

في مثالنا استخدمنا .النطاق في المتابعة السمة ، وعن طريق إلقاء نظرة على _classes.scss, يمكننا أن نعرف بسرعة أنه يستفيد من MUI التكبير mixin:

 // Transitionsmixin motion-ui-transitions ... // Scale .scale-in-up include mui-zoom (in، 0.5، 1)؛  ...

يستخدم واجهة المستخدم MUI- بادئة إلى mixins ، ولكل mixin ملفه الخاص. لدى Motion UI اصطلاحات تسمية ذاتية التفسير ، حتى نتمكن من العثور عليها بسرعة MUI التكبير mixin في _zoom.scss ملف:

 mixin mui-zoom ($ state: in ، $ from: 1.5، $ to: 1، $ fade: map-get ($ motion-ui-settings، scale-and-fade)، $ المدة: null، $ time: null ، $ delay: null) …

باستخدام نفس التقنية ، يمكنك التحكم بسهولة في كل ميزة من الرسوم المتحركة أو الانتقال عن طريق تغيير قيم متغيرات Sass المعنية.

تكوين فئات المعدل

يمكن أيضًا تكوين فئات التعديل التي تتحكم في سلوك (السرعة والتوقيت والتأخير) للرسوم المتحركة والانتقالات مع Sass عن طريق تعديل قيم المتغيرات المعنية في _settings.scss ملف.

بعد إجراء التغييرات الخاصة بك ، سوف Motion UI استخدم القيم الجديدة كإعداد افتراضي في كل الرسوم المتحركة والانتقال ، لذلك لن تضطر إلى تكوين الخلطات ذات الصلة واحدا تلو الآخر.