ProgrammingFrontendAngular

[Angular] 애니메이션(Animation) 설명

, ,

Angular는 동적 웹 애플리케이션을 생성하기 위한 다양한 도구와 기능을 제공하는 강력한 JavaScript 프레임워크입니다. Angular의 주요 기능 중 하나는 애니메이션을 만드는 기능입니다. Angular 애니메이션은 움직임, 전환 및 기타 시각 효과를 추가하여 웹 애플리케이션에 생기를 불어넣는 방법을 제공합니다.

이 글에서는 interfaces, functions, classes, type aliases 및 lifecycle hooks 등을 포함하여 Angular 애니메이션의 다양한 측면을 다룰 것입니다.

Animations Module

Angular 애니메이션 모듈은 Angular 애플리케이션에서 애니메이션을 정의하고 관리하는 기본 모듈입니다. 복잡하고 아름다운 애니메이션을 만드는 데 사용할 수 있는 다양한 인터페이스, 클래스 및 기능을 제공합니다.

Animation Metadata

AnimationMetadata 인터페이스는 애니메이션 메타데이터를 정의하는 데 사용되는 기본 인터페이스입니다. AnimationStyleMetadata, AnimationKeyframesSequenceMetadata 및 AnimationAnimateMetadata를 포함한 여러 하위 인터페이스가 있습니다. 이러한 인터페이스는 생성할 수 있는 다양한 유형의 애니메이션을 정의하는 데 사용됩니다.

AnimationStyleMetadata

AnimationStyleMetadata 인터페이스는 애니메이션 스타일을 정의하는 데 사용됩니다. 여기에는 애니메이션의 타이밍과 모양을 정의하는 데 사용할 수 있는 offset, style 및 animateChild 와 같은 속성이 있습니다.

AnimationKeyframesSequenceMetadata

AnimationKeyframesSequenceMetadata 인터페이스는 애니메이션 키프레임 시퀀스를 정의하는 데 사용됩니다. 여기에는 애니메이션의 키프레임과 옵션을 정의하는 데 사용할 수 있는 steps 및 options 과 같은 속성이 있습니다.

AnimationAnimateMetadata

AnimationAnimateMetadata 인터페이스는 애니메이션 시퀀스를 정의하는 데 사용됩니다. 여기에는 애니메이션의 스타일, 키프레임 및 옵션을 정의하는 데 사용할 수 있는 style, keyframes 및 options 과 같은 속성이 있습니다.

AnimationTriggerMetadata

AnimationTriggerMetadata 인터페이스는 애니메이션 트리거를 정의하는 데 사용됩니다. 여기에는 트리거 이름, 애니메이션 정의 및 트리거 옵션을 정의하는 데 사용할 수 있는 name, definitions 및 options 과 같은 속성이 있습니다.

AnimationBuilder

AnimationBuilder 클래스는 애니메이션을 생성하고 구성하는 데 사용됩니다. 여기에는 애니메이션 시퀀스를 사용자에 맞게 사용할 수 있는 build, before, after 및 delay 과 같은 메서드가 있습니다.

AnimationFactory

AnimationFactory 클래스는 애니메이션 팩토리를 만드는 데 사용됩니다. 여기에는 새 애니메이션 팩토리를 만드는 데 사용할 수 있는 create 와 같은 메서드가 있습니다.

AnimationPlayer

AnimationPlayer 클래스는 애니메이션을 관리하는 데 사용됩니다. 여기에는 애니메이션 수명주기를 관리하는 데 사용할 수 있는 play, pause, reset, finish 와 같은 메서드가 있습니다.

AnimationEvent

AnimationEvent 클래스는 애니메이션 이벤트를 나타내는 데 사용됩니다. 여기에는 애니메이션 이벤트에 대한 정보를 검색하는 데 사용할 수 있는 fromState, toState 및 totalTime 과 같은 속성이 있습니다.

AnimationDriver

AnimationDriver 인터페이스는 애니메이션 드라이버를 정의하는 데 사용됩니다. 여기에는 애니메이션을 생성하고 관리하는 데 사용할 수 있는 animate, Listen 및 Flush 와 같은 메서드가 있습니다.

Animation Types

Angular는 역동적이고 매력적인 웹 애플리케이션을 만드는 데 사용할 수 있는 다양한 유형의 애니메이션을 제공합니다. 이러한 애니메이션 유형은 다음과 같습니다.

Transition Animation

