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