アニメーションとトランジションQt Quick

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

• Transition - 状態変化の際にトランジションをアニメーション化する
• SequentialAnimation - アニメーションを順次実行する
• ParallelAnimation - アニメーションを並列で実行する
• Behavior - プロパティ変更時のデフォルトのアニメーションを指定する
• PropertyAction - アニメーション実行中にプロパティを即時変更する
• PauseAnimation - アニメーションに一時停止を挿入する
• SmoothedAnimation - プロパティが値を滑らかに追従できるようにする
• SpringAnimation - プロパティがバネのような動きで値を追従できるようにする
• 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.99
        to: 1.0
        loops: Animation.Infinite
        easing {type: Easing.OutBack; overshoot: 500}
   }
}

特殊なプロパティアニメーションタイプは、`PropertyAnimation ` タイプよりも効率的な実装となっています。これらは、int 、color 、回転など、さまざまな QML タイプにアニメーションを設定するためのものです。同様に、`ParentAnimation ` を使用すると、親要素の変更をアニメーション化できます。

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

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

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

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

import QtQuick 2.0

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.0

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 といったアニメーション値を個別に指定する必要はありません。

状態変更時のトランジション

Qt Quick States とは、プロパティが異なる状態を反映するために異なる値を持つ場合のプロパティ設定のことです。状態の変化はプロパティの急激な変化をもたらしますが、アニメーションによって遷移を滑らかにすることで、視覚的に魅力的な状態変化を実現します。

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

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

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"

    component BounceAnimation : NumberAnimation {
       easing {
          type: Easing.OutElastic
          amplitude: 1.0
          period: 0.5
       }
    }

    Behavior on x {
        BounceAnimation {}
    }
    Behavior on y {
        BounceAnimation {}
    }
    Behavior on color {
        ColorAnimation { target: ball; duration: 100 }
    }
}

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

挙動アニメーションの実例については、「Qt Quick の例 - アニメーション」を参照してください。

アニメーションの並列再生または順次再生

アニメーションは並列または順次で実行できます。並列アニメーションでは、一連のアニメーションが同時に再生されますが、順次アニメーションでは、一連のアニメーションが順番に（1つずつ続けて）再生されます。『SequentialAnimation 』および『ParallelAnimation 』でアニメーションをグループ化すると、アニメーションは順次または並列で再生されます。

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

Rectangle {
    id: banner
    width: 150; height: 100; border.color: "black"

    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 型を継承しています。Animation オブジェクトを直接作成することはできませんが、この型はアニメーション型に必要なプロパティやメソッドを提供しています。アニメーション型には、start() 、stop() 、resume() 、pause() 、restart() 、complete() といったメソッドがあり、これらすべてがアニメーションの実行を制御します。

イージング

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

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

イージングのサンプルでは、さまざまなイージングタイプを視覚的に確認できます。

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

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

• PauseAnimation: アニメーション中に一時停止を可能にします
• ScriptAction: アニメーション中にJavaScriptを実行できるようにし、StateChangeScript と組み合わせて既存のスクリプトを再利用できます
• PropertyAction: アニメーション中にプロパティを即座に変更し、プロパティの変更をアニメーション化しない

これらは、さまざまなプロパティの種類をアニメーション化する特殊なアニメーションタイプです

• SmoothedAnimation: ターゲット値が変化した際に、アニメーション内で滑らかな変化をもたらす、NumberAnimation の特殊なタイプ
• SpringAnimation: `mass`、`damping `などの特殊な属性を備えた、バネのようなアニメーションを提供しますepsilon
• ParentAnimation: 親の変更をアニメーション化するために使用されます（ParentChange を参照）
• AnchorAnimation: アンカーの変更をアニメーション化するために使用されます（AnchorChanges を参照）

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

トランジションやビヘイビア間でアニメーションインスタンスを共有することはサポートされておらず、未定義の挙動を引き起こす可能性があります。以下の例では、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 }
}

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

Rectangle {
    component MyNumberAnimation : NumberAnimation {
        duration: 300; easing.type: Easing.InBack
    }
    Behavior on x { MyNumberAnimation {} }
    Behavior on y { MyNumberAnimation {} }
}