今日は引き継ぎ、Angularアニメーションのことを解説します。
Angular Animationsとは
１．アニメーションは動きの錯覚を提供します(時間の経過と共にHTML要素のスタイルが変化します)。うまく設計されたアニメーションはアプリケーションをより楽しく使いやすくすることができます。
２．アニメーションAPIの概要
| 関数名 | 説明 |
|---|---|
| trigger() | アニメーションを開始し、他のすべてのアニメーションの関数コールのコンテナとして機能します。HTMLテンプレートはtriggerNameにバインドされます。ユニークなトリガー名を宣言するために、最初の引数を使用します。配列構文を使用します。 |
| style() | アニメーションで使用する1つまたは複数のCSSスタイルを定義します。アニメーション中のHTML要素の外観を制御します。オブジェクト構文を使用します。 |
| state() | 指定された状態への遷移が成功した場合に適用されるCSSスタイルの名前付きセットを作成します。状態は、他のアニメーション関数内で名前で参照することができます。 |
| animate() | 遷移のタイミング情報を指定します。delayとeasingはオプショナルな値です。style()の呼び出し時に紐付けられます。 |
| transition() | 2つの名前付きの状態間のアニメーションの順序を定義します。配列構文を使用します。 |
| keyframes() | スタイル間の指定した期間での逐次的な変更を許可します。animate()内で使用します。各keyframe()内に複数のstyle()を含めることができます。配列構文を使用します。 |
| animation() | 他の場所から呼び出すことができる再利用可能なアニメーションを作成します。useAnimation()と一緒に使用されます。 |
...中略...
一、環境準備
予めtypescriptの知識を持っていればいいです。
- Angular4
- angular/cli: 1.1.0
- nodejs: 12.10.0
- 開発IDE:WebStorm
二、サンプールを作りながら解説します
ステップ1: アニメーション依頼を導入する
下記のとおり、アニメーション依頼を導入する。
npm --save @angular/animation 4.3.0
ステップ2: アニメーションモジュールを有効にする
BrowserAnimationsModuleをインポートしてください。これによってアニメーション機能をAngularのルートアプリケーションモジュールに取り込みます。
app.module.ts
import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
... 中略 ...
BrowserModule,
BrowserAnimationsModule,
... 中略 ...
],
providers: [],
bootstrap: [AppComponent]
})
ステップ3: アニメーション関数を定義する
ここでアニメーション関数を定義して、シンプルな遷移アニメーションを作成する。
item.anim.ts
import {trigger, state, transition, style, animate, keyframes} from '@angular/animations';
export const itemAnim = trigger('item', [
state('in', style({ 'border-left-width': '3px'})),
state('out', style({ 'border-left-width': '8px'})),
transition('out => hover', animate('100ms ease-in')),
transition('hover => out', animate('100ms ease-out')),
])
ステップ4: アニメーションメタデータプロパティを追加する
コンポーネントファイル内の@Component() デコレーター内にanimations:というメタデータプロパティを追加してください。アニメーションを定義したトリガーをanimationsメタデータプロパティ内に配置します。
task-item.component.ts
import {itemAnim} from '../../anims/item.anim';
@Component({
selector: 'app-task-item',
templateUrl: './task-item.component.html',
styleUrls: ['./task-item.component.scss'],
animations: [
itemAnim
]
})
また、コンポーネントの中に、以下の処理を追加してください。
task-item.component.ts
export class TaskItemComponent implements OnInit {
widerPriority = 'in';
@HostListener('mouseenter')
onMouseEnter() {
this.widerPriority = 'out';
}
@HostListener('mouseleave')
onMouseLeave() {
this.widerPriority = 'in';
}
ステップ5: HTMLテンプレートに適用する
ここで、triggerNameはトリガーの名前で、expressionは定義されたアニメーションの状態として評価されます。
例: [@triggerName]="expression"
task-item.component.html
... 中略 ...
<md-list-item class="container"
[@item]="widerPriority"
... 中略 ...
</md-list-item>
画面上での表現
マウスが画面項目に移動すると、画面項目の左の枠が大きくなりました。
１．本来のイメージ
２．マウスが画面項目に移動した後
最後に
最後まで読んでいただき、ありがとうございます。
ソースコードはこちらでダウンロードできます。