[angular] 애니메이션 구성

26 Dec 2023

angular

Angular는 웹 애플리케이션에서 애니메이션을 구현하는 데 도움을 주는 강력한 기능을 제공합니다. 애니메이션을 구성하는 것은 페이지의 사용자 경험을 향상시키는 데 중요한 역할을 합니다. Angular로 애니메이션을 구성하는 방법을 자세히 살펴보겠습니다.

애니메이션 모듈 가져오기

애니메이션을 구성하려면 먼저 @angular/animations 모듈을 가져와야 합니다.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

애니메이션 설정

애니메이션을 사용하려면 애플리케이션의 모듈에서 BrowserAnimationsModule을 imports 배열에 추가해야 합니다.

@NgModule({
  imports: [
    BrowserAnimationsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

애니메이션 적용

애니메이션을 적용하려면 @angular/animations 모듈에서 제공하는 trigger, state, style, animate 등의 함수를 사용하여 애니메이션을 정의해야 합니다.

예를 들어, 다음과 같이 단순한 애니메이션을 정의할 수 있습니다.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('simpleAnimation', [
      state('start', style({
        backgroundColor: 'red'
      })),
      state('end', style({
        backgroundColor: 'blue'
      })),
      transition('start => end', [
        animate('2s')
      ]),
      transition('end => start', [
        animate('1s')
      ])
    ])
  ]
})
export class AppComponent implements OnInit {
  currentState = 'start';

  toggleState() {
    this.currentState = this.currentState === 'start' ? 'end' : 'start';
  }
}

위 예제에서는 trigger 함수로 simpleAnimation을 정의하고, state 함수로 애니메이션 상태를 정의한 후 transition 함수로 애니메이션 상태 전환을 정의하였습니다.

결론

Angular를 사용하면 쉽게 애니메이션을 구성할 수 있습니다. 따라서 사용자의 시각적 경험을 향상시키기 위해 애니메이션 구성에 대한 지식을 활용해 보는 것이 좋습니다.

이상으로 Angular 애니메이션 구성에 대해 알아보았습니다.

참고 자료: