angular animation params

 

Angular Animation Paramsを用いたアニメーションのパラメータ化

本記事では、Angularのアニメーション機能におけるパラメータの設定方法について詳しく解説します。これにより、開発者はダイナミックで柔軟なアニメーションを構築でき、ユーザー体験を向上させることができます。

Angularアニメーションの基本

Angularのアニメーション機能は、Webアプリケーションに動きとインタラクションを追加するための強力なツールです。ユーザーエクスペリエンスを向上させ、より魅力的なインターフェースを作成するのに役立ちます。この記事では、Angularアニメーションの基本概念を理解し、さまざまなアニメーション技術を活用する方法を学びます。

Angularアニメーションの基本概念

Angularアニメーションは、コンポーネントの状態変化に基づいて、HTML要素のスタイルを時間経過とともに変化させることで実現されます。アニメーションは、@Componentデコレーターのanimationsメタデータプロパティ内で定義されます。

アニメーションは、トリガー、状態、遷移の3つの主要な要素で構成されます。

  • トリガー: アニメーションを識別するための名前と、アニメーションを適用する要素を指定します。

  • 状態: 要素のスタイルを定義します。各状態は、一連のスタイルプロパティと値で構成されます。

  • 遷移: ある状態から別の状態への変化を定義し、アニメーションの期間、タイミング関数、遅延などを指定します。

Angularアニメーションの技術

Angularは、さまざまなアニメーション技術を提供しています。

  • animate()関数: 要素のスタイルを時間経過とともに変化させるための基本的な関数です。

  • keyframes()関数: より複雑なアニメーションを作成するための関数です。アニメーションの途中の状態を定義することができます。

  • style()関数: 要素のスタイルを直接設定するための関数です。

  • transition()関数: ある状態から別の状態への変化を定義するための関数です。

  • query()関数: アニメーションを適用する子要素を選択するための関数です。

  • stagger()関数: 子要素にアニメーションを順番に適用するための関数です。

パラメータ化されたアニメーションの重要性

アニメーションにパラメータを使用すると、アニメーションの動作を動的に変更することができます。これにより、アニメーションの柔軟性と再利用性が向上します。

パラメータの使用方法:

  • state()関数とtransition()関数のスタイル定義内で、{{パラメータ名}}のように記述することで、パラメータを使用できます。

  • @Componentデコレーターのanimationsメタデータプロパティ内で、useAnimation()関数を使って、パラメータを渡すことができます。

パラメータ化されたアニメーションの例:

import { Component, Input } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-my-component',
  template: `
    <div [@openClose]="isOpen" 
         (@openClose.start)="animationStarted($event)" 
         (@openClose.done)="animationDone($event)">
      コンテンツ
    </div>
  `,
  animations: [
    trigger('openClose', [
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
    ]),
  ]
})
export class MyComponent {
  @Input() isOpen = false;

  animationStarted(event: any) {
    console.log('アニメーション開始:', event);
  }

  animationDone(event: any) {
    console.log('アニメーション終了:', event);
  }
}

上記は、isOpenという入力プロパティに基づいて要素の高さと不透明度を変化させるアニメーションの例です。openとclosedという2つの状態が定義されており、transition()関数で状態間の遷移を定義しています。

実例を通じた理解

実際のコード例を使って、Angular Animation Paramsを使用したアニメーションの作成プロセスをステップバイステップで解説します。

コード例


            <div [@fadeInOut]="isVisible ? 'in' : 'out'">
                コンテンツ
            </div>

            <style>
                @keyframes fadeIn {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }

                @keyframes fadeOut {
                    from { opacity: 1; }
                    to { opacity: 0; }
                }
            </style>

            <script>
                import { trigger, transition, style, animate } from '@angular/animations';

                @Component({
                    animations: [
                        trigger('fadeInOut', [
                            transition('void => *', [
                                style({ opacity: 0 }),
                                animate('300ms ease-in', style({ opacity: 1 }))
                            ]),
                            transition('* => void', [
                                animate('300ms ease-out', style({ opacity: 0 }))
                            ])
                        ])
                    ]
                })
                export class AppComponent {
                    isVisible = true;
                }
            </script>

パラメータの表

パラメータ名 説明
duration アニメーションの持続時間を指定します。
delay アニメーション開始前の遅延時間を指定します。
easing アニメーションの緩急を定義します。

はじめに：CSSアニメーションとAngularアニメーション

HTML要素にアニメーションを追加したい場合、CSSのtransitionsやkeyframesを使うことで簡単に実現できます。しかし、Angularはさらに強力な機能を提供しています。それは、コンポーネント変数の状態変化を監視することで、コンポーネントやHTML要素にアニメーションを適用できるというものです。

シンプルなAngularアニメーションの作成

まずは、シンプルなAngularアニメーションを作成し、コンポーネントに設定する方法を見ていきましょう。

  1. ターミナルで以下のコマンドを実行し、Angular CLIを使って新しいAngularアプリケーションを作成します。

ng new my-animation-app

  1. アプリケーションの作成が完了したら、生成されたアプリケーションディレクトリの下にある app.module.ts に移動し、 BrowserAnimationsModule をインポートします。

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

  1. app.module.ts の @NgModule アノテーション内の imports 配列に BrowserAnimationsModule を追加します。

