10 애니메이션(Animation) 05

키프레임을 이용한 다단계 애니메이션

애니메이션 키프레임은 간단한 전환을 넘어 두 세트의 스타일 간에 전환할 때 하나 이상의 중간 스타일을 통과하는 보다 복잡한 애니메이션을 구현합니다.

각 키프레임에 대해 키프레임을 적용하는 애니메이션의 특정 시점을 정의하는 오프셋을 지정합니다. 오프셋은 애니메이션의 시작을 나타내는 0과 끝을 나타내는 1 사이의 숫자입니다.

이 예제에서는 키프레임을 이용하여 애니메이션에 "바운스"를 추가하여 애니메이션을 들어오고 나갑니다.

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

animations: [   trigger('flyInOut', [     state('in', style({transform: 'translateX(0)'})),     transition('void => *', [       animate(300, keyframes([         style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),         style({opacity: 1, transform: 'translateX(15px)',  offset: 0.3}),         style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})       ]))     ]),     transition('* => void', [       animate(300, keyframes([         style({opacity: 1, transform: 'translateX(0)',     offset: 0}),         style({opacity: 1, transform: 'translateX(-15px)', offset: 0.7}),         style({opacity: 0, transform: 'translateX(100%)',  offset: 1.0})       ]))     ])   ]) ]

오프셋은 절대 시간으로 정의되지 않습니다. 그것들은 0부터 1까지 상대적인 척도입니다. 애니메이션의 최종 타임 라인은 키프레임 오프셋, 기간, 지연 및 완화 작업의 조합을 기반으로 합니다.

키 프레임에 대한 오프셋의 정의는 선택 사항입니다. 이를 생략하면 간격이 균일 한 오프셋이 자동으로 지정됩니다. 예를 들어 사전 정의 된 오프셋이 없는 3개의 키프레임에는 0, 0.5 및 1 오프셋이 제공됩니다.

 

병렬 애니메이션 그룹

여러 스타일 프로퍼티를 동시에 애니메이션으로 만드는 방법을 보았습니다. 모든 스타일 속성을 동일한 style() 정의에 넣기 만하면됩니다.

그러나 병렬로 발생하는 애니메이션의 타이밍을 다르게 구성 할 수도 있습니다. 예를 들어 두 개의 CSS 프로퍼티에 애니메이션을 적용하고 각 CSS 프로퍼티에 대해 다른 완화 기능을 사용할 수 있습니다.

이를 위해 애니메이션 그룹을 사용할 수 있습니다. 이 예에서, 입장 및 퇴장시 그룹을 사용하면 두 가지 다른 타이밍 구성이 가능합니다. 둘다 모두 같은 엘리먼트에 병렬로 적용되지만 서로 독립적으로 실행됩니다.

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

animations: [   trigger('flyInOut', [     state('in', style({width: 120, transform: 'translateX(0)', opacity: 1})),     transition('void => *', [       style({width: 10, transform: 'translateX(50px)', opacity: 0}),       group([         animate('0.3s 0.1s ease', style({           transform: 'translateX(0)',           width: 120         })),         animate('0.3s ease', style({           opacity: 1         }))       ])     ]),     transition('* => void', [       group([         animate('0.3s ease', style({           transform: 'translateX(50px)',           width: 10         })),         animate('0.3s 0.2s ease', style({           opacity: 0         }))       ])     ])   ]) ]

하나의 그룹은 엘리먼트 변환 및 폭을 움직입니다. 다른 그룹은 불투명도를 움직입니다.

 

애니메이션 콜백

콜백은 애니메이션을 시작할 때 와 완료할 때 호출됩니다.

키프레임 예제에서 @flyInOut이라는 트리거가 있습니다. 다음과 같은 콜백을 연결할 수 있습니다.

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

template: `   <ul>     <li *ngFor="let hero of heroes"         (@flyInOut.start)="animationStarted($event)"         (@flyInOut.done)="animationDone($event)"         [@flyInOut]="'in'">       {{hero.name}}     </li>   </ul> `,

콜백은 fromState, toState 및 totalTime과 같은 유용한 프로퍼티를 포함하는 AnimationEvent를 수신합니다.

이러한 콜백은 애니메이션이 픽업되었는지 여부에 관계없이 실행됩니다.