آموزش Angular: انیمیشن ها

مقدمه Introduction

• خوش آمدی Welcome

• آنچه قبل از گذراندن این دوره باید بدانید What you should know before taking this course

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

• چه جدید در این به روز رسانی What's new in this update

1. آماده شدن برای تحریک کردن 1. Getting Ready to Animate

• انیمیشن های زاویه دار چگونه کار می کنند How Angular animations work

• نصب زاویه ای CLI Angular CLI Installation

• ایجاد یک پروژه جدید Creating a new project

• ساختار پروژه Project structure

• پیش نمایش پروژه Preview the project

• چالش: نسخه Angular خود را به روز کنید Challenge: Update your Angular version

• راه حل: نسخه Angular خود را به روز کنید Solution: Update your Angular version

2. فعال کردن انیمیشن های زاویه ای 2. Enabling Angular Animations

• در حال تأیید بسته انیمیشن ها Verifying the animations package

• پیکربندی ماژول پروژه Project module configuration

• طرح بندی Application layout

• ایجاد م componentsلفه های مشاهده مسیر Creating route view components

• پیکربندی مسیرهای پروژه Configuring project routes

• چالش: یک نمای مسیر 404 ایجاد کنید Challenge: Create a 404 route view

• راه حل: یک نمای مسیر 404 ایجاد کنید Solution: Create a 404 route view

3. مبانی انیمیشن زاویه ای 3. Angular Animation Basics

• آماده سازی تعامل م componentلفه ها Preparing component interaction

• ایجاد داده های دولتی Establishing stateful data

• ایجاد انیمیشن بین ایالت ها Triggering animation between states

• تاخیر و کاهش عملکردها Delay and easing functions

• انیمیشن مرحله ای با فریم های کلیدی Stepped animation with keyframes

• انیمیشن موازی با گروه ها Parallel animation with groups

• توابع تماس با انیمیشن Animation callback functions

• چالش: متن پیام را پاک کنید Challenge: Clear the message text

• راه حل: متن پیام را پاک کنید Solution: Clear the message text

4. انیمیشن پیشرفته زاویه ای 4. Advanced Angular Animation

• انیمیشن م componentلفه خودمختار Self-contained component animation

• نوشتن انیمیشن های قابل استفاده مجدد Writing reusable animations

• پارامترهای ورودی انیمیشن Animation input parameters

• پیکربندی انیمیشن روتر Configuring router animation

• انتخاب موارد با پرس و جو Selecting items with a query

• استفاده از Stagger در یک انیمیشن Using Stagger within an animation

• چالش: انیمیشن های صفحه ای روتر Challenge: Per-page router animations

• راه حل: انیمیشن های روتر در هر صفحه Solution: Per-page router animations

5- متحرک کردن یک رابط موجود 5. Animating an Existing Interface

• نمای کلی پخش فیلم Video playback overview

• افزودن بسته های انیمیشن Adding animation packages

• پاکسازی انیمیشن قدیمی Old animation cleanup

• ایجاد م Angلفه های Angular Creating Angular components

• فوری سازی م Compلفه و ترجمه مقدار داده Component instantiation and data value translation

• متحرک سازی عنوان ویدیو Animating the video title

• متحرک کردن پوشش پخش Animating the playback overlay

• ارائه حرکت لیست پخش Providing playlist motion

• چالش: انتقال نوار ابزار با محو شدن Challenge: Transition the toolbar with a fade

• راه حل: نوار ابزار را با محو شدن تغییر دهید Solution: Transition the toolbar with a fade

6. بسته بندی برای توزیع 6. Package for Distribution

• ساخت پروژه Building the project

نتیجه Conclusion

• خداحافظ Goodbye