10 애니메이션(Animation) 02

상태 및 전환

Angular 애니메이션은 논리 상태와 상태간 전환으로 정의됩니다.

애니메이션 상태는 응용프로그램 코드에서 정의하는 문자열 값입니다. 위의 예에서 'active'및 'inactive'상태는 영웅 개체의 논리 상태를 기반으로 합니다. 상태의 소스는 이 경우처럼 간단한 객체 속성일 수도 있고 메소드에서 계산된 값일 수도 있습니다. 중요한 것은 컴포넌트의 템플릿에서 읽을 수 있다는 것입니다.

각 애니메이션 상태에 대한 스타일을 정의 할 수 있습니다.

src/app/hero-list-basic.component.ts

state('inactive', style({   backgroundColor: '#eee',   transform: 'scale(1)' })), state('active',   style({   backgroundColor: '#cfd8dc',   transform: 'scale(1.1)' })),

이러한 state 정의는 각 상태의 종료 스타일을 지정합니다. 이 엘리먼트는 일단 해당 상태로 전환되면 엘리먼트에 적용되며, 해당 상태로 남아 그대로 유지됩니다. 실제로 당신은 각기 다른 상태에서 엘리먼트가 어떤 스타일을 가져야 하는지를 정의해야 합니다.

상태를 정의한 후에는 상태 사이에 전환을 정의할 수 있습니다. 각 전환은 한 세트의 스타일과 다음 세트간의 전환시기를 제어합니다.

src/app/hero-list-basic.component.ts

transition('inactive => active', animate('100ms ease-in')), transition('active => inactive', animate('100ms ease-out'))

여러 트랜지션이 동일한 타이밍 설정을 갖는 경우, 같은 transition 정의로 결합 할 수 있습니다:

src/app/hero-list-combined-transitions.component.ts

transition('inactive => active, active => inactive',  animate('100ms ease-out'))

앞의 예제에서와 같이 전환의 양방향이 같은 타이밍을 가질 경우, 단축 구문 <=>을 사용할 수 있습니다.

src/app/hero-list-twoway.component.ts

transition('inactive <=> active', animate('100ms ease-out'))

애니메이션 중간에 스타일을 적용할 수 있지만 애니메이션이 끝난 후에는 스타일을 유지하지 마십시오. transition에서 이러한 스타일을 인라인으로 정의 할 수 있습니다. 이 예제에서 요소는 한 세트의 스타일을 즉시 수신 한 후 다음 스타일로 움직입니다. 전환이 완료되면 state에 정의되어있지 않으므로 유지되지 않습니다.

src/app/hero-list-inline-styles.component.ts

transition('inactive => active', [   style({     backgroundColor: '#cfd8dc',     transform: 'scale(1.3)'   }),   animate('80ms ease-in', style({     backgroundColor: '#eee',     transform: 'scale(1)'   })) ]),

 

와일드카드 상태 *

* ( "와일드카드") 상태는 모든 애니메이션 상태와 일치합니다. 이는 애니메이션이 어느 상태에 있는지에 관계없이 적용되는 스타일 및 전환을 정의 할 때 유용합니다. 예를 들면 다음과 같습니다.

l  active => * 전환은 엘리먼트의 상태가 active 상태에서 다른 어떤 상태로 변경되면 적용됩니다.

l  * => * 전환은 두 상태 간에 어떤 변경이든 발생하면 적용됩니다.

 

void 상태

void라는 특별한 상태를 애니메이션에 적용할 수 있습니다. 엘리먼트가 뷰에 적용되지 않은 경우 적용됩니다. 아마도 엘리먼트가 뷰에 추가되지 않았거나 제거 되었기 때문입니다. void 상태는 진입 및 이탈 애니메이션 정의에 유용합니다.

예를 들어 * => void 전환은 뷰를 벗어나지 전의 상태가 어떤 상태이든 관계없이 엘리먼트가 뷰를 떠날 때 적용됩니다.