アニメーション

Sass Animations

キーフレーム ミックスイン

Ignite UI for Angular keyframes ミックスインは、新しいキーフレーム アニメーションを登録するために使用されます。ミックスイン はパラメーターとしてキーフレーム アニメーションの名前を取得し、グローバル キーフレーム レジスタ リストに追加します。同じキーフレーム アニメーションを複数回含む場合、エクスポートされた CSS でキーフレームは複製されません。

例えば、以下を実行する場合、

@include fade-in();
@include fade-in();

生成される CSS に追加される @keyframes ルールは 1 つのみです。

@keyframes fade-in { ... }

アニメーション ステップのキーフレーム セレクターおよびキーフレームの CSS スタイルは、ミックスインの本体内で定義されます。

これは、animation ミックスインで使用できる新しいアニメーション ミックスインを作成する例です。

@mixin fade-in-bottom {
    @include keyframes(fade-in-bottom) {
        0% {
            transform: translateY(50px);
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
} 

アニメーション ミックスイン

animation ミックスインは、パラメーターとして渡されたアニメーション プロパティのリストを使用して要素をアニメーション化するための機能を果たします。ユーザーは、name、duration、delay、direction、iteration count などのアニメーション プロパティを指定できます。複数のキーフレーム アニメーションを animation ミックスインに渡すことができます。

//include the 'fade-in-top' keyframes animation mixin
@include fade-in-top();

//include the animation mixin with parameters
.my-class {
    @include animation('fade-in-top' 3s $ease-out-quad infinite);
}

タイミング関数

キーフレーム ミックスインで使用するタイミング関数のリストが含まれています。タイミング関数の全てのリストの詳細は、ドキュメントをご覧ください。

Angular アニメーション

Sass キーフレームとアニメーション ミックスインの他に、事前定義された Angular アニメーションも含まれています。

使用方法

Ignite UI for Angular アニメーションは、fade、flip、grow、miscellaneous、rotate、scale、slide、swing などの視覚効果に基づいて 8 つのカテゴリに分類されます。各グループは異なるパラメーター セットを受け取り、含まれるアニメーションの動作を変更できます。各アニメーションは、Angular が提供する animation 関数によって生成される AnimationReferenceMetadata オブジェクトです。

パラメーターがアタッチされている場合、デフォルト値として機能します。アニメーションが useAnimation 関数によって呼び出された場合、パラメーター値を直接渡すことができます。渡されたパラメーター値のいずれかがない場合、デフォルト値が使用されます。

import { transition, trigger, useAnimation } from '@angular/animations';
import { fadeIn, fadeOut } from "igniteui-angular/animations/main";

animations: [
    trigger('fadeInOut', [
            transition('void => *', [
                useAnimation(fadeIn, {
                    params: {
                        duration: '.35s',
                        easing: 'ease-out'
                    }
                })
            ]),
            transition('* => void', [
                useAnimation(fadeOut, {
                    params: {
                        duration: '.2s',
                        easing: 'ease-out'
                    }
                })
            ])
        ])
]

タイミング関数

Ignite UI for Angular には、アニメーションをイーズ イン/アウトするために使用できるタイミング関数のセットが含まれています。EaseIn、EaseOut、EaseInOut の 3 つの主要なタイミング関数グループがあり、それぞれ以下のタイミングを含みます。

• quad
• cubic
• quart
• quint
• sine
• expo
• circ
• back

特定のタイミング関数を使用するには、まずそれはインポートします。

アニメーションの easing パラメーターの値として使用します。

import { EaseOut } from "igniteui-angular/animations/easings";

and then use it as value for the easing param in any animation:

useAnimation(fadeIn, {
    params: {
        easing: EaseOut.back
    }
});

API リファレンス

• Animations
• AnimationSettings
• IAnimationParams

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)