「Angular」のアニメーション機能で動きのあるWebページを作る

はじめに

　Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。AngularJS（AngularJS 1）の次バージョンということで「Angular 2」と呼ばれることがありましたが、2017年3月にバージョン4がリリースされました。以下、単に「Angular」と記載します。

　Angularでは、Webページ上のHTML要素をアニメーションさせる仕組みが標準で提供されています。この仕組みを活用して、動きのあるリッチなWebページを作成できます。

　本記事では、Angularでアニメーション機能を利用する方法を、サンプルを挙げながら説明していきます。

対象読者

• Angularをより深く使いこなしていきたい方
• 最新のフレームワークを活用したい方
• Webページにちょっとした動きをつけるのが好きな方

必要な環境

　AngularはJavaScriptのフレームワークですが、公式WebサイトのドキュメントやサンプルはTypeScript向けが先行して整備される場合が多く、本連載でもTypeScriptでコードを記述していきます。また、サンプルの実行にはNode.jsが必要になります。

　今回は以下の環境で動作を確認しています。

• Windows 10 64bit版
  • Angular 4.0.0
  • Node.js v6.10.1 64bit版
  • Microsoft Edge 38.14393.0.0

　公式サイトのガイドでは、GitHubからプロジェクトテンプレートをダウンロードして実装環境を作るよう案内されています。テンプレートを展開したフォルダで、Node.jsのコマンド「npm install」を実行して依存ライブラリをダウンロード後、「npm start」コマンドを実行すると、WebブラウザでWebページを表示できます。本記事のサンプルもこのテンプレートをもとに実装しています。

コンポーネントの状態を切り替えてアニメーションする例

　Angularの基本的なアニメーション処理について、図1のサンプルで説明します。サンプルを実行して、表示される四角形をクリックすると、アニメーションしながら色と大きさが切り替わります。

　サンプルのルートコンポーネントは、リスト1のようになっています。

import { Component } from '@angular/core';
import {
    trigger, state, style, transition, animate // アニメーション用関数 ...（1）
} from "@angular/animations";
@Component({
  selector: "my-app",
  styles:（略）,
  template: `
    <h1>Angular サンプル1</h1>
    <div style="margin-left:auto;margin-right:auto;">
      <div class="anim" (click)="onClickDiv()"
        [@myanimation]="innerState"> <!-- アニメーションを設定 ...（2） -->
        状態：{{innerState}}
      </div>
    </div>`,
  animations:[ // アニメーションの定義 ...（3）
      trigger("myanimation", [ // アニメーションを識別する名前 ...（4）
          state("default", style({ // 未選択（default）のスタイル ...（5）
            backgroundColor:"#80b3ff", transform:"scale(1)"
          })),
          state("selected", style({ // 選択（selected）のスタイル ...（6）
            backgroundColor:"#ff8080", transform:"scale(1.4)"
          })),
          // アニメーションの時間と速度変化（イージング）の指定 ...（7）
          transition("default => selected", animate("700ms ease-in")),
          transition("selected => default", animate("1s ease-out"))
      ])
  ]
})
export class AppComponent  {
  // 内部状態の変数 ...（8）
  innerState:string = "default";
  // クリック時に内部状態を切り替え ...（9）
  onClickDiv() {
    if (this.innerState == "default") {
      this.innerState = "selected";
    } else {
      this.innerState = "default";
    }
  }
}

　（1）で、Angularのアニメーション機能を提供する関数を、@angular/animationsモジュールから参照しています。アニメーションは、コンポーネントのメタデータ定義で、animations（3）に記述します。まず、アニメーションにmyanimationという名前を付けて、triggerに指定します（4）。次に、画面の表示状態を表す名前をstateに、その状態での表示内容をstyleに、それぞれ指定します。ここでは（5）の未選択状態（default）と、（6）の選択状態（selected）のそれぞれに、異なる背景色を設定しています。また、要素の変形方法を指定するtransformに、拡大処理を表すscaleを設定して、未選択状態は1倍（元の大きさ）、選択状態は1.4倍の大きさで表示されるように指定しています。styleの詳細は後述します。

　（7）で、状態を切り替えるときのアニメーション時間と速度変化（イージング）を指定します。ここではdefault→selectedの切り替えを700ms（0.7秒）、selected→defaultの切り替えを1秒で行うように指定しています。ここで指定に利用しているtransitionとanimateの詳細は後述します。

　このように定義したアニメーションmyanimationを、アニメーションさせるHTML要素に、（2）の[@myanimation]という属性で指定します。属性値のinnerStateをdefaultとselectedに切り替えると、アニメーションが実行されます。innerStateはコンポーネントの変数で、（8）で初期値defaultを指定して、（9）でdefaultとselectedを切り替えます。