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.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 { 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番目のパラメーターは、インポートした関数（状態、遷移など）です。

*state* 関数には、要素が遷移するアニメーションステップが含まれます。 現在、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 Button

*Click Me* ボタンをクリックすると、次のスクリーンショットに示すように画像の位置が変更されます-

Click Meボタンの画像の位置が変更されました

変換関数は y 方向に適用され、Click Meボタンをクリックすると0から100pxに変更されます。画像は assets/images フォルダーに保存されます。

Angular4-animations

Angular 4-アニメーション

app.module.ts