Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Animation
Webdesign

تبدأ مع الرسوم المتحركة على شبكة الإنترنت

by
Length:MediumLanguages:

Arabic (العربية/عربي) translation by Purnama Abdulatif (you can also view the original English article)

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

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

نحن سوف تبحث في ما يلي:

  • ماذا، ولماذا؟
  • انتقالات CSS
  • الرسوم المتحركة Keyframe المغلق
  • الحركة أصيلة
  • وظائف Bezier مكعب (توقيت)
  • مكتبات المغلق وأدوات 
  • SVG
  • جافا سكريبت
  • النماذج

ماذا، ولماذا؟

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

اقتراح يوفر واجهات عدد من الأمور التي تحسين تجربة المستخدم، بما في ذلك:

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

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

موارد التعلم

انتقالات CSS

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

  • انتقال الملكية
  • مدة الانتقال
  • مرحلة انتقالية-توقيت-وظيفة
  • تأخير الانتقال

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

الآن دعونا نجعل التأثير أكثر دهاء، بإضافة مرحلة انتقالية لعنصر.button. إضافة، على سبيل المثال، تمر بمرحلة انتقالية: 1s كافة؛ وسوف تأكد من أن كافة تغييرات الخاصية سوف انتقلت بشكل سلس على مدى 1 ثانية.

قم بإلغاء القاعدة الأولى في الجزء المغلق وسترى أنها سارية المفعول:

الآن كنت قد رأيت ذلك العمل، حاول واسطة uncommenting القاعدة الثانية بدلاً من ذلك. في المثال الثاني أننا لقد سرد كل من الخصائص المتغيرة على حدة، حتى يمكننا تحديد سرعات انتقالية مختلفة لكل واحد.

وأخيراً، حاول واسطة uncommenting المثال الثالث، حيث سترى لقد أضفنا مهام التوقيت جداً. وهذه تؤثر على معدل الانتقال – سنتحدث عنها قريبا.

مصادر التعلم

الرسوم المتحركة Keyframe المغلق

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

دعونا نقول أننا نبدأ كرة.

الآن يمكن أن نحدد بعض إطارات مفتاحية، إعداد من الدولة، والدولة. هنا نقول أن خاصية الموقع الأيسر ستبدأ بنسبة 5٪ ، مما يؤدي إلى تحفيز 85٪ ، وتحريك الكرة عبر الشاشة بفعالية.

يمكنك أن ترى أننا لقد متداخلة من وإلى داخل إعلان @keyframes. ولقد سمّانا تحركنا للرسوم المتحركة. والآن ونحن بحاجة إلى تعيين هذه الرسوم المتحركة للكرة، التي نود حتى:

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

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

المزيد من السيطرة

تجاوز بسيط من وإلى مراحل، يمكننا تحديد النقاط على طول الخط الزمني باستخدام النسب المئوية. استخدام 0% و 100% أن يعطينا بالضبط نفس النتيجة مثل قبل:

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

من الممكن إضافة الرسوم المتحركة متعددة لعنصر واحد، وتغيير اتجاه الحركة، وتغيير التوقيت تماما. إلقاء نظرة على هذه الموارد لمعرفة المزيد!

موارد التعلم

الحركة أصيلة

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

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

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

موارد التعلم

وظائف Bezier مكعب (توقيت)

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

12511
.1,.25,.1، 1

الوقت يتحرك باستمرار على طول المحور س، معدل حركة يسرع ويبطئ على طول المحور y. يستخدم هذا المثال أعلاه على الكرة كذاب من قبل؛ يمكنك تخيل الكرة تتحرك بسرعة صعودا، ثم إبطاء كما أن تصل إلى ذروتها. إلقاء نظرة على هذا المنحنى في مكعب-bezier.com مساعدتك على تصور ذلك.

المنحنى يتم التحكم بواسطة اثنين من المقابض (التي عليك أن تكون على دراية مع إذا كنت تستخدم أداة القلم في Adobe Illustrator أو رسم) والدالة bezier مكعب يمكن أن نستخدمها في CSS يعكس هذه المقابض. لذا، لدينا وظيفة يبدو مثل:

هناك أربعة قيم، كل واحدة تتراوح (جدلا) من 0 إلى 1 وهي تمثل:

  • إحداثي x للتعامل مع 1 (-1)
  • اﻻحداثي ص للتعامل مع 1 (25)
  • إحداثي x للتعامل مع 2 (1)
  • اﻻحداثي ص للتعامل مع 2 (1).

سيؤدي فهم كيفية عمل وظائف bezier إلى تحسين الرسوم المتحركة بشكل كبير ، لا سيما إذا كنت تهدف إلى حركة أصيلة.

موارد التعلم

مكتبات المغلق وأدوات

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

موارد التعلم

المزيد من المكتبات المغلق

SVG

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

هنا هو مضمن SVG مع مرحلة انتقالية تطبق إلى لونه عند التحويم. ومع ذلك، ستلاحظ أننا نستخدم خاصية التعبئة، لا لون الخلفية التي كنا نتوقع مع عنصر HTML:

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

بل وأيضا SVG يمكن التلاعب بها عن طريق سميل (مزامنة لغة تكامل الوسائط المتعددة) الذي يسمح لك باستخدام أشياء مثل <animate>العنصر، مباشرة داخل SVG. تحقق من هذه الدائرة SVG، الانتقال عبر الشاشة:

هذه دائرة، والتي تحتوي على <animate>تحديد السمة التي لتحريك (تنسيق معادل في cx هذه الحالة)، من موقف 50px 400px، مدة 2 ثانية، وتكرار إلى أجل غير مسمى.

سميل مجموعة قوية جداً من الأدوات، وبدء القراءة أدناه!

موارد التعلم

أحب الفكرة من SVG موحية ولكن لم تكن متأكداً من ما لتحريك؟ تحقق من خدمات التوضيح ناقلات في الاستوديو Envato ونرى ما هو على العرض!

Characters Elements and Object ready for Video Animation
الشخصيات وعناصر وكائنات جاهزة "الرسوم المتحركة الفيديو"

جافا سكريبت

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

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

علاوة على ذلك ، يمكن لجافا سكريبت (في الأيدي اليمنى ، وليس لي) تقديم رسوم متحركة خطيرة ، وبما أن Adobe Flash سلمت رسميًا استقالتها ، فقد ظهرت بعض مكتبات JavaScript الرائعة. يمكن القول إن منصة GreenSock الرسومية (GSAP) هي أقوى مطوري البرامج الذين يقدمون مجموعة كاملة من الأدوات التي تعتمد على الجدول الزمني والأدوات المبنية على أساس tween.

ألقِ نظرة على دورة مبتدئنا واطلع على مدى أدائك مع GSAP!

مصادر التعلم

النماذج

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

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

Adobe Animate هو برنامج Flash للجيل القادم ، حيث يقدم أدوات متحركة متقدمة. تعد Adobe After Effects أداة إنتاج فيديو ، ولكنها تقدم أيضًا حركة متقدمة تعتمد على الجدول الزمني. ولكن هناك تطبيقات أبسط ، مثل Principle for Mac ، وحتى Keynote:

Keynote Motion Graphic Experiment، by Linda Dong

بمجرد أن يصبح تصميم الحركة جزءًا مما تفعله ، فإن العثور على أفضل الأدوات لإظهار العالم هو خطوة مهمة!

مصادر التعلم

الاستنتاج

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

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.