Transition Animation은 상태나 뷰 간의 원활한 전환을 만드는 데 사용됩니다. fades, slides, rotations 과 같은 애니메이션을 만드는 데 사용할 수 있습니다.

Animation Sequencing

Animation Sequencing은 특정 순서로 발생하는 애니메이션을 만드는 데 사용됩니다. 여러 단계나 시퀀스가 포함된 복잡한 애니메이션을 만드는 데 사용할 수 있습니다.

Keyframe Animation

Keyframe Animation은 특정 키프레임이나 시점에 발생하는 애니메이션을 만드는 데 사용됩니다. 진동하는 버튼이나 깜박이는 배너와 같은 애니메이션을 만드는 데 사용할 수 있습니다.

State Change Animation

상태 변경 애니메이션은 상태가 변경될 때 발생하는 애니메이션을 만드는 데 사용됩니다. 확인란을 전환하거나 패널을 확장하는 등의 애니메이션을 만드는 데 사용할 수 있습니다.

Animations Interfaces

앞서 설명한 AnimationMetadata 및 AnimationTriggerMetadata 인터페이스 외에도 Angular에서 애니메이션을 만드는 데 사용할 수 있는 다른 인터페이스가 몇 가지 있습니다. 이러한 인터페이스에는 다음이 포함됩니다.

AnimationStateMetadata

AnimationStateMetadata 인터페이스는 애니메이션 상태를 정의하는 데 사용됩니다. 여기에는 상태 이름과 스타일을 정의하는 데 사용할 수 있는 name 및 style 과 같은 속성이 있습니다.

AnimationTransitionMetadata

AnimationTransitionMetadata 인터페이스는 애니메이션 전환을 정의하는 데 사용됩니다. 여기에는 한 상태에서 다른 상태로의 전환을 정의하는 데 사용할 수 있는 fromState, toState 및 animation 과 같은 속성이 있습니다.

AnimationQueryMetadata

AnimationQueryMetadata 인터페이스는 애니메이션 쿼리를 정의하는 데 사용됩니다. 여기에는 쿼리에 대한 선택기, 애니메이션 및 제한을 정의하는 데 사용할 수 있는 selector, animation 및 limit 과 같은 속성이 있습니다.

AnimationStaggerMetadata

AnimationStaggerMetadata 인터페이스는 애니메이션 스태거를 정의하는 데 사용됩니다. 여기에는 애니메이션 순서와 타이밍을 정의하는 데 사용할 수 있는 animate, start, interval 및 by 과 같은 속성이 있습니다.

AnimationGroupMetadata

AnimationGroupMetadata 인터페이스는 애니메이션 그룹을 정의하는 데 사용됩니다. 여기에는 애니메이션 그룹의 단계를 정의하는 데 사용할 수 있는 steps 와 같은 속성이 있습니다.

Animation Functions

Angular는 애니메이션을 만드는 데 사용할 수 있는 여러 내장 함수를 제공합니다. 이러한 기능에는 다음이 포함됩니다.

animate()

animate() 함수는 키프레임 애니메이션을 만드는 데 사용됩니다. 지속 시간과 일련의 키프레임을 매개변수로 사용합니다.

transition()

transition() 함수는 전환 애니메이션을 생성하는 데 사용됩니다. 두 가지 상태, 스타일 세트, 선택적 타이밍 기능을 매개변수로 사용합니다.

trigger()

trigger() 함수는 애니메이션 트리거를 정의하는 데 사용됩니다. 이름과 일련의 애니메이션 정의를 매개변수로 사용합니다.

Animation Enums

Angular는 애니메이션을 구성하는 데 사용할 수 있는 여러 열거형도 제공합니다. 이러한 열거형에는 다음이 포함됩니다.

AnimationStyleMetadata

AnimationStyleMetadata 열거형은 애니메이션의 타이밍과 모양을 정의하는 데 사용됩니다. 여기에는 애니메이션의 모양과 타이밍을 정의하는 데 사용할 수 있는 opacity, transform 및 display 와 같은 속성이 있습니다.

AnimationMetadataType

AnimationMetadataType 열거형은 애니메이션 메타데이터 유형을 정의하는 데 사용됩니다. 여기에는 다양한 유형의 애니메이션 메타데이터에 해당하는 Style, Keyframes, Animate 과 같은 값이 있습니다.

Animation Consts

마지막으로 Angular는 애니메이션을 구성하는 데 사용할 수 있는 몇 가지 내장 상수를 제공합니다. 이러한 상수에는 다음이 포함됩니다.

