Qtクイックアニメーションの紹介

開発 2022-03-23 17:57:05 訪問数: null

著者：ビリー
著作権表示：著作権は著者に帰属します。商業的転載については著者に連絡してください。非商業的転載の出典を示してください。

序章

インターフェイス開発にQMLを使用する場合、私たちの目標は、一連の流動的なインターフェイスを作成することです。いわゆる流動的なインターフェースとは、UIコンポーネントが動的に変化することを指します。たとえば、インターフェイスのコンポーネントを変更する必要がある場合、ビジュアルキャンバスが突然変更されると、ユーザーエクスペリエンスが低下します。そして、状態変化の過程でガイダンスを追加し、状態を初期状態から目標状態にゆっくりと変化させて、ユーザーが変化の過程を感じることができるようにすると、ユーザーの感覚体験が大幅に向上します。いわゆる動的変化

ここでは、いくつかの重要な概念を描く必要があります。状態、遷移、アニメーション

  • 状態：すべてのアイテムには、オブジェクトとプロパティ値のデフォルト構成を定義するデフォルト状態があります。状態アイテムをstatesプロパティに追加して、アイテムを異なる構成間で切り替えることができるようにすることで、新しい状態を定義できます。
  • 遷移：状態変化が発生したときに適用されるアニメーション
  • アニメーション：時間の経過とともに徐々に変化するプロパティ

詳細については、公式ドキュメントを参照してください：Qt Quickの重要な概念-状態、遷移、およびアニメーション

イージングカーブ

通常、アニメーションの変化は均一です。開発者が単調すぎると思う場合は、アニメーションの変化速度曲線、つまりイージング曲線を調整できます。。アニメーションのイージングプロパティグループを介してイージングカーブを変更します

  • タイプ-スパイラルタイプ
  • 振幅-振幅
  • 期間-期間
  • オーバーシュート-オーバーシュート
  • bezierCurve-ベジェ
    ここに画像の説明を挿入

スパイラルの種類は次のとおりです。

