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

11328 ワード
TypeScript animation Angular animation テキストリンク

今日は引き継ぎ、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のルートアプリケーションモジュールに取り込みます。

app.module.ts
import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';

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

ステップ3: アニメーション関数を定義する

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

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メタデータプロパティ内に配置します。

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
  ]
})

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

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"

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

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

画面上での表現

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

１．本来のイメージ

２．マウスが画面項目に移動した後

最後に

最後まで読んでいただき、ありがとうございます。
ソースコードはこちらでダウンロードできます。

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