Angular 4-애니메이션

애니메이션은 html 요소 사이에 많은 상호 작용을 추가합니다. Angular2에서도 애니메이션을 사용할 수 있습니다. Angular 4와의 차이점은 애니메이션이 더 이상@angular/core 라이브러리로 가져와야하는 별도의 패키지입니다. app.module.ts.

시작하려면 다음과 같이 라이브러리를 가져와야합니다.

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

그만큼 BrowserAnimationsModule 가져 오기 배열에 추가해야합니다. app.module.ts 아래와 같이-

app.module.ts

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html, 애니메이션 될 html 요소를 추가했습니다.

<div>
   <button (click)="animate()">Click Me</button>
   <div [@myanimation] = "state" class="rotate">
      <img src="assets/images/img.png" width="100" height="100">
   </div>
</div>

메인 div의 경우 이미지가있는 버튼과 div를 추가했습니다. 애니메이션 기능이 호출되는 클릭 이벤트가 있습니다. 그리고 div의 경우@myanimation 지시문이 추가되고 값이 상태로 제공됩니다.

이제 보자 app.component.ts 애니메이션이 정의 된 곳입니다.

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   styles:[`
      div{
         margin: 0 auto;
         text-align: center;
         width:200px;
      }
      .rotate{
         width:100px;
         height:100px;
         border:solid 1px red;
      }
   `],
   animations: [
      trigger('myanimation',[
         state('smaller',style({
            transform : 'translateY(100px)'
         })),
         state('larger',style({
            transform : 'translateY(0px)'
         })),
         transition('smaller <=> larger',animate('300ms ease-in'))
      ])
   ]
})

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == 'larger' ? 'smaller' : 'larger';
   }
}

위와 같이 .ts 파일에서 사용할 애니메이션 함수를 임포트해야합니다.

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

여기에서는 @ angular / animations에서 트리거, 상태, 스타일, 전환 및 애니메이션을 가져 왔습니다.

이제 @Component () 데코레이터에 animations 속성을 추가합니다.

animations: [
   trigger('myanimation',[
      state('smaller',style({
         transform : 'translateY(100px)'
      })),
      state('larger',style({
         transform : 'translateY(0px)'
      })),
      transition('smaller <=> larger',animate('300ms ease-in'))
   ])
]

트리거는 애니메이션의 시작을 정의합니다. 첫 번째 매개 변수는 애니메이션을 적용해야하는 html 태그에 지정할 애니메이션의 이름입니다. 두 번째 매개 변수는 가져온 함수 (상태, 전환 등)입니다.

그만큼 state기능에는 요소가 전환되는 애니메이션 단계가 포함됩니다. 지금 우리는 더 작은 상태와 더 큰 두 가지 상태를 정의했습니다. 더 작은 상태의 경우 스타일을 지정했습니다.transform:translateY(100px)transform:translateY(100px).

전환 기능은 html 요소에 애니메이션을 추가합니다. 첫 번째 인수는 상태, 즉 시작 및 종료를 취합니다. 두 번째 인수는 애니메이션 함수를받습니다. 애니메이션 기능을 사용하면 전환의 길이, 지연 및 이징을 정의 할 수 있습니다.

이제 .html 파일을보고 전환 기능이 어떻게 작동하는지 살펴 보겠습니다.

<div>
   <button (click)="animate()">Click Me</button>
   <div [@myanimation] = "state" class="rotate">
      <img src="assets/images/img.png" width="100" height="100">
   </div>
</div>

스타일 속성이 추가되었습니다. @component디렉티브는 div를 중앙에 정렬합니다. 같은 것을 이해하기 위해 다음 예제를 고려해 보겠습니다.

styles:[`
   div{
      margin: 0 auto;
      text-align: center;
      width:200px;
   }
   .rotate{
      width:100px;
      height:100px;
      border:solid 1px red;
   }
`],

여기에서 특수 문자 [``]는 html 요소에 스타일을 추가하는 데 사용됩니다 (있는 경우). div의 경우 app.component.ts 파일에 정의 된 애니메이션 이름을 지정했습니다.

버튼을 클릭하면 다음과 같이 app.component.ts 파일에 정의 된 애니메이션 함수를 호출합니다.

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == ‘larger’? 'smaller' : 'larger';
   }
}

상태 변수가 정의되고 기본값이 더 작게 지정됩니다. 애니메이션 기능은 클릭시 상태를 변경합니다. 상태가 더 크면 더 작게 변환됩니다. 더 작 으면 더 크게 변환됩니다.

이것이 브라우저 (http://localhost:4200/)는-

클릭하면 Click Me 버튼을 누르면 이미지의 위치가 다음 스크린 샷과 같이 변경됩니다.

변형 기능은 yClick Me 버튼을 클릭하면 0에서 100px로 변경됩니다. 이미지는assets/images 폴더.