スパイラルタイプ 画像 説明する
Easing.Linear ここに画像の説明を挿入 線形（t）関数の緩和曲線：速度は一定です（デフォルト）
Easing.InQuad ここに画像の説明を挿入 二次（t ^ 2）関数の緩和曲線：ゼロ速度からの加速
Easing.OutQuad 二次（t ^ 2）関数の緩和曲線：ゼロ速度への減速
Easing.InOutQuad ここに画像の説明を挿入 二次（t ^ 2）関数の緩和曲線：半分に加速してから減速します
Easing.OutInQuad ここに画像の説明を挿入 二次（t ^ 2）関数の曲線を緩和する：半分に減速してから加速する
Easing.InCubic ここに画像の説明を挿入 3次（t ^ 3）関数の緩和曲線：ゼロ速度からの加速
Easing.OutCubic ここに画像の説明を挿入 3次（t ^ 3）関数の緩和曲線：ゼロ速度まで減速
Easing.InOutCubic ここに画像の説明を挿入 3次（t ^ 3）関数の緩和曲線：半分に加速してから減速します
Easing.OutInCubic ここに画像の説明を挿入 3次（t ^ 3）関数の曲線を緩和する：半分に減速してから加速する
Easing.InQuart ここに画像の説明を挿入 四次（t ^ 4）関数の緩和曲線：ゼロ速度からの加速
Easing.OutQuart ここに画像の説明を挿入 四次（t ^ 4）関数の緩和曲線：ゼロ速度への減速
Easing.InOutQuart ここに画像の説明を挿入 四次（t ^ 4）関数の緩和曲線：半分に加速してから減速します
Easing.OutInQuart ここに画像の説明を挿入 四次（t ^ 4）関数の曲線を緩和する：半分に減速してから加速する
Easing.InQuint ここに画像の説明を挿入 5次（t ^ 5）関数の緩和曲線：ゼロ速度からの加速
Easing.OutQuint ここに画像の説明を挿入 5次（t ^ 5）関数の緩和曲線：ゼロ速度への減速
Easing.InOutQuint ここに画像の説明を挿入 5次（t ^ 5）関数の緩和曲線：半分に加速してから減速します
Easing.OutInQuint ここに画像の説明を挿入 5次（t ^ 5）関数の曲線を緩和する：半分に減速してから加速する
Easing.InSine ここに画像の説明を挿入 正弦関数の緩和曲線（sin（t））：ゼロ速度からの加速
Easing.OutSine ここに画像の説明を挿入 正弦関数の緩和曲線（sin（t））：ゼロ速度への減速
Easing.InOutSine ここに画像の説明を挿入 正弦関数（sin（t））の緩和曲線：半分に加速してから減速します
Easing.OutInSine ここに画像の説明を挿入 正弦関数の緩和曲線（sin（t））：半分に減速してから、加速します
Easing.InExpo ここに画像の説明を挿入 指数（2 ^ t）関数の緩和曲線：ゼロ速度からの加速
Easing.OutExpo ここに画像の説明を挿入 指数（2 ^ t）関数の緩和曲線：ゼロ速度まで減速
Easing.InOutExpo ここに画像の説明を挿入 指数（2 ^ t）関数の緩和曲線：半分に加速してから減速します
Easing.OutInExpo ここに画像の説明を挿入 指数（2 ^ t）関数の曲線を緩和する：半分に減速してから加速する
Easing.InCirc ここに画像の説明を挿入 円（sqrt（1-t ^ 2））関数の緩和曲線：ゼロ速度からの加速
Easing.OutCirc ここに画像の説明を挿入 円（sqrt（1-t ^ 2））関数の緩和曲線：ゼロ速度まで減速
Easing.InOutCirc ここに画像の説明を挿入 円（sqrt（1-t ^ 2））関数の緩和曲線：半分に加速してから減速します
Easing.OutInCirc ここに画像の説明を挿入 円形（sqrt（1-t ^ 2））関数の曲線を緩和する：半分に減速してから加速する
Easing.InElastic ここに画像の説明を挿入 弾性（指数関数的に減衰する正弦波）関数の緩和曲線：ゼロ速度からの加速度。ピーク振幅は振幅パラメータで設定でき、減衰周期は周期パラメータで設定できます
Easing.OutElastic ここに画像の説明を挿入 弾性（指数関数的に減衰する正弦波）関数の緩和曲線：速度をゼロまで減速します。ピーク振幅は振幅パラメータで設定でき、減衰周期は周期パラメータで設定できます
Easing.InOutElastic ここに画像の説明を挿入 弾性（指数関数的に減衰する正弦波）関数の緩和曲線：半分に加速してから減速する
Easing.OutInElastic ここに画像の説明を挿入 弾性（指数関数的に減衰する正弦波）関数の緩和曲線：半分に減速してから加速する
Easing.InBack ここに画像の説明を挿入 後方への緩和曲線（オーバーシュート3次関数：（s + 1）* t 3-s * t 2）関数：ゼロ速度からの加速
Easing.OutBack ここに画像の説明を挿入 後方（オーバーシュート3次関数：（s + 1）* t 3-s * t 2）関数の緩和曲線：ゼロ速度まで減速
Easing.InOutBack ここに画像の説明を挿入 後方（オーバーシュート3次関数：（s + 1）* t 3-s * t 2）関数の緩和曲線：半分に加速してから減速する
Easing.OutInBack ここに画像の説明を挿入 バックのイージングカーブ（オーバーシュート3次関数：（s + 1）* t 3-s * t 2）関数：半分に減速してから加速
Easing.InBounce ここに画像の説明を挿入 バウンス（指数関数的減衰放物線バウンス）関数の緩和曲線：ゼロ速度からの加速
Easing.OutBounce ここに画像の説明を挿入 バウンス（指数関数的減衰放物線バウンス）関数の緩和曲線：速度をゼロまで減速
Easing.InOutBounce ここに画像の説明を挿入 バウンス（指数関数的減衰放物線バウンス）関数の緩和曲線：半分に加速してから減速します
Easing.OutInBounce ここに画像の説明を挿入 バウンス（指数関数的減衰放物線バウンス）関数の曲線を緩和する：半分に減速してから加速する
Easing.Bezier - easing.beziercroveプロパティによって定義されたカスタムイージングカーブ

アニメーションの種類

  • AnchorAnimation-アンカー値への変更をアニメーション化します
    ここに画像の説明を挿入
