Ugo

Webエンジニアのためのプログラミング情報サイト

Angularでアニメーションを使用する！Animations APIと画面遷移の実装。

Angularでアニメーションを使用する！Animations APIと画面遷移の実装。

この記事では、Angularの標準アニメーション機能である「Angular animations」について、その使い方や実装例を紹介する。

アニメーションはあまり実務では馴染みが無い人が多いかも知れないが、効果的に使うことによってユーザにアピールしたい部分を強調し、ユーザビリティを向上させることができる。

基本的なアニメーションの使い方は覚えておこう。

目次

Angular animationsについて

Angular animationsはAngularに標準パックに組み込まれているアニメーション機能。

例としては、色を変化させたり、要素をを移動させたりといった変化を時間軸とともに指定することができる。

Angular animationsはCSSのアニメーションをベースに作られており、CSSとして使えるプロパティのほとんどはAngular Animationsでも使用できる。

そういった通常のCSSの表現に加えAngularアニメーションでは複数のアニメーションを並列で実行したり、シークエンスとして順序を決めて実行することができる。

アニメーションの使い方

ではアニメーションの使い方を見ていこう。

ここではボタンのクリックにより色が変化するボックスを例にして、アニメーションの使用方法を説明する。

BrowserAnimationModuleをインポートする

まずはプロジェクトでAngularアニメーションを使用するためにアニメーションのモジュールを追加する。

app.module.tsを開きNgModuleアノテーションのimportsプロパティにBrowserAnimationModuleを追加してModuleをインポートする。

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({ 
  imports: [BrowserAnimationsModule],
})

新しいコンポーネントを作成する

アニメーションを設定するコンポーネントを新しく作ろう。

ここでは、コンポーネントを「animation-box」と名付けた。

HTML・CSS・TSファイルにそれぞれ以下のように記述する。

<button (click)="changeColor()">
  {{ isBlue ? "赤くする" : "青くする" }}
</button>
.container {
  height: 100px;
  width: 100px;
  margin-bottom: 10px;
}
export class AnimationBoxComponent {
  isBlue = true;

  changeColor() {
    this.isBlue = !this.isBlue;
  }
}

以下のように青い四角とボタンが表示されていればOKだ。

アニメーションの設定をおこなう

では、アニメーションの設定を行っていこう。

Angular animationsでは、アニメーションの状態や遷移をコンポーネントのデコレーター内に「animations」プロパティを加え記述する。

animations: [
	trigger('changeColor', [
	state(
		'blue',
		style({
		background: 'blue',
		})
	),
	state(
		'red',
		style({
		background: 'red',
		})
	),
	transition('blue => red', [animate('0.5s')]),
	transition('red => blue', [animate('3s')]),
	]),
],

トリガー関数・状態関数・遷移関数を使ってアニメーションの詳細を定義する。

  • trigger – アニメーションと関連付ける変数を指定する。
  • state – ステートの名称をCSSスタイルを定義する。
  • transition – どのステートからどのステートへ変化するか指定する。
    ワイルドカードとして’*’を指定することもできる。

triggerの最初の引数はアニメーションの名前であり、stateの最初の引数は状態の名前をあらわす。

Animations APIの関数

Angularアニメーションでは、Animations APIの関数群を使用してアニメーションの動きを定義する。

Animations APIにはおもに以下のような関数が用意されている。

関数名使い方
triggerstate・transitionを始めとしてすべてのアニメーション関数を束ねる関数。
引数として渡したtriggerNameはテンプレートにアニメーションをバインドする際に使用する。
styleアニメーションで使われるCSSスタイルを定義する。
stateアニメーションの「状態」を定義する。引数として渡した名前はAnimation関数から参照できる。
animate遷移のタイミングを指定する。
transitionアニメーションの「遷移」を定義する。一つ目の引数でどのstateからどのstateへ遷移するのか指定する。
keyframesアニメーションの遷移中のスタイルを細かく定義する。CSSのkeyframeと同様に動作する。
group複数のアニメーションを並行して実行する際に使用する。
sequenceアニメーションを順に実行するように指定する。

要素にアニメーションをバインドする

最後にアニメーションを適用する要素にアニメーションのタグを付ける。

タグは@マークを使用して以下のように指定する。

<div [@changeColor]="isBlue ? 'blue' : 'red'" class="container"></div>

ボタンをクリックするとボックスの色が徐々に変化するはずだ。

アニメーションをページが開く・閉じる際に実行する

ページ（コンポーネント）を表示する際に毎回アニメーションを表示したい場合はvoid stateを使用する。

animations: [
	trigger('slideInOut', [
    state('in', style({ transform: 'translateY(0)' })),
    transition('void => *', [
      style({ transform: 'translateY(-100%)' }),
      animate(100)
    ]),
    transition('* => void', [
      animate(100, style({ transform: 'translateY(100%)' }))
    ])
  ])
],

“void => *” は”:enter”、”* => void” は”:leave”と指定することもできる。

MENU