Angular7-애니메이션

애니메이션은 html 요소 사이에 많은 상호 작용을 추가합니다. 애니메이션은 Angular 2에서 사용할 수 있었으며 Angular 4부터 애니메이션은 더 이상 @ angular / core 라이브러리의 일부가 아니지만 app.module.ts에서 가져와야하는 별도의 패키지입니다.

시작하려면 아래 코드 줄을 사용하여 라이브러리를 가져와야합니다.

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule
   ],
   providers: [MyserviceService],
   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 { FormGroup, FormControl, Validators} from '@angular/forms';
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 태그에 지정할 애니메이션의 이름입니다. 두 번째 매개 변수는 가져온 함수 (상태, 전환 등)입니다.

상태 함수에는 요소가 전환되는 애니메이션 단계가 포함됩니다. 지금 우리는 더 작은 상태와 더 큰 두 가지 상태를 정의했습니다. 더 작은 상태의 경우 스타일을 지정했습니다.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 버튼을 누르면 이미지의 위치가 다음 스크린 샷과 같이 변경됩니다.

변형 기능은 y 방향으로 적용되며 Click Me 버튼을 클릭하면 0에서 100px로 변경됩니다. 이미지는assets/images 폴더.