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 、rotationのような異なる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 プロパティにバインドします。

ボタンには、ユーザーがボタンをクリックしたときの状態（pressed ）と、ユーザーがボタンを離したときの状態（released ）の2つの状態があります。それぞれの状態に対して、異なるプロパティ設定を割り当てることができます。トランジションは、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 タイプで宣言されたアニメーションはプロパティに適用され、プロパティの値が変更されるとアニメーションします。しかし、ビヘイビアタイプには、ビヘイビアアニメーションを意図的に有効または無効にするための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 Examples - Animationを参照してください。

アニメーションの並列再生と連続再生

アニメーションは並列またはシーケンスで実行することができます。並列アニメーションは複数のアニメーションを同時に再生し、連続アニメーションは複数のアニメーションを順番に再生します。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 }
}

最も簡単な修正方法は、両方のビヘイビアでNumberAnimation を繰り返すことです。繰り返されるアニメーションがかなり複雑な場合は、カスタムアニメーションコンポーネントを作成して、それぞれのBehaviorにインスタンスを割り当てるなどの方法も考えられます：

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