10 애니메이션(Animation) 01

애니메이션(Animation)

모션은 현대 웹 어플리케이션의 디자인에서 중요한 부분입니다. 훌륭한 사용자 인터페이스는 필요한 곳에서 주의를 환기시키는 흥미 진진한 애니메이션으로 상태사이을 부드럽게 전환합니다. 잘 디자인 된 애니메이션은 UI를 재미 있고 즐겁게 사용할 수 있게 합니다.

 

개요

Angular의 애니메이션 시스템을 사용하면 순수 CSS 애니메이션에서와 동일한 종류의 기본 성능으로 실행되는 애니메이션을 제작할 수 있습니다. 애니메이션 로직을 나머지 어플리케이션 코드와 긴밀하게 통합하여 손쉽게 제어 할 수 있습니다.

Angular 애니메이션은 표준 Web Animations API 위에 구축되어 있으며 이를 지원하는 브라우저에서 기본적으로 실행됩니다. 다른 브라우저의 경우 polyfill이 필요합니다. GitHub에서 web-animations.min.js를 가져와서 페이지에 추가하십시오.

 

이 페이지의 예제는 라이브 예제 / 다운로드 예제로 제공됩니다.

 

퀵스타트 예 : 두 상태 간 전환

모델 애트리뷰트에 의해 구동되는 두 상태 사이에서 엘리먼트를 전환하는 간단한 애니메이션을 만들 수 있습니다.

애니메이션은 @Component 메타 데이터 내에서 정의됩니다. 애니메이션을 추가하기 전에 몇 가지 애니메이션 관련 클래스 와 함수를 가져와야합니다.

app.module.ts (@NgModule imports excerpt)

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

 

hero-list-basic.component.ts

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

이를 통해 컴포넌트 메타 데이터에서 heroState라는 애니메이션 트리거를 정의 할 수 있습니다. 애니메이션을 사용하여 active와 inactive의 두 상태 사이를 전환합니다. 영웅이 활성화되면 엘리먼트가 약간 큰 크기와 밝은 색으로 나타납니다.

hero-list-basic.component.ts (@Component excerpt)

animations: [   trigger('heroState', [     state('inactive', style({       backgroundColor: '#eee',       transform: 'scale(1)'     })),     state('active',   style({       backgroundColor: '#cfd8dc',       transform: 'scale(1.1)'     })),     transition('inactive => active', animate('100ms ease-in')),     transition('active => inactive', animate('100ms ease-out'))   ]) ]

 

이 예제에서는 애니메이션 메타 데이터에서 애니메이션 스타일(색상 및 변형)을 인라인으로 정의하고 있습니다.

이제 [@triggerName] 구문을 사용하여 방금 정의한 애니메이션을 컴포넌트 템플릿의 하나 이상의 엘리먼트에 연결합니다.

hero-list-basic.component.ts (excerpt)

template: `   <ul>     <li *ngFor="let hero of heroes"         [@heroState]="hero.state"         (click)="hero.toggleState()">       {{hero.name}}     </li>   </ul> `,

여기서 애니메이션 트리거는 ngFor에 의해 반복되는 모든 엘리먼트에 적용됩니다. 반복되는 각 엘리먼트는 독립적으로 움직입니다. 어트리뷰트의 값은 표현식 hero.state에 바인드되며 항상 active 또는 inactive입니다.

이 설정을 사용하면 영웅 개체가 상태를 바꿀 때마다 애니메이션 전환이 나타납니다. 전체 컴포넌트 구현은 다음과 같습니다.

hero-list-basic.component.ts

import {   Component,   Input } from '@angular/core'; import {   trigger,   state,   style,   animate,   transition } from '@angular/animations';   import { Heroes } from './hero.service';   @Component({   selector: 'hero-list-basic',   template: `     <ul>       <li *ngFor="let hero of heroes"           [@heroState]="hero.state"           (click)="hero.toggleState()">         {{hero.name}}       </li>     </ul>   `,   styleUrls: ['./hero-list.component.css'],   animations: [     trigger('heroState', [       state('inactive', style({         backgroundColor: '#eee',         transform: 'scale(1)'       })),       state('active',   style({         backgroundColor: '#cfd8dc',         transform: 'scale(1.1)'       })),       transition('inactive => active', animate('100ms ease-in')),       transition('active => inactive', animate('100ms ease-out'))     ])   ] }) export class HeroListBasicComponent {   @Input() heroes: Heroes; }