imports: [
  BrowserModule,
  BrowserAnimationsModule 
],

注意: このチュートリアルでは、アプリケーションと一緒に生成された app.component.ts を使用します。

ドロップダウンリストの項目数に応じてアニメーションを動的に調整する

要件: ドロップダウンリストがあり、ドロップダウンを開く際に、リスト内の項目数と完全に一致するアニメーションを実行したいとします。どのようにすればよいでしょうか？読み進めて、その方法を発見しましょう！

注意: AngularアプリケーションでBootstrapが定義されていない場合は、以下のコマンドを実行してインストールしてください。すでにインストールされている場合は、手順4に進んでください。

npm install --save bootstrap

styles.css に以下のインポートを追加します。

@import "~bootstrap/dist/css/bootstrap.css";

  1. app.component.html テンプレートを定義します。これは非常に基本的なもので、Bootstrapのドロップダウンテンプレートを使用します。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" (click)="isOpen = !isOpen">
    ドロップダウン
  </button>
  <div class="dropdown-menu" [ngClass]="{'show': isOpen}" [@dropdownAnimation]="{value: isOpen, params: {height: dropdownItems.length * 35 + 'px'}}">
    <a class="dropdown-item" *ngFor="let item of dropdownItems">{{ item }}</a>
  </div>
</div>

app.component.ts のコードは次のようになります。ドロップダウンが開いているか閉じているかを示すブール値を追加しました（12行目）。

import { Component } from '@angular/core';
import { dropdownAnimation } from './animation';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    dropdownAnimation
  ]
})
export class AppComponent {
  isOpen = false;
  dropdownItems = ['項目1', '項目2', '項目3', '項目4', '項目5'];
}

  1. これらの設定が完了したら、アニメーションを定義しましょう！この例では、各ドロップダウン項目の高さが35ピクセルであるとします。 app ディレクトリの下に animation.ts という新しいファイルを作成します。作成するアニメーションは、リスト内の項目数に応じて、ドロップダウン項目のコンテナの max-height を動的に増加させるものです。

import {
  trigger,
  state,
  style,
  transition,
  animate,
} from '@angular/animations';

export const dropdownAnimation =
  trigger('dropdownAnimation', [
    state(
      'true',
      style({
        maxHeight: '{{height}}',
        opacity: 1,
      }),
      {params: {height: '1px'}}
    ),
    state(
      'false',
      style({
        maxHeight: '0',
        opacity: 0,
      })
    ),
    transition('false => true', animate('400ms ease-in')),
    transition('true => false', animate('400ms ease-out'))
  ]);

上記のコードについていくつか説明します。

  • trigger : アニメーションを適用する要素に付けるアノテーションです（数秒後に使用例を示します）。アノテーションの横には、変化するコンポーネント変数を指定します。

  • state : アニメーションの状態と必要な動作を定義する必要があります。この例では、 true と false の2つの状態があります。これは、ブール値が true から false に変化し、それに応じてアニメーションが変化することを意味します。素晴らしいですね！

  • transitions : ある状態から別の状態へのアニメーションの期間とタイミング関数を定義します。

8行目は、ここで説明している部分です :) params は、テンプレートからアニメーションファイルに渡されるパラメータです。これを使用するには、デフォルト値を定義する必要があります。この場合は 1px です。

  1. dropdownAnimation アノテーションをHTML内のドロップダウン項目のコンテナに配置し、その横にブール値を配置します。

<div class="dropdown-menu" [ngClass]="{'show': isOpen}" [@dropdownAnimation]="{value: isOpen, params: {height: dropdownItems.length * 35 + 'px'}}">
  <a class="dropdown-item" *ngFor="let item of dropdownItems">{{ item }}</a>
</div>

素晴らしい！いくつか注意点があります。ボタンのクリックイベントをキャッチして、変数の状態を true から false に、またはその逆に変更しています（3行目）。

dropdown-menu 、つまりドロップダウン項目のコンテナにアニメーションアノテーションを配置しました。アニメーションに2つのものを渡していることに注意してください。

  • value : アニメーションの状態を決定する値です（この例では true または false ）。

  • params : アニメーションファイルに渡されるパラメータです。この場合は、配列内の項目数に35を掛けた値を渡しています。

これでほぼ準備完了です！

ターミナルに移動し、次のコマンドを実行して、魔法のようなアニメーションを見てみましょう！

ng serve

これで、ドロップダウンリストの項目数に応じてアニメーションが動的に変化する様子を確認できます。

参考文献: Angular Animation Guide

Q&A

Q1: Angularのアニメーションはどのように活用できますか？

A1: Angularのアニメーションは、ユーザーインターフェースをより魅力的にし、ユーザーの操作に対するフィードバックを提供するために活用できます。

Q2: アニメーションのパラメータはどのように設定しますか？

A2: アニメーションのパラメータは、Angularのテンプレートやコンポーネント内で指定することで設定できます。

Q3: 再利用可能なアニメーションを作成するには？

A3: トリガーと状態をうまく利用することで、複数のコンポーネント間で再利用可能なアニメーションを作成できます。