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 폴더.