آموزش ساخت UI با Web Animations API

سرفصل ها و درس ها

بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

مقدمه Introduction

• واقعا انیمیشن چیست؟ What Is Animation Really?

• چرا انیمیشن مهم است؟ Why Is Animation Important?

• Web Animations API چیست؟ What Is the Web Animations API?

مبانی انیمیشن در وب The Basics of Animation on the Web

• کدام ویژگی ها را متحرک کنیم؟ Which Properties to Animate?

• استفاده از Transform برای انجام تقریباً همه چیز Using Transform to Do Nearly Everything

• آسان سازی چیست و چگونه از آن استفاده کنیم What Easing Is and How to Use It

• نحوه استفاده از will-change برای بهینه سازی انیمیشن ها How to Use will-change to Optimize Animations

Web Animations API در عمق Web Animations API in Depth

• استفاده پایه Basic Usage

• کار با Keyframes Working with Keyframes

• استفاده از ویژگی های زمان بندی Using Timing Properties

• کنترل های پخش Playback Controls

• تماس ها و وعده های رویداد Event Callbacks and Promises

ایجاد ورودی جستجوی متحرک Creating an Animated Search Input

• شکستن انیمیشن Breaking Down the Animation

• مقدمه ای بر عناصر سفارشی An Introduction to Custom Elements

• ایجاد اسکلت اجزا Creating the Component Skeleton

• اضافه کردن انیمیشن ها Adding the Animations

• عملکرد اضافی Additional Functionality

ایجاد یک دکمه اشتراک گذاری متحرک Creating an Animated Share Button

• معرفی و کامپوننت نسخه ی نمایشی Introduction and Component Demo

• شکستن انیمیشن Breaking Down the Animation

• افزودن و استایل دادن به عناصر DOM Adding and Styling the DOM Elements

• اضافه کردن انیمیشن ها Adding the Animations

• افزودن قابلیت اشتراک گذاری و موقعیت Adding the Share and Position Functionality

• استفاده از Web Animations API Polyfill Using the Web Animations API Polyfill