אנימציה למפתחי חזית - קורס RUB 31,380. מאקדמיית HTML, הדרכה, תאריך: 28 בנובמבר, 2023.
Miscellanea / / November 30, 2023
הקורס מתקיים במתכונת אסינכרונית. אתה יכול להתחיל להתאמן בכל עת ולעבור את התוכנית במהירות המתאימה לך.
הערך המרכזי של הקורס הוא כמות גדולה של משוב ממנטור שינתח את הקוד שלך לפרטי פרטים, יזהה פערים בהבנת החומר ויעזור לך להתמודד עם הכל.
הקורס מיועד למפתחים מנוסים שרוצים לשפר את כישוריהם. כדי לשלוט בו, אתה צריך מיומנויות בפריסה ותכנות ב-JavaScript. הקורס מתאים גם למתחילים שסיימו בהצלחה את קורסי HTML ו-CSS. פריסה אדפטיבית ואוטומציה" ו-"JavaScript. פיתוח מקצועי של ממשקי אינטרנט".
בקורס אנו משתמשים בפורמטים היעילים ביותר להכשרת אנשי מקצוע: טקסטים, סימולטורים, שידורי מסך והדגמות. אנחנו לא משתמשים יותר מדי בווידאו ומשתמשים בו רק איפה שצריך.
המטרה שלנו היא להפוך כל עולה חדש למומחה מן המניין ומבוקש, המוכן לעבוד בתעשיית האינטרנט.
בשנת 2013, סשה ולשה השיקו את HTML Academy. כבר מההתחלה החלטנו ללמד איך לעבוד עם קוד חי, לפתור בעיות שקרובות לבעיות אמיתיות. אנו מספקים הזדמנות לצבור לא רק ידע, אלא גם מיומנויות. בתהליך הלמידה אנו מעמתים את התלמיד עם מבחנים שעיקרם "התאמה כפי שמוצג במודל". זהו העיקרון שלפיו עובדים רוב מעצבי הפריסה.
אנו רואים בפריסה מיומנות שימושית מאוד עבור כל מומחיות IT. לכן, אנו מנסים להפוך את הסימולטורים שלנו למעניינים, ממכרים, אינטראקטיביים, יוצאי דופן וקצת דמויי משחק ככל האפשר.
הכנו סימולטורים המכסים היבטים שונים של עבודתו של מעצב פריסה. זה מספיק כדי להכיר היטב את הפריסה. ולמי שרוצה לצמוח למקצוען, הכנו שישה קורסים מקוונים. תוכניות חינוכיות ייחודיות אלו מאפשרות לך להכין מומחים עם הכישורים הדרושים לתעשיית האינטרנט. ומנטורים עוזרים לנו בזה. כעת עובדים איתנו יותר משלוש מאות מנטורים.
אם סימולטורים וקורסים לא מספיקים לך, אז אתה יכול להסתכל על מדף הספרים, שבו אנחנו אוספים בהדרגה ספרים על פיתוח אתרים. או בקר בפורום שלנו ודון בנושא שמעסיק אותך.
לאחר סיום הקורס, תוכל ליצור אנימציות בכל מורכבות בדפדפן. באמצעות שימוש נכון באנימציות תוכלו לשפר את איכות ה-UX והאטרקטיביות של האתרים שאתם מפתחים. הקורס כולל למעלה מ-40 משימות מעשיות ו-10 התייעצויות עם מנטור.
בחלק הראשון נסתכל על ההיסטוריה של האנימציה. כיצד ליצור אשליה של תנועה, ההבדלים העיקריים בין אנימציה קלאסית לאנימציה ממוחשבת. אילו הפשטות יש לבניית אנימציה ממוחשבת? מה ההבדל בין אנימציה לינארית לבין אנימציה של פריים אחר פריים? נסתכל גם על 12 עקרונות של אנימציה אקספרסיבית. לאחר מכן ניצור מעברים מונפשים פשוטים ב-CSS.
- צינור לביצוע קוד בדפדפן.
- מעבר CSS ואנימציה: הבדלים.
- פונקציות זמן: מובנית, מעוקב-בזייר.
בפרק זה, נמשיך להציג הפשטה ברמה נמוכה יותר: אנימציה של פריים אחר פריים. בואו נלמד מה זה FPS וערכי FPS סטנדרטיים: 24, 30, 60. מה זה FPS צף. בואו נסתכל על דוגמאות של אנימציה של פריים אחר פריים:
- אנימציה של מצב הדמויות במשחקים - שיטה ברשת Sprite Sheets - אנימציות מוכנות, דגם 360 (למשל מכונית).
- אנימציה ממוחשבת, עיצוב תנועה - שיטה ברשת JS Tween ו-JS Morph - אנימציה באמצעות ספריות, למשל, CreateJS, AnimateJS, GSAP.
- משחקים העוקבים אחר פעולות השחקנים בזמן אמת - מירוץ, טטריס - שיטה ליצירת מודלים עם ממשק אינטראקציה - באלמנטים אינטראקטיביים באינטרנט ובמשחקים.
כמו כן, נמשיך ללמוד לעומק את העקרונות של אנימציה אקספרסיבית: נוכחות במה, אטרקטיביות, ציור מקצועי - תשומת לב המפתח לפרטים, איכות התמונה הסופית.
בחלק המעשי נלמד להשתמש ב:
- window.requestAnimationFrame.
- קנבס והפרמטרים והשיטות שלו.
- מחזור של ציור אנימציה של אלמנט פשוט. טרנספורמציות. מצייר תמונה. מִסוּך. מחלקת האובייקט המופשט היא ריגה. הרחבת כיתה. מפרט מסלול פרמטרי. דוגמאות: אליפסה, ספירלה, פרבולה, גל סינוס, גל סינוס דחוס וכו'.
- מניפולציות עם מסלולים: חיבור, כפל, העברה מקבילה, הסטת פאזה סינוסואידית.
- שיטות Update() ו-render().
בפרק זה נמשיך לעבוד עם אנימציית פריים לפי פריים. בואו ללמוד מה הם WebGL ו-OpenGL. בואו נסתכל על ההבדל בין עבודה בהקשר של 2D ו-webgl. בואו נחקור מהן השפעות רסטר:
- מסנני צבע
- OpenGL
- מסכות - לומינציה, אלפא
- שכבות צבע - מיזוג
- רעשים
- קיזוזים
- לְטַשׁטֵשׁ
נלמד גם אנימציה של אפקטי רסטר: תנועה מתמדת ופרמטרים משתנים.
בפועל, בואו נסתכל על:
- מהם הצללות קודקוד ושברים.
- כיצד להשתמש ב-WebGL 3d עבור אפקטים דו-ממדיים.
- מהי גיאומטריה.
- צינור WebGL.
- אינטראקציה בין JS ו-WebGL.
- סוגי נתונים ב-WebGL.
- כתיבת GLSL - היסודות.
בפרק זה נדבר שוב על מערכות קואורדינטות, נקודות ווקטורים. בואו נלמד מטריצות טרנספורמציה תלת מימדיות, קווטרניונים וזוויות אוילר, כפל מטריצה.
בואו נבחן 2 אפשרויות ליצירת מודלים עם ממשק בקרת משתמש:
- הגדרה ישירה של פרמטרים: מהירות או תאוצה (תנועה או סיבוב).
- הגדרת מטרה - ערך שאליו אתה צריך להתקרב בהדרגה: האלמנט נמשך אל הסמן.
- בואו נלמד את מחזור העבודה של המנוע, את שיטות invalidate(), update() ו-render() ואת התכונות של עבודה עם FPS צף. בואו ללמוד כיצד לבצע חישובים בתוך update().
בחלק המעשי, נתחיל לעבוד עם ספריית Three.js. בוא נלמד:
- דרכים לתיאור עצמים: מיקום, גיאומטריה וחומרים.
- גיאומטריה: מובנית פרמטרית, ניתנת לטעינה שרירותית. חיץ גיאומטריה.
- אילו חומרים יש, סוגי חומרים, מצבי רינדור, חומרים מותאמים אישית.
- דגלים לעדכון.
- לולאת העיבוד.
- מיקום אנימציות. שיטת אנימציה של Morph.
- במה + מצלמה. הוספת חפצים לסצנה. הַקבָּצָה.
- אוֹר. סוגי מקורות אור. חומר Matcap.
בחלק זה נבחן מהי מצלמה ב-WebGL, ובשלוש בפרט. JS:
- שליטה במצלמה.
- תנועות מצלמה בסיסיות.
- אסדות של מצלמות.
- עיצובי מתקן שונים לסוגי בקרה שונים.
בחלק המעשי:
- בוא נראה אילו סוגי מצלמות יש בשלוש. JS, פרמטרי מצלמה, שינוי גודל בעת מעבר לגרסת הנייד.
- בואו נחקור גישות להנפשת מצלמה. בואו נסתכל על התגובה לפעולות המשתמש - שינוי חלק בפרספקטיבה. שליטה באמצעות מתקן: מחזור רינדור מתקן המצלמה. יצירת אנימציית טיסה.
- אסדות של מצלמות.
- בואו נשקול מעבר בין מצלמות – עריכה. כללי התקנה.
בחלק האחרון של הקורס, נבחן את אותם APIs שעדיין לא מוכנים לשימוש בייצור, אך כדאי להתחיל ללמוד כעת על מנת לשפר את יעילות העבודה שלך בעתיד.
- בואו נראה במה שונה ה-Web Animation API מהנפשת CSS רגילה ואיזה יכולות נוספות הוא מספק.
- בואו ללמוד את היסודות של הודיני API.
- בואו נדבר על ספריות שיעזרו לפשט את העבודה עם אנימציות, צירי זמן, SVG, קנבס, WebGL.
- בואו ניקח בחשבון תוכניות לעבודה עם אנימציה וגרפיקה עבור האינטרנט: Google Web Designer, Adobe Animate, Adobe After Effects, תוכנות גרפיקה תלת מימדיות: Cinema 4d, Blender.
- בואו ניקח סקירה קצרה של גישות ליצירת אנימציה וגרפיקה שנוצרו באופן דינמי. בואו נסתכל באילו כלים ניתן להשתמש כדי לבנות תוכנה חוצת פלטפורמות עם תלת מימד.
- בוא נדבר על איך אתה יכול להמשיך להתפתח ביצירת אנימציה.
בקורס זה תלמדו את העקרונות הבסיסיים הנלווים לפיתוח יישומים חזיתיים.
בקורס זה תלמדו את ערכת הכלים של Redux. תוכל ללמוד עוד על ארגון המדינה באפליקציית React. בסופו של דבר, תלמד כיצד לנהל יישומי מצב מורכבים ועיצוב תגובה.
שלטו במקצוע מבוקש מאפס.