Rectangle {
    id: myRect
    width: 100; height: 100
    color: "red"
    
    property int type: 1
    
    states: [
        State {
            name: "right"
            AnchorChanges { target: myRect; anchors.right: parent.right }
        },
        State {
            name: "bottom"
            AnchorChanges { target: myRect; anchors.bottom: parent.bottom }
        },
        State {
            name: "left"
            AnchorChanges { target: myRect; anchors.left: parent.left }
        },
        State {
            name: "top"
            AnchorChanges { target: myRect; anchors.top: parent.top }
        }
    ]
    
    transitions: Transition {
        AnchorAnimation { duration: 500 }
    }
    
    MouseArea {
        anchors.fill: parent
        onClicked: {
            let state = {
                1: "right",
                2: "bottom",
                3: "left",
                4: "top"
            }
            myRect.state = state[myRect.type]
            
            myRect.type++
            if ( myRect.type > 4 ) {
                myRect.type = 1
            }
        }
    }
}
  • ColorAnimation-色の値の変化をアニメーション化します
    ここに画像の説明を挿入
Rectangle {
    id: myRect
    width: 100; height: 100
    color: "black"
    
    property int type: 1
    
    states: [
        State {
            name: "red"
            PropertyChanges { target: myRect; color: "red" }
        },
        State {
            name: "yellow"
            PropertyChanges { target: myRect; color: "yellow" }
        },
        State {
            name: "pink"
            PropertyChanges { target: myRect; color: "pink" }
        },
        State {
            name: "blue"
            PropertyChanges { target: myRect; color: "blue" }
        },
        State {
            name: "black"
            PropertyChanges { target: myRect; color: "black" }
        }
    ]
    
    transitions: Transition {
        ColorAnimation { duration: 500 }
    }
    
    MouseArea {
        anchors.fill: parent
        onClicked: {
            let state = {
                1: "red",
                2: "yellow",
                3: "pink",
                4: "blue",
                5: "black",
            }
            myRect.state = state[myRect.type]
            
            myRect.type++
            if ( myRect.type > 5 ) {
                myRect.type = 1
            }
        }
    }
}
  • NumberAnimation-変更をqrealタイプの値にアニメーション化します
    ここに画像の説明を挿入
Rectangle {
    id: myRect
    width: 100; height: 100
    color: "red"

    property int type: 1

    states: [
        State {
            name: "step1"
            PropertyChanges { target: myRect; x: 60; y: 60; width: 120; height: 120; rotation: 30 }
        },
        State {
            name: "step2"
            PropertyChanges { target: myRect; x: 60; y: 60; width: 120; height: 120; rotation: 60 }
        },
        State {
            name: "step3"
            PropertyChanges { target: myRect; x: 40; y: 40; width: 180; height: 180; rotation: 90 }
        },
        State {
            name: "step4"
            PropertyChanges { target: myRect; x: 100; y: 100; width: 50; height: 50; rotation: 45 }
        }
    ]

    transitions: Transition {
        NumberAnimation { duration: 500 }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            let state = {
                1: "step1",
                2: "step2",
                3: "step3",
                4: "step4"
            }
            myRect.state = state[myRect.type]

            myRect.type++
            if ( myRect.type > 4 ) {
                myRect.type = 1
            }
        }
    }
}
  • ParentAnimation-親クラスへの変更をアニメーション化します
    ここに画像の説明を挿入
Rectangle {
    id: myRect
    width: 300; height: 100
    color: "black"

    property int type: 1

    Rectangle {
        id: redRect
        width: 100; height: 100
        color: "red"
    }

    Rectangle {
        id: blueRect
        x: 110
        width: 100; height: 100
        color: "blue"
    }

    Rectangle {
        id: yellowRect
        x: 220; y: 10
        width: 50; height: 50
        color: "yellow"

        states: [
            State {
                name: "red"
                ParentChange { target: yellowRect; parent: redRect; x: 10; y: 10 }
            },
            State {
                name: "blue"
                ParentChange { target: yellowRect; parent: blueRect; x: 10; y: 10 }
            },
            State {
                name: "black"
                ParentChange { target: yellowRect; parent: myRect; x: 220; y: 10 }
            }
        ]

        transitions: Transition {
            ParentAnimation {
                NumberAnimation { properties: "x,y"; duration: 500 }
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                let state = {
                    1: "red",
                    2: "blue",
                    3: "black"
                }
                yellowRect.state = state[myRect.type]

                myRect.type++
                if ( myRect.type > 3 ) {
                    myRect.type = 1
                }
            }
        }
    }
}
  • PathAnimation-パスに沿ってアイテムをアニメーション化する
    ここに画像の説明を挿入
