アニメーションとトランジションの種類

• Transition - 状態変化の際にトランジションをアニメーション化する
• SequentialAnimation - アニメーションを順次実行する
• ParallelAnimation - アニメーションを並列に実行する
• Behavior - プロパティの変更時に適用されるデフォルトのアニメーションを指定する
• PauseAnimation - アニメーションに一時停止を挿入する
• ScriptAction - アニメーション実行中にスクリプトを実行する

データ型に基づいてプロパティをアニメーション化するタイプ：

アニメーションは、プロパティ値にアニメーションタイプを適用することで作成されます。アニメーションタイプは、プロパティ値を補間して滑らかな遷移を作成します。また、状態遷移では、状態の変化にアニメーションを割り当てることもできます。

アニメーションを作成するには、アニメーション対象のプロパティの型に適したアニメーションタイプを使用し、必要な動作の種類に応じてアニメーションを適用します。

アニメーションのトリガー

以下のセクションでは、オブジェクトにアニメーションを設定するさまざまな方法について説明します。

プロパティの直接アニメーション

アニメーションは、プロパティ値にアニメーションオブジェクトを適用し、時間の経過とともにプロパティを徐々に変化させることで作成されます。これらのプロパティアニメーションは、プロパティ値の変化間の値を補間することで、滑らかな動きを実現します。プロパティアニメーションでは、タイミング制御が可能であり、イージングカーブを通じてさまざまな補間方法を選択できます。

Rectangle {
    id: flashingblob
    width: 75; height: 75
    color: "blue"
    opacity: 1.0

    MouseArea {
        anchors.fill: parent
        onClicked: {
            animateColor.start()
            animateOpacity.start()
        }
    }

    PropertyAnimation {id: animateColor; target: flashingblob; properties: "color"; to: "green"; duration: 100}

    NumberAnimation {
        id: animateOpacity
        target: flashingblob
        properties: "opacity"
        from: 0.5
        to: 1.0
        loops: Animation.Infinite
        easing {type: Easing.OutQuad}
   }
}

特殊なプロパティアニメーションタイプは、PropertyAnimation 型よりも効率的な実装となっています。これらは、int 、color 、回転など、さまざまなQMLタイプにアニメーションを設定するために使用されます。

さまざまなアニメーションプロパティの詳細については、「アニメーションの制御」を参照してください。

定義済みのターゲットとプロパティの使用

前の例では、PropertyAnimation およびNumberAnimation オブジェクトにおいて、アニメーションの対象となるオブジェクトやプロパティを指定するために、特定のtarget およびproperties の値を指定する必要がありました。これは、<Animation> on <Property>という構文を使用することで回避できます。この構文では、アニメーションをプロパティ値のソースとして適用することを指定します。

以下に、この構文を使用して指定された 2 つのPropertyAnimation オブジェクトを示します：

import QtQuick 2.15

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    PropertyAnimation on x { to: 100 }
    PropertyAnimation on y { to: 100 }
}

アニメーションは矩形が読み込まれるとすぐに開始され、そのx およびy の値に自動的に適用されます。<Animation> on <Property>という構文が使用されているため、PropertyAnimation オブジェクトのtarget 値をrect に設定する必要はなく、property の値をx およびy に設定する必要もありません。

これは、グループ化されたアニメーションでも使用でき、グループ内のすべてのアニメーションが同じプロパティに適用されるようにすることができます。たとえば、前の例では、代わりに `SequentialAnimation ` を使用して、矩形の `color ` をまず黄色に、次に青色にアニメーションさせることもできます：

import QtQuick 2.15

Rectangle {
    width: 100; height: 100
    color: "red"

    SequentialAnimation on color {
        ColorAnimation { to: "yellow"; duration: 1000 }
        ColorAnimation { to: "blue"; duration: 1000 }
    }
}

