Qt Quick 示例 - 动画

这是一个 QML 动画示例的集合。

动画是一系列小型的 QML 示例，这些示例与动画相关。每个示例都是一个小的 QML 文件，强调特定的类型或功能。

运行示例

要从 Qt Creator 运行此示例，打开 欢迎模式 并从示例中选择示例。有关更多信息，请参阅构建和运行示例。

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

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

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

States

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

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 使用 Bézier 曲线动画一个图像。

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