AUTO_STYLE

AUTO_STYLE 상수는 요소의 스타일을 자동 스타일로 설정하는 데 사용됩니다. 요소의 자연 상태에 적응하는 동적 애니메이션을 만드는 데 사용할 수 있습니다.

TIME

TIME 상수는 애니메이션의 타이밍을 설정하는 데 사용됩니다. 특정 기간 동안 발생하는 애니메이션을 만드는 데 사용할 수 있습니다.

Animation Lifecycle Hooks

Angular는 애니메이션을 제어하는 데 사용할 수 있는 여러 수명 주기 후크를 제공합니다. 이러한 후크에는 다음이 포함됩니다.

AnimationStart

AnimationStart Hook 는 애니메이션 재생이 시작될 때 호출됩니다.

AnimationDone

AnimationDone Hook 는 애니메이션이 완료되면 호출됩니다.

AnimationDestroy

AnimationDestroy Hook 는 애니메이션이 삭제될 때 호출됩니다.

이러한 Hook 를 사용하면 애니메이션이 완료될 때 다른 애니메이션을 시작하거나 중지하는 등의 추가 작업을 수행할 수 있습니다.

Animation Testing

Angular는 단위 및 통합 테스트에서 애니메이션을 테스트하기 위한 여러 도구를 제공합니다. 이러한 도구에는 다음이 포함됩니다.

MockAnimationPlayer

MockAnimationPlayer 클래스는 테스트에 사용할 수 있는 모의 애니메이션 플레이어를 만드는 데 사용됩니다. 애니메이션 재생, 일시정지, 완료 등 애니메이션을 시뮬레이션하는 방법을 제공합니다.

NoopAnimationsModule

NoopAnimationsModule은 테스트에서 애니메이션을 비활성화하는 데 사용됩니다. 실제로 애니메이션을 실행하지 않고 애니메이션을 사용하는 컴포넌트를 테스트하는 데 사용할 수 있습니다.

다음은 Angular 애니메이션의 사용을 보여주는 예입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import { Component, OnInit } from '@angular/core';
import {
  trigger,
  state,
  style,
  transition,
  animate,
  AnimationEvent,
  AnimationBuilder,
  AnimationFactory,
  AnimationPlayer,
} from '@angular/animations';

@Component({
  selector: 'app-animation-example',
  template: `
    <div (click)="toggleState()" [@myTrigger]="currentState">
      {{ currentState }}
    </div>
  `,
  animations: [
    trigger('myTrigger', [
      state('one', style({ transform: 'translateX(0)' })),
      state('two', style({ transform: 'translateX(100%)' })),
      transition('one => two', animate('500ms ease-in')),
      transition('two => one', animate('500ms ease-out')),
    ]),
  ],
})
export class AnimationExampleComponent implements OnInit {
  currentState = 'one';
  private player: AnimationPlayer;

  constructor(private builder: AnimationBuilder) {}

  ngOnInit(): void {
    this.createPlayer();
  }

  toggleState(): void {
    this.currentState = this.currentState === 'one' ? 'two' : 'one';
    this.player.play();
  }

  private createPlayer(): void {
    const factory: AnimationFactory = this.builder.build([style({ opacity: 0 }), animate('1s', style({ opacity: 1 }))]);

    this.player = factory.create(document.querySelector('div'));
    this.player.play();
  }

  onAnimationStart(event: AnimationEvent): void {
    console.log(`Animation started: ${event.triggerName}`);
  }

  onAnimationDone(event: AnimationEvent): void {
    console.log(`Animation ended: ${event.triggerName}`);
  }
}

이 예에는 [@myTrigger] 애니메이션 트리거를 사용하여 두 상태 간을 전환하는 간단한 컴포넌트가 있습니다. 트리거 이름과 상태 및 전환 배열을 사용하는 trigger() 함수를 사용하여 트리거를 정의합니다. 또한 컴포넌트에 대한 페이드인 애니메이션을 생성하는 AnimationBuilder 클래스를 사용하여 두 번째 애니메이션을 정의합니다.

컴포넌트가 초기화되면 AnimationFactory 클래스와 AnimationBuilder 를 사용하여 AnimationPlayer 클래스의 인스턴스를 만듭니다. 이 플레이어를 사용하여 컴포넌트가 로드될 때 페이드인 애니메이션을 재생합니다.

사용자가 컴포넌트를 클릭하면 현재 상태를 전환하고 AnimationPlayer 를 사용하여 전환 애니메이션을 재생합니다.

