الرسوم المتحركة لمطوري الواجهة الأمامية - الدورة 31.380 روبل روسي. من أكاديمية HTML، التدريب، التاريخ: 28 نوفمبر 2023.
Miscellanea / / November 30, 2023
تتم الدورة بتنسيق غير متزامن. يمكنك البدء بالتدريب في أي وقت والانتقال خلال البرنامج بالسرعة التي تناسبك.
تتمثل القيمة الرئيسية للدورة في وجود قدر كبير من التعليقات من المرشد الذي سيقوم بتحليل الكود الخاص بك بالتفصيل، وتحديد الثغرات في فهم المادة ومساعدتك على التعامل مع كل شيء.
تم تصميم الدورة للمطورين ذوي الخبرة الذين يرغبون في تحسين مهاراتهم. لإتقانها، تحتاج إلى مهارات في التخطيط والبرمجة في JavaScript. الدورة مناسبة أيضًا للمبتدئين الذين أكملوا دورات HTML وCSS بنجاح. التخطيط التكيفي والأتمتة" و"JavaScript. التطوير المهني لواجهات الويب."
نستخدم في الدورة التنسيقات الأكثر فعالية لتدريب المتخصصين: النصوص وأجهزة المحاكاة والتسجيلات الرقمية للشاشة والعروض التوضيحية. نحن لا نفرط في استخدام الفيديو ونستخدمه فقط عند الحاجة إليه.
هدفنا هو تحويل أي وافد جديد إلى متخصص كامل الأهلية ومطلوب، وجاهز للعمل في صناعة الويب.
في عام 2013، أطلق ساشا وليشا أكاديمية HTML. منذ البداية، قررنا تعليم كيفية العمل مع التعليمات البرمجية الحية، وحل المشكلات القريبة من المشكلات الحقيقية. نحن نقدم فرصة لاكتساب المعرفة فحسب، بل المهارات أيضًا. في عملية التعلم نواجه الطالب باختبارات مبدأها "التطابق كما هو موضح في النموذج". هذا هو المبدأ الذي يعمل به معظم مصممي التخطيط.
نحن نعتبر التخطيط مهارة مفيدة جدًا لأي تخصص في مجال تكنولوجيا المعلومات. لذلك، نحاول أن نجعل أجهزة المحاكاة الخاصة بنا مثيرة للاهتمام، ومسببة للإدمان، وتفاعلية، وغير عادية، وتشبه الألعاب إلى حد ما قدر الإمكان.
لقد قمنا بإعداد أجهزة محاكاة تغطي جوانب مختلفة من عمل مصمم التخطيط. هذا يكفي للتعرف جيدًا على التصميم. ولأولئك الذين يريدون أن يصبحوا محترفين، قمنا بإعداد ست دورات عبر الإنترنت. تتيح لك هذه البرامج التعليمية الفريدة إعداد متخصصين يتمتعون بالمهارات اللازمة لصناعة الويب. والموجهون يساعدوننا في هذا. الآن يعمل معنا أكثر من ثلاثمائة مرشد.
إذا لم تكن المحاكاة والدورات كافية بالنسبة لك، فيمكنك إلقاء نظرة على رف الكتب، حيث نقوم بجمع الكتب تدريجيا حول تطوير الويب. أو قم بزيارة منتدانا وناقش المشكلة التي تهمك.
بعد الانتهاء من الدورة التدريبية، ستتمكن من إنشاء رسوم متحركة بأي تعقيد في المتصفح. من خلال الاستخدام السليم للرسوم المتحركة، يمكنك تحسين جودة تجربة المستخدم وجاذبية المواقع التي تقوم بتطويرها. تتضمن الدورة أكثر من 40 مهمة عملية و10 استشارات مع مرشد.
في القسم الأول سنلقي نظرة على تاريخ الرسوم المتحركة. كيفية إنشاء وهم الحركة، الاختلافات الرئيسية بين الرسوم المتحركة الكلاسيكية والرسوم المتحركة بالكمبيوتر. ما هي التجريدات الموجودة لإنشاء الرسوم المتحركة بالكمبيوتر؟ ما الفرق بين الرسوم المتحركة الخطية والرسوم المتحركة إطارًا بإطار؟ سننظر أيضًا إلى 12 مبدأ للرسوم المتحركة التعبيرية. بعد ذلك سنقوم بإنشاء انتقالات متحركة بسيطة في CSS.
- خط أنابيب لتنفيذ التعليمات البرمجية في المتصفح.
- انتقال CSS والرسوم المتحركة: الاختلافات.
- وظائف الوقت: مدمجة، مكعب بيزير.
في هذا الفصل، سننتقل إلى تقديم تجريد ذي مستوى أدنى: الرسوم المتحركة إطارًا بإطار. دعونا نتعرف على ماهية FPS وقيم FPS القياسية: 24، 30، 60. ما هو FPS العائم. دعونا نلقي نظرة على أمثلة للرسوم المتحركة إطارًا بإطار:
- الرسوم المتحركة لحالة الشخصيات في الألعاب - طريقة على شبكة الإنترنت Sprite Sheets - الرسوم المتحركة المعدة، نموذج 360 (على سبيل المثال، سيارة).
- الرسوم المتحركة بالكمبيوتر، تصميم الحركة - طريقة في الويب JS Tween وJS Morph - الرسوم المتحركة باستخدام المكتبات، على سبيل المثال، CreateJS، AnimateJS، GSAP.
- الألعاب التي تتعقب تصرفات اللاعب في الوقت الفعلي - السباقات، تتريس - طريقة لإنشاء نماذج ذات واجهة تفاعلية - في العناصر والألعاب التفاعلية على الويب.
سنواصل أيضًا الدراسة المتعمقة لمبادئ الرسوم المتحركة التعبيرية: الحضور على المسرح، والجاذبية، والرسم الاحترافي - اهتمام المطور بالتفاصيل، وجودة الصورة النهائية.
في الجزء العملي سنتعلم استخدام:
- window.requestAnimationFrame.
- القماش ومعاييره وأساليبه.
- دورة رسم الرسوم المتحركة لعنصر بسيط. التحولات. رسم صورة. قناع. فئة الكائنات المجردة هي ريغا. تمديد الصف. مواصفات المسار البارامترية. أمثلة: القطع الناقص، الحلزوني، القطع المكافئ، الموجة الجيبية، الموجة الجيبية المبللة، إلخ.
- التلاعب بالمسارات: الجمع، الضرب، النقل الموازي، تحول الطور الجيبي.
- تحديث () وطرق تقديم ().
سنواصل في هذا الفصل العمل مع الرسوم المتحركة إطارًا تلو الآخر. دعونا نتعرف على ماهية WebGL وOpenGL. دعونا نلقي نظرة على الفرق بين العمل في سياق ثنائي الأبعاد وwebgl. دعنا نستكشف ما هي التأثيرات النقطية:
- مرشحات اللون
- برنامج OpenGL
- أقنعة – اللمعان، ألفا
- تراكبات الألوان - المزج
- ضوضاء
- تعويضات
- طمس
سندرس أيضًا الرسوم المتحركة للتأثيرات النقطية: الحركة المستمرة وتغيير المعلمات.
ومن الناحية العملية، دعونا ننظر إلى:
- ما هي تظليل قمة الرأس والجزء.
- كيفية استخدام WebGL 3D للتأثيرات ثنائية الأبعاد.
- ما هي الهندسة.
- خط أنابيب WebGL.
- التفاعل بين JS وWebGL.
- أنواع البيانات في WebGL.
- كتابة GLSL - الأساسيات.
سنتحدث في هذا الفصل مرة أخرى عن أنظمة الإحداثيات والنقاط والمتجهات. دعونا ندرس مصفوفات التحويل ثلاثية الأبعاد، الكواترنيونات وزوايا أويلر، وضرب المصفوفات.
لنفكر في خيارين لإنشاء نماذج باستخدام واجهة تحكم المستخدم:
- الإعداد المباشر للمعلمات: السرعة أو التسارع (الحركة أو الدوران).
- تحديد الهدف هو القيمة التي تحتاج إلى الاقتراب منها تدريجيًا: ينجذب العنصر إلى المؤشر.
- دعونا ندرس دورة عمل المحرك، وطرق إبطال () وتحديث () وتقديم () وميزات العمل مع FPS العائمة. دعونا نتعلم كيفية إجراء العمليات الحسابية داخل التحديث ().
في الجزء العملي، سنبدأ العمل مع مكتبة Three.js. لندرس:
- طرق وصف الأشياء: الموضع والهندسة والمواد.
- الهندسة: حدودية مدمجة وقابلة للتحميل بشكل تعسفي. المخزن المؤقت الهندسة.
- ما هي المواد الموجودة، وأنواع المواد، وأنماط العرض، والمواد المخصصة.
- أعلام للتحديث.
- حلقة التجسيد.
- الرسوم المتحركة الموقف. طريقة تحويل الرسوم المتحركة.
- مسرح + كاميرا. إضافة كائنات إلى المشهد. التجميع.
- ضوء. أنواع مصادر الضوء. مادة ماتكاب.
في هذا الجزء سنلقي نظرة على ماهية الكاميرا في WebGL، وفي Three على وجه الخصوص. شبيبة:
- التحكم بالكاميرا.
- حركات الكاميرا الأساسية.
- منصات الكاميرات.
- تصميمات مختلفة للأجهزة لأنواع مختلفة من التحكم.
في الجزء العملي:
- دعونا نرى ما هي أنواع الكاميرات الموجودة في الثلاثة. يتم تغيير حجم معلمات الكاميرا في JS عند التبديل إلى إصدار الهاتف المحمول.
- دعونا نستكشف أساليب الرسوم المتحركة بالكاميرا. دعونا نلقي نظرة على رد الفعل على تصرفات المستخدم - التغيير السلس في المنظور. التحكم باستخدام منصة: دورة تقديم منصة الكاميرا. إنشاء الرسوم المتحركة للطيران.
- منصات الكاميرات.
- دعونا نفكر في التبديل بين الكاميرات - التحرير. قواعد التثبيت.
في الجزء الأخير من الدورة، سنلقي نظرة على واجهات برمجة التطبيقات (APIs) التي ليست جاهزة بعد للاستخدام في الإنتاج، ولكنها تستحق البدء في دراستها الآن لتحسين كفاءة عملك في المستقبل.
- دعونا نرى كيف تختلف Web Animation API عن الرسوم المتحركة CSS العادية وما هي الإمكانيات الإضافية التي توفرها.
- دعونا نتعلم أساسيات واجهة برمجة تطبيقات هوديني.
- دعونا نتحدث عن المكتبات التي ستساعد في تبسيط العمل مع الرسوم المتحركة، والجداول الزمنية، وSVG، والقماش، وWebGL.
- لنفكر في برامج العمل مع الرسوم المتحركة والرسومات للويب: Google Web Designer، Adobe Animate، Adobe After Effects، برامج الرسومات ثلاثية الأبعاد: Cinema 4d، Blender.
- دعونا نلقي نظرة عامة قصيرة على أساليب إنشاء الرسوم المتحركة والرسومات التي تم إنشاؤها ديناميكيًا. دعونا نلقي نظرة على الأدوات التي يمكن استخدامها لإنشاء برامج متعددة المنصات ثلاثية الأبعاد.
- دعنا نتحدث عن كيف يمكنك التطوير بشكل أكبر في إنشاء الرسوم المتحركة.
ستتعلم في هذه الدورة المبادئ الأساسية التي تدخل في تطوير تطبيقات الواجهة الأمامية.
في هذه الدورة سوف تتعلم مجموعة أدوات Redux. ستتعلم المزيد حول تنظيم الحالة في تطبيق React. في النهاية، سوف تتعلم كيفية إدارة الحالة المعقدة وتطبيقات التفاعل التصميمي.
إتقان مهنة مطلوبة من الصفر.