マテリアルデザイン：Angular Animationsでリストにモーションをつける

マテリアルデザインとは、現実世界のルール(奥行きや、影など、質量)を取り入れることで、直感的な操作を実現しているデザインです。
具体的には、紙の物質的な特性を画面に置き換えています。
そのため、アプリの動作は、
・めくる
・綴じる
・重ねる
といった紙の機能を模倣しています。

今回はそんなマテリアルデザインのガイドラインに則ったWEBアプリを作成するため、Angular Animationsを使ってリストにアニメーションをつけていきたいと思います。

1.ガイドラインを確認する。

下記のガイドラインのモーション(Motion)を確認します。

マテリアルデザインのガイドライン

「作成」の章を確認すると、

サーフェスに動きをつける
複数の新しいサーフェスを同時に作成する場合は、各サーフェスの出現をわずかにずらします。明確で滑らかな焦点のパスを一方向に作ります。

と記載されています。
このアニメーションをAngular Animationsで実現します。

2.Animation設定用ファイルを作成する。

opacityとtransformを使ってアニメーションを実現します。

// list-animation.ts
import { animate, query, stagger, style , transition,  trigger } from '@angular/animations';

export const listAnimation = 
  trigger('listAnimation', [
    transition('* => *', [
      query(':enter',
        style({ opacity: 0 }), { optional: true }),
      query(':leave', [
        stagger(100, [
          animate('0.3s ease-out', style({ opacity: 0, transform: 'translateY(30px)'}))
        ])
      ], { optional: true }),
      query(':enter', [
        style({ opacity: 0, transform: 'translateY(30px)' }),
        stagger(100, [
          animate('0.3s ease-out', style({ opacity: 1, transform: 'translateY(0)'}))
        ])
      ], { optional: true })
    ])
  ]);

3.Componentで作成したAnimation設定用ファイルを読み込む。

Componentのanimationsに設定します。

// hoge.component.ts
import { Component, OnInit } from '@angular/core';
import { listAnimation } from './list-animation';
    :
@Component({
  templateUrl: './hoge.component.html',
  styleUrls: ['./hoge.component.scss'],
  animations: [listAnimation]
})
export class HogeComponent {
  constructor() {}
    :
}

4.htmlでanimationを設定する

リストの各アイテムをラップする要素にAnimarionを設定します。

// hoge.component.html
<div class="list-container" scroll [@listAnimation]="hoges.length">
  <div class="item" *ngFor="let hoge of hoges;">{{ hoge.name }}</div>
</div>

以上で完成です。

この記事を書いた人
最新の記事

Akihiro Tanaka

Smart Contract Engineer

Since 2009, I have been a software engineer at Accenture for 9 years, managing, designing, and developing many services, mainly web and mobile apps.
In 2013, I met Bitcoin and started to work on blockchain-related development in 2018, developing an entertainment DApp for underground idols, a blockchain analysis tool, and an STO platform.
Currently, I am working as a Smart Contract Engineer at Secured Finance, developing a DeFi product.

WEB: https://tanakas.org/

TANAKA NO BLOG