BLOG

ブログ

【Angular】アニメーションをやってみた

こんにちは!髙田です!

こちらは、Mavs Advent Calendar 2024 19日目の記事です🐺!

今回はAngularでアニメーション機能を提供するBrowserAnimationsModuleモジュールについてご紹介します!

BrowserAnimationsModuleモジュールをどんなものか簡単に試してみたい方を対象としています!✨️

🌲🌲🌲

準備

まずはAngularの環境を作成します!
もしAngular CLIをインストールされていない方はインストールからお願いします!

npm install -g @angular/cli

Angular CLIがインストールされているか確認するためのコマンドはこちら。

ng --version
// 19.0.5など表示されていればOK

ではさっそくディレクトリを作成して環境を作ってみます!
ローカルのお好きな場所で構いません!

~ % cd Desktop/Angular
Angular % ng new Animation

少し待つとSuccessfully initialized git.と表示されます!
Animationディレクトリに移動をして、ng serveで立ち上げてみましょう!

Angular % cd Animation
Animation % ng serve

ブラウザでhttp://localhost:4200/を開くと以下のようになっていると思います!

Angular環境設定完了です!✨️

最後に、package.jsonに@angular/animationsがあることを確認してください🙆

やってみよう

今回はアニメーション機能を体験してみようが目的のため、各フォルダについては別途ご紹介したいと思います!

今回は修正するファイルとソースコードを記載しますので、そのままコピペしていただければ、ブラウザで簡単な動きをお試しいただけると思います。

src/main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { importProvidersFrom } from '@angular/core';
import { AppComponent } from './app/app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(BrowserAnimationsModule)
  ]
})
  .catch(err => console.error(err));

BrowserAnimationsModuleモジュールをインポートしています。
providersオプションを使用することで、アニメーション機能が利用可能になります。

src/app/app.component.html

<main class="main">
  <input type="button" value="" [@animation]="flag" (click)="toggle()" />
</main>

inputがクリックされたflagプロパティの値に応じてアニメーションが適用されます。

src/app/app.component.scss

input  {
  width: 1000px;
  height: 500px;
  background-color: rgb(210, 210, 54);
  border: none;
}

src/app/app.module.ts
src/app/内にmodule.tsを作成します!

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

src/app/app.component.ts

import { Component } from '@angular/core';
import { trigger, state, style,transition, animate} from '@angular/animations';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, CommonModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    // ③
    trigger('animation', [
      // ①
      state('off', style({
        transform: 'scale(0.2)',
        opacity: '0.2',
      })),
    // ①
      state('on',   style({
        opacity: '1',
        transform: 'scale(1)',
      })),
      // ②
      transition('off <=> on', animate('200ms linear')),
    ])
  ],
})
export class AppComponent  {
  flag = 'off';

  toggle() {
    this.flag = (this.flag === 'on' ? 'off' : 'on');
  }
}

お待たせしました!アニメーションの肝となるソースコードです!
大事な箇所に番号を付けています!順番に説明しますね!

①state:状態
stateはアニメーション前後の状態を設定します!ソースコードでは、on、off時のそれぞれのスタイルを設定しています!(on、offはお好きな名前に変更いただいて大丈夫です!)
構文:state(name, style)

②transition:遷移
①の状態間をどのように変化させるかを定義しています!
構文:transition(“before <=> after”, step)
transition(“前の状態<=>後の状態”, アニメーション方法)

ソースコードは省略形でbefore・after同じアニメーションになるよう設定しましたが、以下のように別々のアニメーションを設定することもできます!

transition('off => on', animate('200ms linear')),
transition('on => off', animate('400ms linear'))

③trigger関数
①②をまとめて定義する役目がtrigger関数になります!
構文:trigger(name, animation)

①②③をまとめると…
offからonへ200msかけてlinear(一定の速度で変化)するとなります。

<main class="main">
  <input type="button" value="" [@animation]="flag" (click)="toggle()" />
</main>

ここでHTMLをもう一度見てみると、トリガーのanimationにflagプロパティが付与されています!そのため、flagプロパティがon・offと変化することで、該当のアニメーションが発火する仕組みとなってます✨️

コピペをしたファイルすべて保存し、ng serveで立ち上げてみましょう!

薄い色の箇所をクリックすると一定の速さで拡大する簡単なアニメーションができました!

まとめ

いかがでしたでしょうか!一見複雑そうですが、1つずつ見てみると意外と簡単な気がします!

少しでも参考になれば嬉しいです!ではまた〜!

RELATED ARTICLE