마지막으로 애니메이션이 시작되고 끝날 때 각각 호출되는 onAnimationStart 및 onAnimationDone 이라는 두 개의 수명 주기 Hook 를 정의합니다. 이 예에서는 이러한 Hook 가 호출될 때 콘솔에 메시지를 기록합니다.

다음은 Angular 애니메이션을 사용하여 커스터마이징 애니메이션 로딩 스피너를 만드는 방법을 보여주는 좀 더 복잡한 예입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import { Component, Input, OnInit } from '@angular/core';
import {
  trigger,
  style,
  animate,
  transition,
  keyframes,
  AnimationBuilder,
  AnimationFactory,
  AnimationPlayer,
} from '@angular/animations';

@Component({
  selector: 'app-spinner',
  template: `
    <div class="spinner" *ngIf="show">
      <div class="bar" *ngFor="let bar of bars; let i = index" [@loadingState]="i + 1"></div>
    </div>
  `,
  styles: [
    `
      .spinner {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
      }

      .bar {
        width: 5px;
        height: 20px;
        margin: 0 5px;
        border-radius: 2px;
      }
    `,
  ],
  animations: [
    trigger('loadingState', [
      transition(
        '* => 1',
        animate(
          '{{duration}}',
          keyframes([
            style({ transform: 'scaleY(0)', offset: 0 }),
            style({ transform: 'scaleY(1)', offset: 0.5 }),
            style({ transform: 'scaleY(0)', offset: 1 }),
          ])
        )
      ),
      transition(
        '* => 2',
        animate(
          '{{duration}} {{delay}}',
          keyframes([
            style({ transform: 'scaleY(0)', offset: 0 }),
            style({ transform: 'scaleY(1)', offset: 0.5 }),
            style({ transform: 'scaleY(0)', offset: 1 }),
          ])
        )
      ),
      transition(
        '* => 3',
        animate(
          '{{duration}} {{delay}}',
          keyframes([
            style({ transform: 'scaleY(0)', offset: 0 }),
            style({ transform: 'scaleY(1)', offset: 0.5 }),
            style({ transform: 'scaleY(0)', offset: 1 }),
          ])
        )
      ),
      transition(
        '* => 4',
        animate(
          '{{duration}} {{delay}}',
          keyframes([
            style({ transform: 'scaleY(0)', offset: 0 }),
            style({ transform: 'scaleY(1)', offset: 0.5 }),
            style({ transform: 'scaleY(0)', offset: 1 }),
          ])
        )
      ),
      transition(
        '* => 5',
        animate(
          '{{duration}} {{delay}}',
          keyframes([
            style({ transform: 'scaleY(0)', offset: 0 }),
            style({ transform: 'scaleY(1)', offset: 0.5 }),
            style({ transform: 'scaleY(0)', offset: 1 }),
          ])
        )
      ),
    ]),
  ],
})
export class SpinnerComponent implements OnInit {
  @Input() duration = '500ms';
  @Input() delay = '100ms';
  @Input() count = 5;
  show = false;
  bars: number[] = [];

  constructor(private builder: AnimationBuilder) {}

  ngOnInit(): void {
    this.bars = new Array(this.count).fill(0);
    this.show = true;
    this.createPlayer();
  }

  private createPlayer(): void {
    const factory: AnimationFactory = this.builder.build([
      style({ opacity: 0 }),
      animate('1s', style({ opacity: 1 })),
      animate('1s', style({ opacity: 0 })),
    ]);

    this.player = factory.create(document.querySelector('.spinner'));
    this.player.onDone(() => (this.show = false));
    this.player.play();
  }
}

이 예에는 사용자에 맞게 애니메이션 로딩 스피너를 표시하는 컴포넌트가 있습니다. 스피너는 순차적으로 펄스 및 크기 증가 및 감소하는 5개의 수직 막대로 구성됩니다. 애니메이션 키프레임을 지정하기 위해 trigger() 함수와 keyframes() 함수를 사용하여 애니메이션을 정의합니다.

결론

요약하면 Angular는 웹 애플리케이션에서 애니메이션을 생성, 제어 및 테스트하기 위한 포괄적인 도구 세트를 제공합니다. 이러한 도구에는 사용자 경험을 향상하고 애플리케이션에 생명을 불어넣는 복잡하고 매력적인 애니메이션을 만드는 데 사용할 수 있는 interfaces, functions, classes, type aliases 및 lifecycle hooks 가 포함됩니다.

Share