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

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

اليوم ، تعد الرسوم المتحركة المصممة بشكل جيد والتي تستخدم CSS أو jQuery أو GIF المتحركة البسيطة فرصة لإحياء واجهاتك وإضافة شخصية إلى منتجك.

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

في هذا البرنامج التعليمي ، سوف نستخدم Sketch لإنشاء الأشكال الأساسية و Principle لإنشاء رسوم متحركة بسيطة بسيطة التحميل. (كلا التطبيقين مخصصان لنظام التشغيل Mac.) ستتعلم كيفية إنشاء رسوم متحركة ملونة للتحميل تستخدمها Trello و Flickr و Slack والمزيد.

دعنا نذهب اليها.

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

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

ضع الأشكال الأربعة بطريقة لإنشاء مربع وهمي بمساحة 150 بكسل بين كل جانب. تطبيق أربعة ألوان مختلفة (# 35BA90 الأخضر ، # 69CADD الأزرق ، # EBA900 الأصفر ، والوردي # E20661).

قم باستيراد الأشكال إلى Principle ، وقم بتجميعها ، ثم انقر فوق "Create Component" لتداخل المجموعة.

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

قم بتطبيق مشغل "تلقائي" على لوح الرسم ، ثم قم بتمديد كل مستطيل دائري على الجانب الآخر من اللوحة الفنية بطول 295 بكسل. أعط عتامة 75٪ لكل شكل على كل ألواح الرسم.

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

قم بربط آخر لوحة فنية بأول لوحة تشغيل على "التشغيل التلقائي". انقر على زر "الرجوع إلى الأصل" لمعاينة النتيجة النهائية.

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

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

باستخدام Sketch ، تتبع مربع أزرق 100 بكسل. ارسم مستطيلًا أبيضًا بعرض 60 بكسلًا بارتفاع 140 بكسل. قم بمحاذاة ذلك أعلى يسار المربع السابق بهامش أعلى 30px وهامش يسار. تكرار هذا المستطيل الأبيض ، محاذاته إلى يمين المربع بهامش الأيمن 30px ، وتقليل ارتفاعه إلى 70px.

قم باستيراد اللوحة الفنية إلى Principle وقم بتطبيق المشغل "Auto" لإنشاء إطار رئيسي جديد. على اللوحة الفنية الجديدة ، قم بعكس ارتفاعات المستطيلات البيضاء (اجعل المستطيل الأيسر مرتفعًا يصل إلى 70 بكسل والمستطيل الأيمن 140 بكسل). قم بتطبيق تأثير "سهولة على حد سواء" في لوحة "تحريك" لتهدئة الانتقال.

دائرة المتداول

تتبع دائرة على رسم. قم بتطبيق حد 10 بكسل مع قيم "Dash" و "Gap" وبدون تعبئة. استخدم لون "الزاوي التدرج" للحد الذي من شأنه أن يزيد من تأثير التناوب الذي ستنشئه في وقت لاحق.

افتح ملف Principle جديد واستخدم الزر "استيراد" لنقل الدائرة من Sketch. تطبيق اثنين من مشغلات "تلقائي" على التوالي.

لإنشاء تأثير الدوران ، حدد الدائرة في اللوحة الفنية المتوسطة وتغيير قيمة "الزاوية" إلى 360 درجة. ثم حدد الدائرة الثالثة وأعطها اسمًا مختلفًا (مثل "نسخ") داخل اللوحة اليمنى. هذا سوف وهمية التناوب لانهائية.

أخيرًا ، اربط اللوحة الفنية الثالثة باللوحة الأولية بمشغل "تلقائي" آخر. قم بتطبيق انتقال "خطي" على الخط الزمني بين ألواح الرسم 1 و 2. تحقق من الرسوم المتحركة التي أنشأتها للتو في نافذة المعاينة.

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

تتبع دائرة زرقاء ودائرة الوردي جنبا إلى جنب. قم باستيرادها إلى Principle وتطبيق تطبيق "Auto" لإنشاء لوحة فنية جديدة.

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

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

نشر في الأصل على مدونة Toptal Design في www.toptal.com >>