C

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

アニメーションとトランジションのタイプ

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

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

ColorAnimation	色値の変化をアニメーション化する
NumberAnimation	qreal型の値の変化をアニメーション化する
PropertyAnimation	プロパティ値の変化をアニメーション化する
RotationAnimation	回転値の変化をアニメーション化する

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

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

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

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

直接的なプロパティ・アニメーション

アニメーションは、プロパティ値にアニメーションオブジェクトを適用することによって作成されます。これらのプロパティ・アニメーションは、プロパティ値の変化の間に値を補間することによって滑らかな動きを適用します。プロパティ・アニメーションは、タイミング・コントロールを提供し、イージング・カーブによってさまざまな補間を可能にします。

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 、rotationのような異なる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: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 }
}

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

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

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

詳細はこちらをご覧ください。

C

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

アニメーションとトランジションのタイプ

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

直接的なプロパティ・アニメーション

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

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

ビヘイビアとしてのデフォルトアニメーション

アニメーションの再生

アニメーションの制御

アニメーションの再生

イージング

その他のアニメーションタイプ

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