دوره آموزشی جاوا اسکریپت وانیلا: انیمیشن ها
1 ساعت 2 دقیقهمتوسط2018-06-26
مدرسین

Joseph Labrecque
University Professor, Adobe Educator, Studio Head
جزئیات دوره
استراتژی ها و تکنیک های متحرک سازی محتوا با استفاده از جاوا اسکریپت و فناوری های وب بومی را بررسی کنید. در این دوره متمرکز، مربی جوزف لابرک نحوه استفاده از جاوا اسکریپت وانیلی را برای اجرای انیمیشن های رایج در مرورگرهای وب مدرن نشان می دهد. جوزف با پوشش مفاهیم اولیه توسعه وب، از جمله نحوه ایجاد یک سند HTML و استایل دادن به آن با CSS، شروع می کند. سپس به سراغ مبانی پویانمایی جاوا اسکریپت می رود و به نحوه پیکربندی عناصر مدل شی سند (DOM) - ساختار تگ پایه HTML - و نحوه متحرک سازی این عناصر در نما درگاه نگاه می کند. او همچنین به عنصر بوم HTML5 و نحوه اجرای انیمیشن های پیچیده در این سطح طراحی واحد و قدرتمند نگاه می کند. در نهایت، او به آینده انیمیشن جاوا اسکریپت از طریق Web Animations API نگاه می کند، که زبان مشترکی را برای مرورگرها و توسعه دهندگان برای توصیف انیمیشن ها و تعامل با پخش فراهم می کند.
اهداف یادگیری
پیکربندی عناصر مدل شیء سند (DOM).
شروع و پایان یک انیمیشن
ساخت یک انیمیشن تعاملی
متحرک سازی درون بوم
طراحی در بافت بوم
کار با Web Animations API
اهداف یادگیری
پیکربندی عناصر مدل شیء سند (DOM).
شروع و پایان یک انیمیشن
ساخت یک انیمیشن تعاملی
متحرک سازی درون بوم
طراحی در بافت بوم
کار با Web Animations API
مهارت ها
JavaScriptOracleProgramming LanguagesSoftware DevelopmentDeep Dive (X:Y)
سرفصل ها
0. مقدمه
- 01 - خوش آمدید
- 02 - آنچه باید بدانید
- 03 - استفاده از فایلهای تمرینی
1. اصول توسعه وب
- 04 - گزینههای جایگزین برای انیمیشن
- 05 - انتخاب محیط توسعه
- 06 - ایجاد یک سند HTML
- 07 - استایل دادن به سند با CSS
- 08 - نوشتن جاوا اسکریپت
- 09 - تست در مرورگر
2. مبانی انیمیشن جاوا اسکریپت
- 10 - پیکربندی عناصر DOM
- 11 - تغییر بصری در طول زمان
- 12 - پایان دادن به یک انیمیشن
- 13 - استفاده از requestAnimationFrame
- 14 - انیمیشن تعاملی
- 15 - ✓ چالش - ویژگیهای اضافی
- 16 - ✓ راه حل - خواص اضافی
3. انیمیشن در بوم
- 17 - پیکربندی یک عنصر بوم
- 18 - طراحی در بافت بوم
- 19 - متحرک سازی درون بوم
- 20 - افزودن شتاب
- 21 - ✓ چالش - اضافه کردن جلوه ها
- 22 - ✓ راه حل - افزودن جلوه ها
4. Web Animations API
- 23 - پیکربندی عناصر وب ما
- 24 - مبانی روش متحرک
- 25 - استفاده از ویژگیهای اضافی کی فریم
- 26 - easing را روی انیمیشن اعمال کنید
- 27 - کنترل پخش انیمیشن
نتیجه
- 28 - خداحافظ
دوره های مرتبط
- دوره آموزشی چالشهای کدنویسی جاوااسکریپت: ساخت اپلیکیشنهای وب
- دوره آموزشی الگوهای JavaScript: راهحلهای مدرن برای چالشهای رایج
- دوره آموزشی جاوااسکریپت: ساخت ساختار داده لیستهای پیوندی
- دوره آموزشی جاوا اسکریپت: نقشه ها و مجموعه ها
- دوره آموزشی آرایه ها در جاوا اسکریپت
- دوره آموزشی یادگیری جاوااسکریپت: نوشتن کد مدرن با JavaScript ESNext
- دوره آموزشی یادگیری برنامهنویسی تابعی با جاوااسکریپت +ES6
- دوره آموزشی ساخت برنامههای تایپاسکریپت با JSDoc