Angular6-アニメーション

アニメーションは、html要素間に多くの相互作用を追加します。アニメーションはAngular2でも利用できました。Angular 6との違いは、アニメーションはもはや一部ではないということです@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からインポートしました。

ここで、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、transitionなど）です。

ザ・ state関数には、要素が遷移するアニメーションステップが含まれます。現在、小さい状態と大きい状態の2つの状態を定義しています。小さい状態の場合は、スタイルを指定しましたtransform:translateY(100px) そして transform:translateY(100px)。

遷移関数は、html要素にアニメーションを追加します。最初の引数は状態、つまり開始と終了を取ります。2番目の引数はanimate関数を受け入れます。アニメーション機能を使用すると、トランジションの長さ、遅延、およびイージングを定義できます。

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

に追加されたスタイルプロパティがあります @componentdivを一元的に整列するディレクティブ。同じことを理解するために次の例を考えてみましょう-

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ファイルで次のように定義されているanimate関数が呼び出されます。

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == ?larger?? 'smaller' : 'larger';
   }
}

状態変数が定義され、デフォルト値が小さくなります。アニメーション機能は、クリックすると状態を変更します。状態が大きい場合は、小さくなります。小さい場合は、大きくなります。

これがブラウザでの出力方法です（http://localhost:4200/）は次のようになります-

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

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