در حال بارگذاری...

انیمیشن‌ها

انیمیشن‌ها در انگولار یکی از مؤثرترین ابزارها برای بهبود تجربه کاربری در برنامه‌های تک‌صفحه‌ای (SPA) هستند. سیستم انیمیشن در انگولار بر پایه ماژول @angular/animations ساخته شده است و به توسعه‌دهندگان اجازه می‌دهد تا بین حالات مختلف مؤلفه‌ها (Component States) مانند نمایش، پنهان‌سازی، تغییر موقعیت یا تغییر رنگ، انتقال‌های نرم و چشم‌نواز ایجاد کنند.
در توسعه وب مدرن، انیمیشن‌ها نقش حیاتی در ارتباط بصری بین کاربر و رابط ایفا می‌کنند. برای مثال، در زمان ارسال فرم، بارگذاری داده‌ها، یا تغییر مسیر بین صفحات، انیمیشن‌ها موجب می‌شوند که کاربر حس پویایی و پاسخ‌گویی بیشتری از برنامه دریافت کند.
در این آموزش، شما یاد می‌گیرید که چگونه انیمیشن‌ها را در سطح مؤلفه‌ها، چرخه‌عمر (Lifecycle)، جریان داده (Data Flow)، و مدیریت حالت (State Management) در انگولار پیاده‌سازی کنید. همچنین با مفاهیم trigger، transition، state و animate آشنا می‌شوید که عناصر کلیدی سیستم انیمیشن در انگولار هستند.
این دانش به شما کمک می‌کند تا برنامه‌های SPA خود را نه‌تنها از نظر کارکردی، بلکه از نظر تجربه کاربری به سطح حرفه‌ای ارتقا دهید.

مثال پایه

typescript

TYPESCRIPT Code

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
selector: 'app-simple-animation',
template: `       <div [@openClose]="isOpen ? 'open' : 'closed'" class="box">         <p>مثال ساده از انیمیشن در انگولار</p>       </div>       <button (click)="toggle()">تغییر وضعیت</button>
`,
styles: [`
.box {
width: 220px;
height: 120px;
text-align: center;
line-height: 120px;
margin: 20px;
border-radius: 8px;
color: white;
font-weight: bold;
}
`],
animations: [
trigger('openClose', [
state('open', style({ backgroundColor: '#28a745', transform: 'scale(1.1)' })),
state('closed', style({ backgroundColor: '#dc3545', transform: 'scale(1)' })),
transition('open <=> closed', [
animate('400ms ease-in-out')
])
])
]
})
export class SimpleAnimationComponent {
isOpen = true;

toggle() {
this.isOpen = !this.isOpen;
}
}

در این مثال پایه، ما از سیستم انیمیشن داخلی انگولار استفاده کرده‌ایم تا دو حالت (State) مختلف برای یک مؤلفه تعریف کنیم: "open" و "closed". از دکوراتور @Component استفاده شده تا متادیتای مؤلفه شامل قالب (Template)، سبک‌ها (Styles)، و انیمیشن‌ها مشخص شود.
تابع trigger() انیمیشن را تعریف می‌کند و با state() حالت‌های مختلف را مشخص می‌نماید. style() ظاهر هر حالت را تعیین می‌کند، در حالی که transition() مشخص می‌کند که در هنگام تغییر حالت، چه نوع انتقالی (Transition) اجرا شود. تابع animate() زمان و منحنی حرکت (Easing) انیمیشن را تعیین می‌کند.
ویژگی [@openClose]="isOpen ? 'open' : 'closed'" باعث می‌شود که انیمیشن بر اساس وضعیت متغیر isOpen در کلاس TypeScript اجرا شود. با کلیک بر روی دکمه، متد toggle() وضعیت را تغییر می‌دهد و انیمیشن به طور خودکار فعال می‌شود.
این الگو به خوبی ارتباط بین "State Management" و "Component Lifecycle" را نشان می‌دهد. وقتی داده یا حالت تغییر می‌کند، انگولار به‌صورت واکنشی DOM را به‌روزرسانی کرده و انیمیشن را اجرا می‌کند. این یکی از قدرت‌های اصلی فریمورک انگولار در توسعه رابط‌های پویا است.

مثال کاربردی

typescript

TYPESCRIPT Code

import { Component } from '@angular/core';
import { trigger, transition, style, animate, query, stagger } from '@angular/animations';