SequentialAnimation オブジェクトは、<Animation> on <Property>という構文を使用してcolor プロパティに指定されているため、その子であるColorAnimation オブジェクトも自動的にこのプロパティに適用され、target やproperty といったアニメーション値を個別に指定する必要はありません。

状態変化時の遷移

状態とは、プロパティが異なる状態を反映するために異なる値を持つことができるプロパティの設定です。状態の変更ではプロパティが急激に変化しますが、アニメーションを使用すると滑らかな遷移が生まれ、視覚的に魅力的な状態変化を実現できます。

Transition 型には、状態変化によって生じるプロパティの変化を補間するためのアニメーション型を含めることができます。オブジェクトに遷移を割り当てるには、transitions プロパティにバインドします。

ボタンには、ユーザーがボタンを選択したときの「pressed 」状態と、ユーザーがボタンを離したときの「released 」状態という2つの状態がある場合があります。各状態に異なるプロパティ構成を割り当てることができます。トランジションは、「selected 」状態から「released 」状態への変化をアニメーションで表現します。同様に、「released 」状態から「selected 」状態への変化の際にもアニメーションが発生します。

Rectangle {
    width: 75; height: 75
    id: button
    state: "RELEASED"

    MouseArea {
        anchors.fill: parent
        onPressed: button.state = "PRESSED"
        onReleased: button.state = "RELEASED"
    }

    states: [
        State {
            name: "PRESSED"
            PropertyChanges { target: button; color: "lightblue"}
        },
        State {
            name: "RELEASED"
            PropertyChanges { target: button; color: "lightsteelblue"}
        }
    ]

    transitions: [
        Transition {
            from: "PRESSED"
            to: "RELEASED"
            ColorAnimation { target: button; duration: 100}
        },
        Transition {
            from: "RELEASED"
            to: "PRESSED"
            ColorAnimation { target: button; duration: 100}
        }
    ]
}

to およびfrom プロパティを状態名にバインドすることで、その状態変化に特定の遷移が割り当てられます。単純な遷移や対称的な遷移の場合、to プロパティをワイルドカード記号「* 」に設定することで、その遷移がすべての状態変化に適用されることを示します。

    transitions:
        Transition {
            to: "*"
            ColorAnimation { target: button; duration: 100}
        }

デフォルトのアニメーションとしての挙動

プロパティのデフォルトのアニメーションは、ビヘイビア・アニメーションを使用して設定されます。Behavior 型で宣言されたアニメーションは、そのプロパティに適用され、プロパティ値の変更をアニメーション化します。ただし、Behavior 型には、ビヘイビア・アニメーションを意図的に有効または無効にするためのenabled プロパティがあります。

ボールコンポーネントでは、x 、y 、およびcolor プロパティにビヘイビアアニメーションが割り当てられている場合があります。このビヘイビアアニメーションは、弾力的な効果をシミュレートするように設定できます。事実上、このビヘイビアアニメーションは、ボールが動くたびに各プロパティに弾力的な効果を適用することになります。

Rectangle {
    width: 75; height: 75; radius: width
    id: ball
    color: "salmon"

    Behavior on x {
        NumberAnimation {
            id: bouncebehavior
            easing {
                type: Easing.OutSine
            }
        }
    }
    Behavior on y {
        animation: bouncebehavior
    }
    Behavior {
        ColorAnimation { target: ball; duration: 100 }
    }
}

プロパティにビヘイビア・アニメーションを割り当てる方法はいくつかあります。「Behavior on <property> 」宣言は、プロパティにビヘイビア・アニメーションを割り当てるための便利な方法です。

アニメーションの再生

アニメーションは、並列または順次で実行できます。並列アニメーションでは、一連のアニメーションが同時に再生され、順次アニメーションでは、一連のアニメーションが順番に再生されます。SequentialAnimation およびParallelAnimation という QML タイプを使用してアニメーションをグループ化することで、これらのアニメーションをどのように再生するかを指定できます。

