Qt Quick 示例 - 动画

这是 QML 动画示例集。

动画是与动画有关的 QML 小范例集。每个示例都是一个强调特定类型或特征的小 QML 文件。

有关动画的更多信息，请访问Important Concepts inQt Quick - States, Transitions and Animations。

运行示例

要从 Qt Creator，打开Welcome 模式，然后从Examples 中选择示例。更多信息，请参阅Qt Creator: 教程：构建并运行。

彩色动画

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使用数字动画使一个圆上下跳动。

// 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使用动画使图标上下跳动。

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
}

行为

行为使用行为将矩形移动到你点击的位置。

// 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 网球

Tv Tennis使用复杂的行为使球拍跟随球运动，从而模拟一场无限的网球比赛。同样，一个依赖于其他值的绑定应用于位置，而一个行为则提供了动画效果。

缓和曲线

缓和曲线展示了Qt Quick 动画中所有可用的缓和曲线。

状态

状态演示了项目的属性如何在不同状态下变化。

它定义了几种状态：

// 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 {
    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 {
    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

© 2025 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.