@Component({
selector: 'app-list-animation',
template: `       <h2>انیمیشن فهرست در انگولار</h2>       <button (click)="addItem()">افزودن آیتم</button>       <ul>         <li *ngFor="let item of items" [@listAnimation]>
{{ item }}         </li>       </ul>
`,
styles: [`
ul { list-style: none; padding: 0; }
li { background: #007bff; color: white; margin: 8px 0; padding: 10px; border-radius: 6px; }
`],
animations: [
trigger('listAnimation', [
transition(':enter', [
style({ opacity: 0, transform: 'translateY(-20px)' }),
animate('500ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
]),
transition(':leave', [
animate('400ms ease-in', style({ opacity: 0, transform: 'translateY(20px)' }))
])
])
]
})
export class ListAnimationComponent {
items: string[] = ['Angular', 'RxJS', 'TypeScript'];

addItem() {
const next = `آیتم ${this.items.length + 1}`;
this.items.push(next);
}
}

این مثال کاربردی‌تر، استفاده از انیمیشن در فهرست‌های پویا را نشان می‌دهد. در اینجا ما از انیمیشن‌های انگولار برای عناصر *ngFor استفاده کرده‌ایم. دو حالت خاص transition وجود دارد: ':enter' برای زمانی که یک عنصر به DOM اضافه می‌شود، و ':leave' برای زمانی که حذف می‌گردد.
در اینجا، transition(':enter') با استفاده از style() مقدار اولیه شفافیت (opacity) و موقعیت را تنظیم کرده و سپس با animate() به وضعیت نهایی منتقل می‌شود. هر آیتم جدید هنگام ورود با انیمیشن ظاهر می‌شود که حس پویایی ایجاد می‌کند.
چنین الگوهایی در پروژه‌های واقعی کاربرد فراوان دارند، مانند نمایش اعلان‌ها، کارت‌ها، یا آیتم‌های فهرست. ارتباط مستقیم بین داده‌ها (Data Flow) و DOM تغییر یافته، نمونه‌ای از چرخه واکنشی (Reactive Lifecycle) انگولار است.
برای جلوگیری از خطا، باید اطمینان حاصل کرد که داده‌ها به‌درستی همگام‌سازی شده‌اند تا از تکرار یا حذف اشتباه جلوگیری شود. همچنین می‌توان با استفاده از استراتژی ChangeDetectionStrategy.OnPush کارایی انیمیشن‌ها را بهبود داد.

بهترین روش‌ها و خطاهای متداول در انگولار:

انیمیشن‌ها را فقط در سطح مؤلفه‌هایی تعریف کنید که به‌صورت مستقل مدیریت می‌شوند.
از Prop Drilling برای انتقال حالت‌های انیمیشن بین مؤلفه‌ها خودداری کنید؛ به‌جای آن از سرویس‌ها و RxJS Subjects بهره ببرید.
انیمیشن‌های غیرضروری را حذف کنید تا از بازپرداخت‌های (Re-render) غیرمفید جلوگیری شود.
برای کارایی بهتر، از CSS GPU Acceleration با transform و opacity استفاده کنید.
از keyframes برای انیمیشن‌های چندمرحله‌ای استفاده کنید تا کنترل بیشتری روی حرکات داشته باشید.
در هنگام اشکال‌زدایی، از Angular DevTools برای بررسی تغییرات DOM استفاده کنید.
هنگام کار با داده‌های حساس، از افزودن آن‌ها در متادیتای انیمیشن پرهیز کنید.
از انیمیشن‌ها برای هدایت کاربر در مسیر تعامل (User Flow) استفاده کنید، نه صرفاً زیبایی ظاهری.

📊 جدول مرجع

انگولار Element/Concept	Description	Usage Example
trigger	تعریف‌کننده شناسنامه انیمیشن در مؤلفه	trigger('fade', [...])
state	تعیین وضعیت ظاهری عنصر در حالت خاص	state('open', style({ opacity: 1 }))
transition	تعیین چگونگی تغییر بین دو حالت	transition('open => closed', [...])
animate	مشخص‌کننده زمان و منحنی حرکتی	animate('500ms ease-in-out')
keyframes	ایجاد انیمیشن‌های چندمرحله‌ای	animate('1s', keyframes([...]))
query	انتخاب مجموعه‌ای از عناصر برای انیمیشن	query('.item', [...])

خلاصه و مراحل بعدی در انگولار:
در این آموزش، یاد گرفتید که چگونه با استفاده از سیستم انیمیشن در انگولار، رابط‌های کاربری پویاتر و حرفه‌ای‌تر بسازید. آموختید که انیمیشن‌ها نه‌تنها جنبه زیبایی دارند بلکه بخشی از تعاملات کاربر با مؤلفه‌ها و جریان داده هستند.
انیمیشن‌ها با مدیریت حالت، چرخه عمر مؤلفه و جریان داده ترکیب می‌شوند تا تجربه کاربری روانی ارائه دهند. اکنون می‌توانید انیمیشن‌های پیچیده‌تر مانند انیمیشن‌های مسیر (Route Animations) و انیمیشن‌های داده‌محور را بررسی کنید.
برای یادگیری بیشتر، مطالعه Angular Animations Cookbook و مستندات رسمی انگولار توصیه می‌شود. همچنین، بررسی ابزارهای پیشرفته مانند GSAP برای ادغام با انگولار می‌تواند مهارت شما را در توسعه رابط‌های مدرن به سطح بالاتری برساند.

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان

انیمیشن‌ها

اشتراک این آموزش

مثال پایه

مثال کاربردی

📊 جدول مرجع

کلیدواژه‌های مرتبط

🧠 دانش خود را بیازمایید

دانش خود را بیازمایید

📝 دستورالعمل‌ها

🚧 دوره به زودی

Course Name

هنگام در دسترس بودن اطلاع دهید

اکنون در دسترس

Coming Soon

Course Name