[Angular勉強メモ]（２）Angularアニメーションを解説する

   今日は引き継ぎ、Angularアニメーションのことを解説します。

### Angular Animationsとは
   １．アニメーションは動きの錯覚を提供します(時間の経過と共にHTML要素のスタイルが変化します)。うまく設計されたアニメーションはアプリケーションをより楽しく使いやすくすることができます。

２．アニメーションAPIの概要

| 関数名       |       説明 | 
|:-----------------|------------------:|
| trigger()           |            アニメーションを開始し、他のすべてのアニメーションの関数コールのコンテナとして機能します。HTMLテンプレートはtriggerNameにバインドされます。ユニークなトリガー名を宣言するために、最初の引数を使用します。配列構文を使用します。 |    
| style()        |           アニメーションで使用する1つまたは複数のCSSスタイルを定義します。アニメーション中のHTML要素の外観を制御します。オブジェクト構文を使用します。 |  
| state()          |              指定された状態への遷移が成功した場合に適用されるCSSスタイルの名前付きセットを作成します。状態は、他のアニメーション関数内で名前で参照することができます。 |    
| animate()              |            遷移のタイミング情報を指定します。delayとeasingはオプショナルな値です。style()の呼び出し時に紐付けられます。 |    
| transition()        |            2つの名前付きの状態間のアニメーションの順序を定義します。配列構文を使用します。 |
| keyframes()         |          スタイル間の指定した期間での逐次的な変更を許可します。animate()内で使用します。各keyframe()内に複数のstyle()を含めることができます。配列構文を使用します。 | 
| animation()          |           他の場所から呼び出すことができる再利用可能なアニメーションを作成します。useAnimation()と一緒に使用されます。 | 

...中略...

### 一、環境準備
予めtypescriptの知識を持っていればいいです。

- Angular4
- angular/cli: 1.1.0
- nodejs: 12.10.0
- 開発IDE:WebStorm

### 二、サンプールを作りながら解説します

#### ステップ1: アニメーション依頼を導入する
　　下記のとおり、アニメーション依頼を導入する。
>  npm --save @angular/animation 4.3.0

#### ステップ2: アニメーションモジュールを有効にする
   BrowserAnimationsModuleをインポートしてください。これによってアニメーション機能をAngularのルートアプリケーションモジュールに取り込みます。
   
```typescript:app.module.ts
import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ... 中略 ...
    BrowserModule,
    BrowserAnimationsModule,
    ... 中略 ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
```

#### ステップ3: アニメーション関数を定義する
 ここでアニメーション関数を定義して、シンプルな遷移アニメーションを作成する。

```typescript:item.anim.ts
import {trigger, state, transition, style, animate, keyframes} from '@angular/animations';

export const itemAnim = trigger('item', [
  state('in', style({ 'border-left-width': '3px'})),
  state('out', style({  'border-left-width': '8px'})),
  transition('out => hover', animate('100ms ease-in')),
  transition('hover => out', animate('100ms ease-out')),
])

```
#### ステップ4: アニメーションメタデータプロパティを追加する
   コンポーネントファイル内の@Component() デコレーター内にanimations:というメタデータプロパティを追加してください。アニメーションを定義したトリガーをanimationsメタデータプロパティ内に配置します。

  ```typescript:task-item.component.ts
import {itemAnim} from '../../anims/item.anim';

@Component({
  selector: 'app-task-item',
  templateUrl: './task-item.component.html',
  styleUrls: ['./task-item.component.scss'],
  animations: [
    itemAnim
  ]
})

```

また、コンポーネントの中に、以下の処理を追加してください。

  ```typescript:task-item.component.ts
export class TaskItemComponent implements OnInit {

  widerPriority = 'in';

  @HostListener('mouseenter')
  onMouseEnter() {
    this.widerPriority = 'out';
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.widerPriority = 'in';
  }

```

#### ステップ5: HTMLテンプレートに適用する
ここで、triggerNameはトリガーの名前で、expressionは定義されたアニメーションの状態として評価されます。
> 例:  [@triggerName]="expression"

  ```html:task-item.component.html
 ... 中略 ...
<md-list-item class="container"
  [@item]="widerPriority"

 ... 中略 ...
</md-list-item>

```

### 画面上での表現
マウスが画面項目に移動すると、画面項目の左の枠が大きくなりました。

１．本来のイメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225740/8735a601-54f4-f549-19d8-2f16a57f5647.png)

２．マウスが画面項目に移動した後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225740/60b13371-423d-9482-4a52-2606ee4948ef.png)

### 最後に
最後まで読んでいただき、ありがとうございます。
ソースコードは[こちらでダウンロード](https://github.com/Hyman1993/tasker)できます。

参考：https://angular.jp/guide/animations