Rectangle {
    width: 400; height: 400

    PathInterpolator {
        id: motionPath

        path: Path {
            startX: 0; startY: 0

            PathCubic {
                x: 350; y: 350

                control1X: 350; control1Y: 0
                control2X: 0; control2Y: 350
            }
        }

        NumberAnimation on progress { id: animation; from: 0; to: 1; duration: 2000 }
    }

    Rectangle {
        x: motionPath.x; y: motionPath.y
        width: 50; height: 50
        rotation: motionPath.angle
        color: "green"
    }

    MouseArea {
        anchors.fill: parent
        onClicked: animation.start()
    }
}
  • PropertyAnimation-プロパティ値への変更をアニメーション化します
    ここに画像の説明を挿入
Rectangle {
    width: 100; height: 100
    color: "red"

    property bool location: true

    Behavior on x { PropertyAnimation {} }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            var x = location ? 50 : 0
            parent.x = x
            location = !location
        }
    }
}
  • RotationAnimation-回転の変化をアニメーション化する
    ここに画像の説明を挿入
Item {
    width: 300; height: 300

    Rectangle {
        id: myRect
        width: 150; height: 100
        anchors.centerIn: parent
        color: "red"
        antialiasing: true

        property int type: 1

        states: [
            State {
                name: "state1"
                PropertyChanges { target: myRect; rotation: 45 }
            },
            State {
                name: "state2"
                PropertyChanges { target: myRect; rotation: 90 }
            },
            State {
                name: "state3"
                PropertyChanges { target: myRect; rotation: 180 }
            }
        ]

        transitions: Transition {
            RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            let state = {
                1: "state1",
                2: "state2",
                3: "state3"
            }
            myRect.state = state[myRect.type]

            myRect.type++
            if ( myRect.type > 3 ) {
                myRect.type = 1
            }
        }
    }
}
  • Vector3dAnimation-QVector3d値への変更をアニメーション化します
    ここに画像の説明を挿入
Rectangle {
    id: myRect
    x: 50; y: 50
    width: 100; height: 100
    color: "red"

    transform: Rotation {
        angle: 45
        origin.x: 50; origin.y: 50
        axis: Qt.vector3d(0, 1, 0)

        SequentialAnimation on axis {
            id: animation
            running: false
            Vector3dAnimation { from: "1, 0, 0"; to: "0, 1, 0"; duration: 1000 }
            Vector3dAnimation { from: "0, 1, 0"; to: "0, 0, 1"; duration: 1000 }
            Vector3dAnimation { from: "0, 0, 1"; to: "1, 0, 1"; duration: 1000 }
            Vector3dAnimation { from: "1, 0, 1"; to: "1, 1, 0"; duration: 1000 }
            Vector3dAnimation { from: "1, 1, 0"; to: "1, 1, 1"; duration: 1000 }
            Vector3dAnimation { from: "1, 1, 1"; to: "1, 0, 1"; duration: 1000 }
            Vector3dAnimation { from: "1, 0, 1"; to: "0, 0, 1"; duration: 1000 }
            Vector3dAnimation { from: "0, 0, 1"; to: "0, 1, 0"; duration: 1000 }
            Vector3dAnimation { from: "0, 1, 0"; to: "1, 0, 0"; duration: 1000 }
        }
    }

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

アニメーションを組み合わせる

  • SequentialAnimation-アニメーションを順番に実行します
    ここに画像の説明を挿入
Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    SequentialAnimation {
        id: animation
        running: false
        NumberAnimation { target: rect; property: "x"; to: 100; duration: 500 }
        NumberAnimation { target: rect; property: "y"; to: 100; duration: 500 }
        NumberAnimation { target: rect; property: "x"; to: 0; duration: 500 }
        NumberAnimation { target: rect; property: "y"; to: 0; duration: 500 }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: animation.start()
    }
}
  • ParallelAnimation-アニメーションを並行して実行します
    ここに画像の説明を挿入
Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    ParallelAnimation {
        id: animation
        running: false
        NumberAnimation { target: rect; property: "x"; to: 100; duration: 1000 }
        NumberAnimation { target: rect; property: "y"; to: 100; duration: 1000 }
        NumberAnimation { target: rect; property: "width"; to: 200; duration: 1000 }
        NumberAnimation { target: rect; property: "height"; to: 200; duration: 1000 }
        NumberAnimation { target: rect; property: "rotation"; to: 90; duration: 1000 }
    }

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

行動アニメーション

  • 動作-プロパティ変更のデフォルトのアニメーションを指定します
    ここに画像の説明を挿入
