من خلال دراسة الدروس الثلاثة السابقة، أتقننا طريقة صنع الرسوم المتحركة، على الرغم من أن الرسوم المتحركة المنتجة لا تزال بدائية للغاية. هل مازلت تتذكر أنه عندما كنت تتعلم الأساسيات، تعرضت لكتلة لون واحدة لفترة طويلة؟ ولم يؤثر ذلك على مستوى الأداء الحالي للجميع. وبالمثل، سنبدأ قريبًا في إنشاء رسوم متحركة أكثر تفصيلاً. ولكن قبل أن يأتي كل هذا، يجب على الجميع تعلم بعض التفكير التصميمي الضروري. يشير ما يسمى بالتفكير التصميمي إلى التخطيط والاعتبارات قبل إنشاء الرسوم المتحركة. ويشمل هذا التخطيط جوانب عديدة.
أولاً، دعونا نتحدث عن تنظيم الطبقات. لا تحتوي الرسوم المتحركة النهائية على معلومات الطبقة. الطبقات المذكورة هنا تشير فقط إلى تلك الموجودة في الإنتاج. بالنسبة للرسوم المتحركة التي يتم إنتاجها باستخدام تغييرات موضع الطبقة، فإن المشكلة الواضحة هي أنه يجب ترتيب الطبقات بشكل معقول ، لأن أصغر وحدة للحركة هي الطبقة، لذلك إذا كنت بحاجة إلى إنشاء كائنات متعددة بمسارات حركة مختلفة، فيجب توزيعها بشكل مختلف طبقات. تحتاج أيضًا إلى مراعاة مسافة الحركة مسبقًا، ويجب أن يترك حجم الصورة وموضعها مساحة كافية للحركة.
والثاني هو النظر فيما إذا كان سيتقاطع مع الطبقات الأخرى، وكيفية التعامل مع التقاطع ومن سيغطي من، أي الترتيب الهرمي للطبقات. ويسرد الشكل التالي ثلاث طرق للتقاطع بين الاثنين في أقصى اليسار عندما تكون كلتا الطبقتين بنسبة 100%، فإن اللون الأخضر يغطي اللون الأحمر. يُظهر الاثنان الآخران تأثيرات التغطية المختلفة للطبقات المختلفة عند عتامة بنسبة 50%. إذا كان اللون الأخضر يغطي اللون الأحمر، فإن التقاطع سيكون أكثر خضرة، والعكس صحيح. كل هذا في وضع المزج العادي. إذا اخترت أوضاع مزج أخرى مثل التراكب، فيجب عليك إيلاء المزيد من الاهتمام للطبقة.
ما تم ذكره أعلاه كلها مشاكل فنية، والآن دعونا نتحدث عن مشاكل الحبكة. بشكل عام، إذا كان الجسم يتحرك دائمًا في الصورة، فلا داعي لحسابه. ولكن إذا لم يكن الكائن موجودًا في الصورة في الأصل ولكنه دخل الصورة لاحقًا، أو كان في الصورة في الأصل ثم تم نقله خارج الصورة، فأنت بحاجة إلى شرح ظهور الكائن واختفاءه، ويعتبر هذا التفسير بمثابة انتقال، مما يسمح بـ المشاهد للحصول على تغيير نفسي أكثر طبيعية. أحد الأساليب الشائعة هو جعل الكائنات تظهر تدريجيًا (وتسمى أيضًا التلاشي) أو تختفي تدريجيًا (وتسمى أيضًا التلاشي). وكما هو موضح في الشكل أدناه فهو يوضح المقارنة بين تأثير التلاشي والتلاشي في نفس حركة النص.
يمكنك تحريك الماوس إلى منطقة التشغيل لمشاهدة تأثير الحركة الفعلي، وتحريك الماوس خارج منطقة التشغيل لإيقاف التشغيل. من خلال المقارنة، أعتقد أن الجميع سيشعرون أن تأثير إضافة معالجة التلاشي والتلاشي أفضل.
بالإضافة إلى ذلك، يعد إعداد الحلقة أيضًا مشكلة في الحبكة، لقد ذكرنا هذا بالفعل من قبل، أي أنه في بعض المواقف، يمكن استخدام الرسوم المتحركة للحلقة اللانهائية، بينما في مواقف أخرى غير مناسب. على سبيل المثال، إذا تم تكرار الرسوم المتحركة لنص عنوان العمود الذي يتلاشى بشكل مستمر، فسيؤدي ذلك إلى جعل صفحة الويب بأكملها تبدو فوضوية وتجعل المشاهدين يشعرون بعدم الارتياح. الطريقة الأكثر ملاءمة في هذا الوقت هي تشغيلها مرة واحدة، بحيث يمكن عرض التأثير دون التأثير على صفحة الويب بأكملها. تعتبر الدورة التي تم ضبطها على 2 إلى 3 مرات مقبولة بشكل عام، وأي زيادة عن ذلك ليست جيدة.
ومع ذلك، من الأفضل وضع الرسوم المتحركة التي يتم تشغيلها مرة واحدة فقط في أعلى صفحة الويب بحيث يمكن رؤيتها بمجرد دخولك إلى صفحة الويب. إذا تم وضعها في أسفل صفحة الويب، فقد يكون الرسم المتحرك قد انتهى من التشغيل بحلول الوقت الذي يصل فيه المشاهد إلى تلك النقطة. في هذه الحالة، سيكون من غير المجدي إنشاء رسوم متحركة، وسيكون من الأفضل استخدام صور ثابتة بدلاً من ذلك.
تجدر الإشارة إلى أنه سيتم تشغيل صورة GIF المتحركة مرة أخرى في كل مرة يتم استدعاؤها. إذا كان بعض الأشخاص لديهم معرفة بالفعل بإنتاج صفحات الويب، فيمكنهم استخدام هذه الخاصية لتعيين الإجراءات المقابلة في برنامج إنتاج صفحات الويب. على سبيل المثال، هذه هي الطريقة التي تحرك بها الماوس هنا لمشاهدة الرسوم المتحركة للمثال. تبدأ الرسوم المتحركة دائمًا من البداية بعد كل خطوة. بهذه الطريقة، حتى إذا تم تشغيل الرسوم المتحركة مرة واحدة فقط، فيمكن تشغيلها عدة مرات على صفحة الويب. لا تقلق إذا لم تكن لديك المعرفة حول إنتاج صفحات الويب، فلن يؤثر ذلك على تعلمنا للرسوم المتحركة لاحقًا. .
هناك مشكلة مهمة يجب مراعاتها فيما يتعلق بتأثيرات التلاشي التي تبدو رائعة وهي أنه يمكن ضبط المتصفحات على تعطيل الرسوم المتحركة. في هذا الوقت، ستعرض الرسوم المتحركة الإطار الأول فقط من الرسوم المتحركة. بعد ذلك، ستكون الرسوم المتحركة المشابهة لـ "الذهاب والذهاب بهدوء" أعلاه فارغة في صفحة الويب، لأن الإطار الأول فارغ في الأصل. وهذا يمكن أن يسبب بسهولة سوء الفهم بين المشاهدين.
ربما تعتقد أنه لن يقوم أحد بإيقاف تشغيل عرض الرسوم المتحركة عمدا، ولكن بما أنه لا يمكن استبعاد هذا العامل، فنحن بحاجة إلى النظر في وضع الزائر من المستوى الأوسع. في التخطيط العام لصفحة الويب، تجنب استخدام الرسوم المتحركة المتضائلة في النص المهم أو أجزاء المؤشر. بعد وضع الرسوم المتحركة في صفحة الويب، من الأفضل إيقاف تشغيل الرسوم المتحركة يدويًا للتحقق مما إذا كانت هناك أي مشكلة. بالإضافة إلى إيقاف تشغيل الرسوم المتحركة، إذا قام الزائر بالضغط على مفتاح ESC عند عرض الصفحة، فسيتم مقاطعة تشغيل الرسوم المتحركة أيضًا، وستبقى الشاشة في لحظة الانقطاع.
إذا كنت تريد الاهتمام بالزائرين الممنوعين من تشغيل الرسوم المتحركة والذين يسمح لهم بتشغيل الرسوم المتحركة في نفس الوقت، وتحقيق التوازن بين الاثنين، فعليك اتباع مبدأ في إنتاج الرسوم المتحركة، وهو، يجب ألا يتحرك الجزء الرئيسي ويجب أن تكون الأجزاء المعدلة متحركة. كما هو موضح في الصورة أدناه، النص نفسه غير متحرك، فقط حواف النص هي المتحركة. بهذه الطريقة، حتى إذا تم تشغيل الرسوم المتحركة الثابتة أو مقاطعتها أثناء التشغيل، فلن يؤثر ذلك على فهم المشاهد للمحتوى.
ومع ذلك، طالما أنه يمكن عكس المحتوى بدقة في جميع الأوقات وتجنب اختفاء النص أو التشوه المفرط، فيمكن أيضًا نقل النص الرئيسي.
لا يرتبط المحتوى الموصوف في هذا الدرس بتقنية إنتاج الرسوم المتحركة، ومع ذلك، عندما تريد تطبيق الرسوم المتحركة على صفحات الويب، يجب عليك مراعاة طرق الإنتاج والأداء للرسوم المتحركة من منظور واسع. إن تعلم هذه المحتويات أمر ممل بعض الشيء، فقط اترك انطباعًا لدى الجميع وقم بتطبيقه في الإنتاجات المستقبلية.
تهدف هذه المهمة إلى إنشاء الرسوم المتحركة لـ "Quietly Come and Go". بالإضافة إلى ذلك، تم أيضًا إنتاج الرسوم المتحركة المشتقة التالية.
في القسم التالي، سنقدم كيفية التعبير عن التلاشي والتلاشي في الرسوم المتحركة.