バナーコンポーネントには、順番に表示される複数のアイコンやスローガンが含まれている場合があります。「opacity 」プロパティは、不透明なオブジェクトを示す「1.0 」に設定することもできます。「SequentialAnimation 」タイプを使用すると、不透明度のアニメーションは、前のアニメーションが終了した後に再生されます。「ParallelAnimation 」タイプでは、アニメーションが同時に再生されます。

Rectangle {
    id: banner

    Column {
        anchors.centerIn: parent
        Text {
            id: code
            text: "Code less."
            opacity: 0.01
        }
        Text {
            id: create
            text: "Create more."
            opacity: 0.01
        }
        Text {
            id: deploy
            text: "Deploy everywhere."
            opacity: 0.01
        }
    }

    MouseArea {
        anchors.fill: parent
        onPressed: playbanner.start()
    }

    SequentialAnimation {
        id: playbanner
        running: false
        NumberAnimation { target: code; property: "opacity"; to: 1.0; duration: 200}
        NumberAnimation { target: create; property: "opacity"; to: 1.0; duration: 200}
        NumberAnimation { target: deploy; property: "opacity"; to: 1.0; duration: 200}
    }
}

SequentialAnimation またはParallelAnimation のいずれかにアニメーションを追加すると、そのアニメーションはグループとしてのみ開始および停止できます。

SequentialAnimation タイプは、トランジション内ではアニメーションが並行して再生されるため、トランジションアニメーションの再生にも役立ちます。

アニメーションの制御

以下のセクションでは、アニメーションを制御するためのさまざまな方法について説明します。

アニメーションの再生

すべてのアニメーション型は、Animation という抽象型を継承しており、この型はアニメーション型に必要な基本のプロパティとメソッドを提供します。すべてのアニメーション型には、再生を制御するためのstart() およびstop() メソッドが含まれています。

イージング

イージングカーブは、アニメーションが開始値と終了値の間をどのように補間するかを定義します。イージングカーブによっては、定義された補間範囲を超える場合もあります。イージングカーブを使用することで、バウンス効果、加速、減速、周期的なアニメーションなどのアニメーション効果を簡単に作成できます。

QMLオブジェクトでは、プロパティアニメーションごとに異なるイージングカーブを設定できます。また、カーブを制御するためのさまざまなパラメータがあり、その中には特定のカーブに固有のものもあります。イージングカーブの詳細については、easing のドキュメントを参照してください。

その他のアニメーションの種類

さらに、QML にはアニメーションに役立つ他のいくつかのタイプが用意されています：

• PauseAnimation: アニメーションを特定の時間だけ一時停止させることができます。
• ScriptAction: アニメーションの実行中に JavaScript を実行できるようにし、StateChangeScript と組み合わせて既存のスクリプトを再利用できます。

アニメーションインスタンスの共有

トランジションや ビヘイビア間でアニメーションインスタンスを共有することはサポートされておらず、予期しない動作を引き起こす可能性があります。以下の例では、Rectangleの位置の変更が正しくアニメーション化されない可能性が高いです。

Rectangle {
    // NOT SUPPORTED: this will not work correctly as both Behaviors
    // try to control a single animation instance.
    NumberAnimation { id: anim; duration: 300; easing.type: Easing.InBack }
    Behavior on x { animation: anim }
    Behavior on y { animation: anim }
}

最も簡単な解決策は、両方のBehaviorsでNumberAnimation を繰り返し呼び出すことです。繰り返し使用するアニメーションが複雑な場合は、カスタムアニメーションコンポーネントを作成し、各Behaviorにインスタンスを割り当てることを検討してください。例えば：

// MyNumberAnimation.qml
NumberAnimation { id: anim; duration: 300; easing.type: Easing.InBack }

// main.qml
Rectangle {
    Behavior on x { MyNumberAnimation {} }
    Behavior on y { MyNumberAnimation {} }
}