Rectangle {
    id: coloredRect
    width: 100; height: 100
    anchors.centerIn: parent
    color: "red"

    states: State {
        name: "GreenState"
        when: mouser.containsMouse

        PropertyChanges {
            target: coloredRect
            color: "green"
        }
    }

    Behavior on color {  ColorAnimation {} }

    MouseArea {
        id: mouser
        anchors.fill: parent
        hoverEnabled: true
    }
}

アニメーションが一時停止しました

  • PauseAnimation-アニメーションに一時停止を導入します
    ここに画像の説明を挿入
Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    SequentialAnimation {
        id: animation
        running: false
        NumberAnimation { target: rect; property: "x"; to: 100; duration: 500 }
        NumberAnimation { target: rect; property: "y"; to: 100; duration: 500 }
        PauseAnimation { duration: 1000 }
        NumberAnimation { target: rect; property: "x"; to: 0; duration: 500 }
        NumberAnimation { target: rect; property: "y"; to: 0; duration: 500 }
    }

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

春のアニメーション

  • SpringAnimation-適切なばね定数を使用して加速と減衰を制御し、効果が消える速度を制御して、ばねの振動動作をシミュレートします。
    ここに画像の説明を挿入
Rectangle {
    id: rect
    width: 50; height: 50
    color: "red"

    Behavior on x { SpringAnimation { spring: 2; damping: 0.2 } }
    Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            rect.x = mouse.x - rect.width/2
            rect.y = mouse.y - rect.height/2
        }
    }
}

プロパティ追跡アニメーション

  • SmoothedAnimation-機能がトラック値をスムーズにすることを可能にします
    ここに画像の説明を挿入
Item {
    Rectangle {
        width: 60; height: 60
        x: rect1.x - 5; y: rect1.y - 5
        color: "green"

        Behavior on x { SmoothedAnimation { velocity: 200; duration: 500 } }
        Behavior on y { SmoothedAnimation { velocity: 200; duration: 500 } }
    }

    Rectangle {
        id: rect1
        x: 5; y: 5
        width: 50; height: 50
        color: "red"
    }

    focus: true
    Keys.onRightPressed: rect1.x = rect1.x + 100
    Keys.onLeftPressed: rect1.x = rect1.x - 100
    Keys.onUpPressed: rect1.y = rect1.y - 100
    Keys.onDownPressed: rect1.y = rect1.y + 100
}

アニメーションでスクリプトを実行する

  • ScriptAction-アニメーションでスクリプトを実行する
    ここに画像の説明を挿入
Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    SequentialAnimation {
        id: animation
        running: false
        NumberAnimation { target: rect; property: "x"; to: 100; duration: 500 }
        NumberAnimation { target: rect; property: "y"; to: 100; duration: 500 }
        ScriptAction { script: doSomething() }
        NumberAnimation { target: rect; property: "x"; to: 0; duration: 500 }
        NumberAnimation { target: rect; property: "y"; to: 0; duration: 500 }
        ScriptAction { script: doStateStuff() }
    }

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

    function doSomething() {
        rect.color = "blue"
        rect.width = 120
        rect.height = 120
    }

    function doStateStuff() {
        rect.color = "red"
        rect.width = 100
        rect.height = 100
    }
}

おすすめ

転載: blog.csdn.net/qq_34139994/article/details/120451422
おすすめ
GitHub のホットリストに急上昇 — オープンソースのプログラミング言語とフレームワークは、どうしてこんなにも魅力的なのでしょうか?
北京ヒューマノイドロボットイノベーションセンターが、擬人化走行用の純粋な電気駆動を備えた世界初のフルサイズヒューマノイドロボット「Tiangong」を発売
ランキング
アリクラウドサーバ_ubuntu ECSシステムディスク拡張システム_
ボタンをクリックしてクリップボードにコピーします
脅威ハンティングを使用してサイバー セキュリティを強化する
ライン画像やコンテナnginxのの建設
Python での try の使用について書く
リアルタイムのデータウェアハウスを構築する方法高速データ時代、MySQLのAnalyticDBはあなたを教えて
Docker でのネットワークおよびデータ管理 (Docker Swarm クラスターおよび Docker データ管理を含む)
Java ループの比較: 従来の for ループ、拡張された for ループ、および forEach ループ
浙江大学版「C言語プログラミング（第3版）」演習2-18
Gestion du temps RTOS - Utilisation de la fonction de crochet SysTick pour réaliser l'échantillonnage de synchronisation et les sous-sections de ce chapitre
アーカイブ
もっと
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

コードワールド

© 2018 codetd.com