Back to Qt.io
Contact Us Blog Download Qt
このページでは

Qt Quick 例 - アニメーション

こちらは、QMLのアニメーションに関するサンプル集です。

緑色の地面の上で、青から濃い色へと変化する空のグラデーション

「アニメーション」は、アニメーションに関連する小規模なQMLサンプルを集めたものです。各サンプルは、特定のタイプや機能を重点的に解説した小さなQMLファイルです。

アニメーションに関する詳細については、「Qt Quick の重要な概念 - 状態、遷移、およびアニメーション」をご覧ください。

例の実行

サンプルは以下の手順で実行できます：

ColorAnimation

ColorAnimation は、色のアニメーションを使用して、空を昼から夜へとフェードさせます。

gradient: Gradient {
    GradientStop {
        position: 0.0
        SequentialAnimation on color {
            loops: Animation.Infinite
            ColorAnimation { from: "#14148c"; to: "#0E1533"; duration: 5000 }
            ColorAnimation { from: "#0E1533"; to: "#14148c"; duration: 5000 }
        }
    }
    GradientStop {
        position: 1.0
        SequentialAnimation on color {
            loops: Animation.Infinite
            ColorAnimation { from: "#14aaff"; to: "#437284"; duration: 5000 }
            ColorAnimation { from: "#437284"; to: "#14aaff"; duration: 5000 }
        }
    }
}

PropertyAnimation

PropertyAnimation は、数値アニメーションを使用して、円を上下にバウンドさせます。

// Animate the y property. Setting loops to Animation.Infinite makes the
// animation repeat indefinitely, otherwise it would only run once.
SequentialAnimation on y {
    loops: Animation.Infinite

    // Move from minHeight to maxHeight in 300ms, using the OutExpo easing function
    NumberAnimation {
        from: smiley.minHeight; to: smiley.maxHeight
        easing.type: Easing.OutExpo; duration: 300
    }

    // Then move back to minHeight in 1 second, using the OutBounce easing function
    NumberAnimation {
        from: smiley.maxHeight; to: smiley.minHeight
        easing.type: Easing.OutBounce; duration: 1000
    }

    // Then pause for 500ms
    PauseAnimation { duration: 500 }
}

Animators

Animatorsは、アニメーターを使用してアイコンを上下にバウンドさせます。

SequentialAnimation {
    SequentialAnimation {
        ParallelAnimation {
            YAnimator {
                target: smiley;
                from: smiley.minHeight;
                to: smiley.maxHeight
                easing.type: Easing.OutExpo;
                duration: 300
            }
            ScaleAnimator {
                target: shadow
                from: 1
                to: 0.5
                easing.type: Easing.OutExpo;
                duration: 300
            }
        }
        ParallelAnimation {
            YAnimator {
                target: smiley;
                from: smiley.maxHeight;
                to: smiley.minHeight
                easing.type: Easing.OutBounce;
                duration: 1000
            }
            ScaleAnimator {
                target: shadow
                from: 0.5
                to: 1
                easing.type: Easing.OutBounce;
                duration: 1000
            }
        }
    }
    PauseAnimation { duration: 500 }
    running: true
    loops: Animation.Infinite
}

Behaviors

Behaviorsは、ビヘイビアを使用して、クリックした位置へ長方形を移動させます。

// Set an 'elastic' behavior on the focusRect's y property.
Behavior on y {
    NumberAnimation {
        easing.type: Easing.OutElastic
        easing.amplitude: 3.0
        easing.period: 2.0
        duration: 300
    }
}

揺れるテキスト

「Wiggly Text」では、ドラッグ操作に合わせてテキストをアニメーションさせ、揺らさせるために、より複雑なビヘイビアの使用例を示しています。これは、各文字に複雑なバインディングを割り当てることで実現されています：

            x: follow ? follow.x + follow.width : container.width / 6
            y: follow ? follow.y : container.height / 2

次に、ビヘイビアを使用して各文字の動きをアニメーション化します：

            Behavior on x { enabled: container.animated; SpringAnimation { spring: 3; damping: 0.3; mass: 1.0 } }
            Behavior on y { enabled: container.animated; SpringAnimation { spring: 3; damping: 0.3; mass: 1.0 } }

Tv Tennis

「Tv Tennis」では、複雑なビヘイビアを使用して、パドルがボールを追いかけるようにし、終わりのないテニスゲームをシミュレートしています。ここでも、他の値に依存するバインディングが位置に適用され、ビヘイビアによってアニメーションが生成されています。

イージングカーブ

「Easing Curves」は、Qt Quick のアニメーションで利用可能なすべてのイージングカーブを紹介しています。

ステート

「States」では、アイテムのプロパティが状態ごとにどのように変化するかを示しています。

ここでは、いくつかの状態が定義されています：

// In state 'middleRight', move the image to middleRightRect
State {
    name: "middleRight"
    PropertyChanges {
        userIcon {
            x: middleRightRect.x
            y: middleRightRect.y
        }
    }
},

// In state 'bottomLeft', move the image to bottomLeftRect
State {
    name: "bottomLeft"
    PropertyChanges {
        userIcon {
            x: bottomLeftRect.x
            y: bottomLeftRect.y
        }
    }
}

トランジション

「Transitions」では、「States」の例を基に、トランジションを設定してプロパティの変更をアニメーション化します：

// Transitions define how the properties change when the item moves between each state
transitions: [

    // When transitioning to 'middleRight' move x,y over a duration of 1 second,
    // with OutBounce easing function.
    Transition {
        from: "*"; to: "middleRight"
        NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce; duration: 1000 }
    },

    // When transitioning to 'bottomLeft' move x,y over a duration of 2 seconds,
    // with InOutQuad easing function.
    Transition {
        from: "*"; to: "bottomLeft"
        NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: 2000 }
    },

    // For any other state changes move x,y linearly over duration of 200ms.
    Transition {
        NumberAnimation { properties: "x,y"; duration: 200 }
    }

PathAnimation

PathAnimationは、PathAnimation を使用して、ベジェ曲線に沿って画像をアニメーション化します。

PathAnimation {
    id: pathAnim

    duration: 2000
    easing.type: Easing.InQuad

    target: box
    orientation: PathAnimation.RightFirst
    anchorPoint: Qt.point(box.width/2, box.height/2)
    path: Path {
        startX: 50; startY: 50

        PathCubic {
            x: window.width - 50
            y: window.height - 50

            control1X: x; control1Y: 50
            control2X: 50; control2Y: y
        }

        onChanged: canvas.requestPaint()
    }
}

PathInterpolator

PathInterpolatorは、PathInterpolator を使用して、同じベジェ曲線に沿って画像をアニメーション化します。

PathInterpolator {
    id: motionPath

    path: Path {
        startX: 50; startY: 50

        PathCubic {
            x: window.width - 50
            y: window.height - 50

            control1X: x; control1Y: 50
            control2X: 50; control2Y: y
        }

        onChanged: canvas.requestPaint()
    }

    SequentialAnimation on progress {
        running: true
        loops: -1
        PauseAnimation { duration: 1000 }
        NumberAnimation {
            id: progressAnim
            running: false
            from: 0; to: 1
            duration: 2000
            easing.type: Easing.InQuad
        }
    }
}

サンプルプロジェクト @ code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.