Skip to content

4. 애니메이션 재사용하기

1. 사전지식

다음 내용은 미리 이해하고 이 문서를 보는 것이 좋다:



2. 애니메이션 정의하기

애니메이션을 재사용하려면 animation() 함수를 사용해서 애니메이션만 .ts 파일에 따로 정의하고 이 애니메이션을 상수(const)로 선언한 후에 파일 외부로 공개해야 한다. 그러면 컴포넌트 메타데이터에서 useAnimation() API로 이 애니메이션을 불러와서 적용할 수 있다.


src/app/animations.ts
import {
  animation,
  style,
  animate,
  trigger,
  transition,
  useAnimation,
} from "@angular/animations";

export const transitionAnimation = animation([
  style({
    height: "{{ height }}",
    opacity: "{{ opacity }}",
    backgroundColor: "{{ backgroundColor }}",
  }),
  animate("{{ time }}"),
]);


위 예제 코드에서 transitionAnimation이 재사용될 수 있도록 선언된 애니메이션이다.


Note

  • height, opacity, backgroundColor, time은 실행 시점에 다시 지정할 수 있다.


애니메이션은 일부만 외부로 공개할 수도 있다. trigger 애니메이션만 외부로 공개해 보자.


src/app/animations.1.ts
import {
  animation,
  style,
  animate,
  trigger,
  transition,
  useAnimation,
} from "@angular/animations";
export const triggerAnimation = trigger("openClose", [
  transition("open => closed", [
    useAnimation(transitionAnimation, {
      params: {
        height: 0,
        opacity: 1,
        backgroundColor: "red",
        time: "1s",
      },
    }),
  ]),
]);


이제부터는 컴포넌트 클래스에 애니메이션을 로드해서 재사용할 수 있다. 아래 예제 코드는 useAnimation() 메서드 안에 transitionAnimation을 사용한 예제 코드이다.


src/app/open-close.component.ts
import { Component } from '@angular/core';
import { transition, trigger, useAnimation } from '@angular/animations';
import { transitionAnimation } from './animations';

@Component({
  selector: 'app-open-close-reusable',
  animations: [
    trigger('openClose', [
      transition('open => closed', [
        useAnimation(transitionAnimation, {
          params: {
            height: 0,
            opacity: 1,
            backgroundColor: 'red',
            time: '1s'
          }
        })
      ])
    ])
  ],
  templateUrl: 'open-close.component.html',
  styleUrls: ['open-close.component.css']
})

References