Angular는 사용자 인터페이스를 더욱 흥미롭게 만들기 위해 애니메이션을 지원합니다. 애니메이션을 사용하면 화면 전환이나 요소의 상태 변화에 부드럽고 동적인 효과를 줄 수 있습니다. Angular 애니메이션은 컴포넌트 상태 변화에 따라 애니메이션을 적용할 수 있는 강력한 도구입니다.
이번 포스트에서는 Angular 애니메이션의 기본적인 사용법과 몇 가지 실제 예제를 살펴보겠습니다.
목차
Angular 애니메이션 소개
Angular 애니메이션은 Angular 애플리케이션에서 요소의 상태 변화, 화면 전환, 또는 특정 이벤트에 따라 애니메이션을 적용할 수 있도록 하는 기능입니다. Angular의 @angular/animations 모듈을 사용하여 기본적인 애니메이션을 설정하고 제어할 수 있습니다.
애니메이션 모듈 설정하기
Angular 애니메이션을 사용하려면 먼저 애플리케이션 모듈에서 BrowserAnimationsModule 또는 NoopAnimationsModule을 import해야 합니다. BrowserAnimationsModule은 브라우저에서 애니메이션을 지원하고 NoopAnimationsModule은 애니메이션을 비활성화합니다.
다음과 같이 애플리케이션 모듈에서 BrowserAnimationsModule을 import합니다.
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserAnimationsModule
],
// ...
})
export class AppModule { }
기본적인 애니메이션 적용하기
Angular에서 기본적인 애니메이션을 적용하는 방법은 간단합니다. 예를 들어, 요소의 페이드인 애니메이션을 적용하려면 @angular/animations 패키지에서 제공하는 trigger, state, transition, style, animate 등의 메서드를 사용하여 다음과 같이 애니메이션을 정의합니다.
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
selector: 'app-fade-in',
template: '<div [@fadeInOut]>Hello Angular Animation</div>',
animations: [
trigger('fadeInOut', [
state('void', style({ opacity: 0 })),
state('*', style({ opacity: 1 })),
transition('void => *', animate('1s')),
transition('* => void', animate('1s'))
])
]
})
export class FadeInOutComponent { }
컴포넌트 상태에 따른 애니메이션 적용하기
Angular 애니메이션은 컴포넌트의 특정 상태에 따라 애니메이션을 적용할 수 있습니다. 예를 들어, 버튼을 클릭했을 때 요소를 확대하는 애니메이션을 적용하려면 다음과 같이 @angular/animations 패키지의 메서드를 사용하여 애니메이션을 정의합니다.
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
selector: 'app-button-expand',
template: '<button (click)="expand()">Expand</button><div [@expandCollapse]="currentState">Angular Animation</div>',
animations: [
trigger('expandCollapse', [
state('collapsed', style({ height: '0', opacity: 0 })),
state('expanded', style({ height: '*', opacity: 1 })),
transition('collapsed <=> expanded', animate('500ms ease-in-out'))
])
]
})
export class ButtonExpandComponent {
currentState = 'collapsed';
expand() {
this.currentState = this.currentState === 'collapsed' ? 'expanded' : 'collapsed';
}
}
커스텀 트랜지션 정의하기
Angular 애니메이션을 사용하면 사용자 정의 트랜지션을 정의하여 요소의 상태 전환에 따른 애니메이션을 쉽게 적용할 수 있습니다. 다음과 같이 애니메이션을 정의하고 사용자 정의 트랜지션을 적용합니다.
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
@Component({
selector: 'app-custom-transition',
template: '<div (click)="toggleState()" [@myCustomTransition]="state">Custom Transition</div>',
animations: [
trigger('myCustomTransition', [
transition('void => *', [
animate('1s', keyframes([
style({ opacity: 0, transform: 'translateY(-100%)', offset: 0 }),
style({ opacity: 1, transform: 'translateY(25px)', offset: 0.5 }),
style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 })
]))
]),
transition('* => void', [
animate('1s', keyframes([
style({ opacity: 1, transform: 'translateY(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateY(-25px)', offset: 0.5 }),
style({ opacity: 0, transform: 'translateY(100%)', offset: 1.0 })
]))
])
])
]
})
export class CustomTransitionComponent {
state: string = 'inactive';
toggleState() {
this.state = this.state === 'inactive' ? 'active' : 'inactive';
}
}
마무리
Angular 애니메이션을 사용하여 웹 애플리케이션에 동적인 효과를 쉽게 추가할 수 있습니다. 위의 예제를 참고하여 새로운 애니메이션을 만들어보고 화면의 상태 변화에 따른 다양한 애니메이션을 적용해보세요. Angular 공식문서에서 더 자세한 내용을 확인할 수 있으니 참고하시기 바랍니다.
참고
이상으로 Angular 애니메이션에 대한 간단한 소개를 마치도록 하겠습니다. 부족한 내용이 있을 수 있으니 자세한 내용은 공식 문서를 참고하시기 바랍니다. 감사합니다.