on
Angular의 animation 기능 사용 방법
Angular의 animation 기능 사용 방법
728x90
SMALL
Angular는 기본적으로 애니메이션을 지원합니다. Angular가 지원하는 애니메이션은 CSS 기능을 기반으로 합니다. CSS 기능을 기반으로 하기 때문에 브라우저가 ‘애니메이션 가능한 속성이다’ 라고 간주하는 모든 부분에 애니메이션이 가능합니다.
즉, position, size, transform, color, border 등등에 애니메이션을 입히는 것이 가능합니다.
애니메이션에 대한 Angular 주요 모듈은 @angular/animations와 @angular/platform-browser 입니다. 만약 새 프로젝트를 만들 때 Angular CLI를 사용하시면 자동으로 프로젝트에 의존성이 추가됩니다. (다음에 나오는 예시의 경우 Angular CLI를 사용하여 생성한 프로젝트입니다.)
프로젝트에 Angular 애니메이션을 추가하고 싶다면 표준 Angular 기능과 함께 애니메이션 특정 모듈을 import하면 되는데요.
아래와 같이 root module(AppModule)에 BrowserAnimationsModule을 import를 해주시면 된다.
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component.ts'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {}
Angular CLI를 사용하여 프로젝트를 생성하신 경우에는 app.module.ts 파일은 src/app 디렉토리(폴더) 안에 있습니다.
만약 컴포넌트 파일에서 특정 애니메이션을 사용해야한다면 사용하실 기능을 해당 컴포넌트 ts파일에서 import하시면 사용하실 수 있습니다.
import { state, style, transition, animate, trigger } from '@angular/animations';
사용가능한 애니메이션 기능은 Angular 공식 문서에서 확인하실 수 있습니다.
728x90
이제 컴포넌트에 애니메이션을 적용하기 위해 @Component에 animations 메타데이터 속성을 추가해주면 됩니다.
@Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], animations: [ // 애니메이션 트리거를 여기에 넣으시면 됩니다. ] })
간단한 애니메이션을 예시로 animations에 넣어볼까요? 버튼이 open 상태이면 노란색으로 보여지고 closed 상태이면 초록색으로 보여지는 애니메이션을 구현해보겠습니다. (이 예시는 Angular 공식 문서에 있는 예시 중 하나입니다)
보통 이런 애니메이션을 구현할 때 CSS에선 color와 opacity를 사용하는 반면 Angular에선 style() 함수를 사용하여 특정 스타일에 애니메이션을 주는 것이 가능하고 애니메이션 상태에 특정 이름(open 또는 closed)을 주는 것도 state() 함수를 사용하면 가능합니다.
이 state() 함수는 2개의 인자를 받습니다. 첫번째는 유일한 이름(현재 예시에선 open, closed) 그리고 style() 함수를 받는데요. 첫번째 인자로 넘겨준 유일한 이름과 관련된 style들을 style() 함수내에 정의하면 됩니다.
이때 style() 함수에 인자로 원하시는 스타일을 Object로 넘겨주시면 되는데 주의할 점은 CSS와는 다르게 camelCase로 속성을 정의해야 한다는 점입니다. open과 closed상태에 대한 style()을 적용하면 아래와 같이 됩니다.
animations: [ state('open', style({ height: '200px', opacity: 1, backgroundColor: 'yellow' })), state('closed', style({ height: '100px', opacity: 0.5, backgroundColor: 'green' })), ]
이제 상태에 따른 style을 정의했으니 전환 타이밍을 지정해주면 부드럽게 open 에서 closed로 넘어가게 보이도록 할 수 있습니다. 이 때 사용하는 함수가 바로 transition() 함수입니다.
transition() 함수 역시 2개의 인자를 받는데요. 첫번째 인자는 2개의 전환 상태 사이의 방향에 대한 표현식, 2번째 인자는 animate() 함수(또는 여러개의 배열 형태의 animate() 함수)를 받습니다.
animate() 함수는 파라미터로 timings와 styles를 입력받습니다. 이 timings는 3개의 부분으로 이루어지는데요. animate(‘duration delay easing’) 이렇게 3개의 파트로 이루어져있습니다.
duration은 필수사항으로 숫자 또는 숫자와 함께 시간단위를 같이 사용할 수 있습니다. 밀리초가 기본이므로 animate(‘100’) 이렇게 작성하면 100밀리초동안 애니메이션이 지속된다는 뜻이기 때문에 보통 duration을 정의할 땐 ‘0.3s’ 이렇게 초단위를 같이 입력합니다.
delay는 duration과 같은 문법을 가집니다. animate(‘0.2s 100ms’) 이렇게 정의하면 애니메이션이 0.2초동안 지속되는데 100밀리초를 기다린 다음에 애니메이션이 시작된다는 뜻입니다.
마지막 easing은 런타임동안 애니메이션의 가속 및 감속을 제어하는 곳입니다. 예를 들어, ease-in이라고 정의하면 애니메이션 시작은 천천히 하지만 점차 빨라지도록 보이게 할 수 있습니다. animate(‘0.2s 100ms ease-out’) 이렇게 정의하면 100밀리초동안 기다리고 나서 애니메이션이 시작되며 0.2초동안 애니메이션이 동작하며 빠른 속도로 시작하여 점차 천천히 감속하는 애니메이션을 정의한 것입니다.
우리가 미리 정의해 놓았던 state()에 open에서 closed로 변경될 땐 1초의 애니메이션을 주고 closed에서 opend으로 변경될 때 0.5초의 애니메이션을 주고 싶다면 아래와 같이 transition()과 animate()를 정의해주면 됩니다.
animations: [ // state() 함수 정의... transition('open => closed', [ animate('1s') ]), transition('closed => open', [ animate('0.5s') ]), ]
자 이제 애니메이션 준비는 모두 완료되었습니다. 그렇다면 이 애니메니션을 발생시키기 위해선 어떻게 해야할까요?
애니메이션이 언제 시작되는지를 알려주기 위해 trigger() 함수를 사용할 수 있습니다.
SMALL
이 trigger() 함수는 여러 state()와 transition()들을 가질 수 있고 애니메이션에 이름을 줄 수도 있습니다. 그래서 html 요소에 트리거된 요소를 추가할 수 있습니다.
trigger() 함수는 변화를 감시할 속성이름을 지정하면 변화가 발생했을 때, 정의되어 있던 동작을 실행합니다. 이 동작은 transition()일 수도 있고 다른 함수일 수도 있습니다.
이제 trigger() 함수에 openClose라는 이름을 주고 우리의 애니메이션을 적용해 봅시다.
animations: [ trigger('openClose', [ state('open', style({ height: '200px', opacity: 1, backgroundColor: 'yellow' })), state('closed', style({ height: '100px', opacity: 0.5, backgroundColor: 'green' })), transition('open => closed', [ animate('1s') ]), transition('closed => open', [ animate('0.5s') ]), ]), ],
component.ts파일에 애니메이션을 적용했으니 이제 html파일에도 추가를 해주면 완성이 됩니다. html 태그에 정의한 trigger 이름을 적용하는 문법은 아래와 같습니다.
…
html div태그에 아래와 같이 추가하면 상태 변경에 따라 애니메이션이 동작하는 것을 확인할 수 있습니다.
Toggle Open/Close The box is now {{ isOpen ? 'Open' : 'Closed' }}!
동작 결과와 코드 스크린샷입니다.
Toggle Open
Toggle Close
app.module.ts
app.component.html
app.component.ts(1)
app.component.ts(2)
원글 : @su_bak 미디엄 블로그
728x90
LIST
from http://clap-yeon.tistory.com/49 by ccl(A) rewrite - 2021-12-21 12:00:31