Angular7-animations
Angular7-アニメーション
アニメーションは、html要素間に多くの相互作用を追加します。 Angular 2以降では、Angular 2以降でアニメーションが利用できました。アニメーションは@ 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.componentl* に、アニメーション化される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を追加しました。 animate関数が呼び出されるクリックイベントがあります。 また、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.componentl',
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: [
trigger('myanimation',[
state('smaller',style({
transform : 'translateY(100px)' })),
state('larger',style({
transform : 'translateY(0px)' })),
transition('smaller <=> larger',animate('300ms ease-in'))
])
]
トリガーは、アニメーションの開始を定義します。 最初のパラメータは、アニメーションを適用する必要のあるhtmlタグに与えられるアニメーションの名前です。 2番目のパラメーターは、インポートした関数(状態、遷移など)です。
状態関数には、要素が遷移するアニメーションステップが含まれます。 現在、2つの状態、より小さいものと大きいものを定義しています。 小さい状態の場合、スタイル* transform:translateY(100px)および transform:translateY(100px)*を指定しました。
遷移関数は、アニメーションをhtml要素に追加します。 最初の引数は開始状態と終了状態を取り、2番目の引数はアニメーション関数を受け入れます。 アニメート機能を使用すると、トランジションの長さ、遅延、および容易さを定義できます。
次に、lファイルを見て、遷移関数がどのように機能するかを見てみましょう-
<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 フォルダーに保存されます。