アニメーション

    Ignite UI for Angular には、ユーザー エクスペリエンスを向上させるために特別に設計された 100 以上のビルド済みアニメーションが含まれています。

    Sass Animations

    キーフレーム Mixin

    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;
        }
    }
}

    アニメーション Mixin

    аnimation ミックスインは、パラメーターとして渡されたアニメーション プロパティのリストを使用して要素をアニメーション化するための機能を果たします。ユーザーは、名前、期間、遅延、方向、繰り返し回数などのアニメーション プロパティを指定できます。複数のキーフレーム アニメーションを 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 アニメーションも含まれています。

    このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    使用方法

    Ignite UI for Angular アニメーションは、フェード、フリップ、成長、その他、回転、スケール、スライド、スウィングなどの視覚効果に基づいて 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

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

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

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

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

    API リファレンス

    その他のリソース

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