آموزش جاوا اسکریپت وانیل: انیمیشن ها

مقدمه Introduction

• خوش آمدی Welcome

• آنچه باید بدانید What you should know

• با استفاده از فایل های تمرینی Using exercise files

1. اصول توسعه وب 1. Web Development Fundamentals

• گزینه های جایگزین برای انیمیشن Alternative options for animation

• انتخاب یک محیط توسعه Choosing a development environment

• ایجاد یک سند HTML Creating an HTML document

• طراحی سند با CSS Styling the document with CSS

• نوشتن JavaScript Writing JavaScript

• تست در مرورگر Testing in the browser

2. پایه های انیمیشن جاوا اسکریپت 2. JavaScript Animation Foundations

• پیکربندی عناصر DOM Configuring DOM elements

• تغییر دیداری با گذشت زمان Visual change over time

• پایان دادن به یک انیمیشن Ending an animation

• استفاده از درخواستAnimationFrame Making use of requestAnimationFrame

• انیمیشن تعاملی Interactive animation

• ✓ چالش: خواص اضافی ✓ Challenge: Additional properties

• ✓ راه حل: خواص اضافی ✓ Solution: Additional properties

3. انیمیشن درون بوم 3. Animating within Canvas

• پیکربندی یک عنصر بوم Configuring a canvas element

• کشیدن در چارچوب بوم Drawing within the canvas context

• انیمیشن درون بوم Animating within the canvas

• افزودن شتاب Adding acceleration

• ✓ چالش: افزودن افکت ✓ Challenge: Adding effects

• ✓ راه حل: افزودن افکت ✓ Solution: Adding effects

4. API انیمیشن های وب 4. Web Animations API

• پیکربندی عناصر وب ما Configuring our web elements

• اصول روش animate Basics of the animate method

• با استفاده از خصوصیات keyframe اضافی Using additional keyframe properties

• تسکین را روی انیمیشن اعمال کنید Apply easing to the animation

• کنترل پخش انیمیشن Controlling animation playback

نتیجه Conclusion

• خداحافظ Goodbye