编程进阶网
杨充
2025-08-30
目录

图形和动画

# 05.图形和动画

# 目录介绍

  • 5.1 颜色和渐变
    • 5.1.1 颜色
    • 5.1.2 渐变
    • 5.1.3 调色板
  • 5.2 图片展示
    • 5.2.1 显示静态图片
    • 5.2.2 带边界的图片
    • 5.2.3 动态图片
  • 5.3 Transform变换
    • 5.3.1 缩放（Scale）
    • 5.3.2 旋转（Rotation）
    • 5.3.3 平移（Translation）
  • 5.4 状态
    • 5.4.1 创建状态
    • 5.4.2 默认状态（default state）
    • 5.4.3 when属性
  • 5.5 动画和过渡
    • 5.5.1 基本动画
    • 5.5.2 并行动画
    • 5.5.3 顺序动画
    • 5.5.4 状态和过渡
    • 5.5.5 行为动画
    • 5.5.6 路径动画
    • 5.5.7 动画总结
  • 5.6 图形效果
    • 5.6.1 图形模块介绍
    • 5.6.2 阴影效果
    • 5.6.3 模糊效果
    • 5.6.4 渐变效果
    • 5.6.5 颜色叠加
    • 5.6.6 发光效果
    • 5.6.7 遮罩效果
    • 5.6.8 组合效果
    • 5.6.9 图形效果总结
  • 5.7 复杂动画效果
    • 5.7.1 AnimatedImage
    • 5.7.2 序列帧替代
    • 5.7.3 使用Lottie动画
  • 5.8 综合案例

# 5.1 颜色和渐变

在 QML 中，你可以使用颜色、渐变和调色板来美化界面、突出显示元素或为用户提供更丰富的视觉体验。下面是关于在 QML 中使用颜色、渐变和调色板的简要介绍：

# 5.1.1 颜色

在 QML 中，颜色可以使用预定义的颜色名称（如 "red"、"blue"）或使用 RGB、RGBA、HSL、HSV 等格式来表示。以下是一些示例：

使用预定义颜色名称：

Rectangle {
    color: "lightblue"
}
1
2
3

使用 RGB 格式：

Rectangle {
    color: "#ff0000" // 红色
}
1
2
3

# 5.1.2 渐变

QML 中的渐变可以用于创建平滑的颜色过渡效果。你可以使用线性渐变（Gradient）或辐射渐变（RadialGradient）。以下是一个简单的线性渐变示例：

Rectangle {
    width: 200
    height: 200

    gradient: Gradient {
        GradientStop { position: 0.0; color: "red" }
        GradientStop { position: 1.0; color: "blue" }
    }
}
1
2
3
4
5
6
7
8
9

# 5.1.3 调色板

调色板用于定义应用程序的整体颜色主题，包括按钮、文本、背景等元素的颜色。你可以在应用程序中定义自定义的调色板，以便在整个应用程序中保持一致的视觉风格。以下是一个简单的调色板示例：

ApplicationWindow {
    palette: Palette {
        base: "#f0f0f0" // 基础颜色
        alternateBase: "#e0e0e0" // 替代基础颜色
        text: "#333333" // 文本颜色
        button: "#007bff" // 按钮颜色
    }
}
1
2
3
4
5
6
7
8

# 5.2 图片展示

在 QML 中，你可以使用 Image 控件来显示静态图片，BorderImage 控件来显示带边界的图片，以及通过动态改变图片路径或属性来实现动态图片效果。

# 5.2.1 显示静态图片

使用 Image 控件可以在界面中显示静态图片。你可以指定图片的路径或 URL。以下是一个简单的示例：

Image {
    source: "image.png"
    width: 100
    height: 100
}
1
2
3
4
5

# 5.2.2 带边界的图片

BorderImage 控件允许你显示带有边界的图片，边界会根据图片的尺寸进行拉伸。以下是一个简单的示例：

BorderImage {
    source: "borderimage.png"
    border.left: 10
    border.right: 10
    border.top: 10
    border.bottom: 10
    width: 200
    height: 200
}
1
2
3
4
5
6
7
8
9

# 5.2.3 动态图片

你可以通过绑定属性或在运行时改变图片的路径来实现动态图片效果。以下是一个简单的示例，演示如何在按钮点击时切换图片：

Image {
    id: dynamicImage
    source: "image1.png"
    width: 100
    height: 100
}

Button {
    text: "Change Image"
    onClicked: {
        if (dynamicImage.source === "image1.png") {
            dynamicImage.source = "image2.png"
        } else {
            dynamicImage.source = "image1.png"
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 5.3 Transform变换

在 QML 中，你可以使用变换（Transform）来实现缩放、旋转和平移等效果，从而改变界面元素的外观和位置。下面是关于在 QML 中实现缩放、旋转和平移变换的简要介绍：

# 5.3.1 缩放（Scale）

使用 Scale 变换可以实现对界面元素的缩放效果。你可以设置 xScale 和 yScale 属性来分别控制水平和垂直方向的缩放比例。以下是一个简单的示例：

Rectangle {
    width: 100
    height: 100
    color: "red"

    transform: Scale {
        xScale: 2
        yScale: 1.5
    }
}
1
2
3
4
5
6
7
8
9
10

# 5.3.2 旋转（Rotation）

使用 Rotation 变换可以实现对界面元素的旋转效果。你可以设置 angle 属性来指定旋转角度。以下是一个简单的示例：

Rectangle {
    width: 100
    height: 100
    color: "blue"

    transform: Rotation {
        origin.x: 50
        origin.y: 50
        angle: 45
    }
}
1
2
3
4
5
6
7
8
9
10
11

# 5.3.3 平移（Translation）

使用 Translation 变换可以实现对界面元素的平移效果。你可以设置 x 和 y 属性来指定水平和垂直方向的平移距离。以下是一个简单的示例：

Rectangle {
    width: 100
    height: 100
    color: "green"

    transform: Translation {
        x: 50
        y: 50
    }
}
1
2
3
4
5
6
7
8
9
10

# 5.4 状态

# 5.4.1 创建状态

在 QML 中创建状态需要使用 State 和 StateGroup 组件。State 用于定义单个状态，而 StateGroup 用于组织和管理多个状态。

以下是一个简单的示例，展示如何在 QML 中创建状态：

Rectangle {
    width: 100
    height: 100

    StateGroup {
        id: stateGroup

        State {
            name: "active"
            PropertyChanges { target: rectangle; color: "red" }
        }

        State {
            name: "inactive"
            PropertyChanges { target: rectangle; color: "blue" }
        }
    }

    transitions: Transition {
        NumberAnimation { properties: "color"; duration: 500 }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (stateGroup.state === "active") {
                stateGroup.state = "inactive"
            } else {
                stateGroup.state = "active"
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

在这个示例中，我们创建了一个矩形，并定义了两个状态：active 和 inactive。在 active 状态下，矩形的颜色为红色；在 inactive 状态下，矩形的颜色为蓝色。通过点击矩形，可以在这两个状态之间进行切换。

  • StateGroup 组件用于组织状态，并且可以在其中定义多个 State。
  • 在每个 State 中，我们使用 PropertyChanges 来指定在该状态下要改变的属性，这里是改变矩形的颜色。
  • transitions 定义了状态切换时的过渡效果，这里使用了 NumberAnimation 来实现颜色的平滑过渡。
  • 通过 MouseArea 的点击事件，我们在不同状态之间进行切换。

创建两个页面：MainPage和PassPage。使用状态（State）和过渡（Transition）来实现页面之间的切换动画。实现思路：

  1. 定义一个根Item，包含两个状态：main和pass。
  2. 在main状态显示MainPage，在pass状态显示PassPage。
  3. 定义从main到pass和从pass到main的过渡动画。

# 5.4.2 默认状态（default state）

在 QML 中，default 状态和 when 属性是用于定义默认状态和条件状态切换的重要概念。

  • 默认状态是在没有明确指定状态时应用的状态。当没有明确设置状态时，QML 会自动将元素置于默认状态。
  • 你可以使用 default 关键字来指定默认状态。默认状态通常用于定义元素的初始状态。
  • 下面是一个简单的示例，展示如何定义默认状态：
Rectangle {
    width: 100
    height: 100

states: [
    State {
        name: "active"
        PropertyChanges { target: rectangle; color: "red" }
    },
    State {
        name: "inactive"
        PropertyChanges { target: rectangle; color: "blue" }
    }
]

    default: State {
        name: "inactive"
    }

    transitions: Transition {
        NumberAnimation { properties: "color"; duration: 500 }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在这个示例中，我们将默认状态设置为 inactive，这意味着在初始情况下，矩形会处于 inactive 状态。

# 5.4.3 when属性

  • when 属性用于定义状态何时应用的条件。只有当 when 属性的条件为真时，相关状态才会被应用。
  • 你可以在 State 中使用 when 属性来指定状态应用的条件。这使得状态切换可以根据特定条件进行。
  • 下面是一个简单的示例，展示如何使用 when 属性：
Rectangle {
    width: 100
    height: 100

    states: [
        State {
            name: "active"
            when: mouseArea.containsMouse
            PropertyChanges { target: rectangle; color: "red" }
        },
        State {
            name: "inactive"
            when: !mouseArea.containsMouse
            PropertyChanges { target: rectangle; color: "blue" }
        }
    ]

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    transitions: Transition {
        NumberAnimation { properties: "color"; duration: 500 }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这个示例中，我们根据鼠标是否在 MouseArea 区域内来切换矩形的状态。当鼠标在区域内时，矩形处于 active 状态，颜色为红色；当鼠标不在区域内时，矩形处于 inactive 状态，颜色为蓝色。

通过使用 default 状态和 when 属性，你可以更灵活地控制状态的应用和切换，使界面元素的状态变化更具有交互性和动态性。

# 5.5 动画和过渡

在 QML 中，动画和过渡是用于创建动态用户界面的强大工具。QML 提供了多种动画类型和过渡效果，可以轻松实现平滑的 UI 交互。

  1. 淡入淡出效果：使用 OpacityAnimation或 NumberAnimation控制 opacity属性
  2. 缩放效果：使用 ScaleAnimation或 NumberAnimation控制 scale属性
  3. 并行动画：使用 ParallelAnimation同时执行多个动画效果
  4. 顺序动画：使用 SequentialAnimation按顺序执行多个动画效果

# 5.5.1 基本动画

QML 提供了多种动画类型，如 PropertyAnimation、NumberAnimation、ColorAnimation 等，用于改变对象的属性值。示例：移动一个矩形

Rectangle {
    id: rect
    width: 100
    height: 100
    color: "red"

    // 淡入动画
    PropertyAnimation {
        id: fadeInAnimation
        property: "opacity"
        from: 0
        to: 1
        duration: 500
        easing.type: Easing.InOutQuad
        
        onStopped: {
            if (fadeInAnimation.target && fadeInAnimation.target.opacity === 0) {
                fadeInAnimation.target.destroy()
            }
        }
    }

    // 点击矩形开始动画
    MouseArea {
        anchors.fill: parent
        onClicked: fadeInAnimation.start()
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

说明：

  • PropertyAnimation 用于改变对象的属性（如 x、y、width 等）。
  • target 指定动画的目标对象。
  • property 指定要改变的属性。
  • to 指定属性的目标值。
  • duration 指定动画的持续时间（以毫秒为单位）。

  1. 使用硬件加速：

    layer.enabled: true
    1

  2. 避免复杂渲染： 使用不透明度动画代替模糊效果，限制同时运行的动画数量

  3. 使用帧优化：

    Item {
    // ...
    clip: true
}
    1
    2
    3
    4

  4. 合理设置持续时间：200-500ms 适合大多数界面动画，长时间动画应允许用户中断

  5. 动画结束后清理资源：

    PropertyAnimation {
    // ...
    onStopped: {
        if (target.opacity === 0) {
            target.destroy()
        }
    }
}
    1
    2
    3
    4
    5
    6
    7
    8

# 5.5.2 并行动画

使用 ParallelAnimation 可以同时运行多个动画。示例：同时改变位置和颜色

import QtQuick 2.15

Item {
    width: 400
    height: 400

    Rectangle {
        id: rect
        width: 100
        height: 100
        color: "red"

        // 并行动画
        ParallelAnimation {
            id: parallelAnimation
            PropertyAnimation {
                target: rect
                property: "x"
                to: 300
                duration: 2000
            }
            ColorAnimation {
                target: rect
                property: "color"
                to: "blue"
                duration: 2000
            }
        }

        // 点击矩形开始动画
        MouseArea {
            anchors.fill: parent
            onClicked: parallelAnimation.start()
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

说明：ParallelAnimation 允许多个动画同时运行。

# 5.5.3 顺序动画

使用 SequentialAnimation 可以按顺序运行多个动画。示例：先移动再改变颜色

import QtQuick 2.15

Item {
    width: 400
    height: 400

    Rectangle {
        id: rect
        width: 100
        height: 100
        color: "red"

        // 顺序动画
        SequentialAnimation {
            id: sequentialAnimation
            PropertyAnimation {
                target: rect
                property: "x"
                to: 300
                duration: 2000
            }
            ColorAnimation {
                target: rect
                property: "color"
                to: "blue"
                duration: 2000
            }
        }

        // 点击矩形开始动画
        MouseArea {
            anchors.fill: parent
            onClicked: sequentialAnimation.start()
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

说明：SequentialAnimation 按顺序运行多个动画。

# 5.5.4 状态和过渡

使用 State 和 Transition 可以根据状态变化实现平滑的过渡效果。示例：按钮点击切换状态

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 400

    Rectangle {
        id: rect
        width: 100
        height: 100
        color: "red"

        // 定义状态
        states: [
            State {
                name: "moved"
                PropertyChanges {
                    target: rect
                    x: 300
                    color: "blue"
                }
            }
        ]

        // 定义过渡
        transitions: [
            Transition {
                from: "*"
                to: "moved"
                PropertyAnimation {
                    properties: "x,color"
                    duration: 1000
                }
            }
        ]

        // 点击矩形切换状态
        MouseArea {
            anchors.fill: parent
            onClicked: rect.state === "moved" ? rect.state = "" : rect.state = "moved"
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

说明：

  • State 定义对象的不同状态。
  • Transition 定义状态变化时的过渡效果。

# 5.5.5 行为动画

使用 Behavior 可以为属性变化自动添加动画。示例：自动动画

import QtQuick 2.15

Item {
    width: 400
    height: 400

    Rectangle {
        id: rect
        width: 100
        height: 100
        color: "red"

        // 行为动画：自动为 x 和 y 属性添加动画
        Behavior on x {
            PropertyAnimation { duration: 1000 }
        }
        Behavior on y {
            PropertyAnimation { duration: 1000 }
        }

        // 点击矩形改变位置
        MouseArea {
            anchors.fill: parent
            onClicked: {
                rect.x = Math.random() * 300
                rect.y = Math.random() * 300
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

说明：Behavior 自动为属性变化添加动画。

# 5.5.6 路径动画

使用 PathAnimation 可以让对象沿着路径移动。示例：沿路径移动

import QtQuick 2.15

Item {
    width: 400
    height: 400

    Rectangle {
        id: rect
        width: 50
        height: 50
        color: "red"
    }

    PathAnimation {
        id: pathAnimation
        target: rect
        duration: 3000
        path: Path {
            startX: 0; startY: 0
            PathLine { x: 400; y: 400 }
            PathQuad { x: 200; y: 0; controlX: 400; controlY: 200 }
        }
    }

    // 点击开始动画
    MouseArea {
        anchors.fill: parent
        onClicked: pathAnimation.start()
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

说明：

  • PathAnimation 让对象沿着路径移动。
  • Path 定义路径的形状。

# 5.5.7 动画总结

QML 提供了丰富的动画和过渡功能，可以轻松实现动态用户界面。常用的工具包括：

  • 动画：PropertyAnimation、NumberAnimation、ColorAnimation 等。
  • 并行和顺序动画：ParallelAnimation、SequentialAnimation。
  • 状态和过渡：State、Transition。
  • 行为动画：Behavior。
  • 路径动画：PathAnimation。

# 5.6 图形效果

在 QML 中，图形效果（如阴影、模糊、渐变等）可以通过 QtGraphicalEffects 模块实现。这个模块提供了多种视觉效果，可以轻松应用到 QML 元素上。

# 5.6.1 图形模块介绍

使用 QtGraphicalEffects 模块。首先，需要导入 QtGraphicalEffects 模块：

import QtGraphicalEffects 1.15
1

# 5.6.2 阴影效果

DropShadow 可以为元素添加阴影。

import QtQuick 2.15
import QtGraphicalEffects 1.15

Item {
    width: 400
    height: 400

    Rectangle {
        id: rect
        width: 200
        height: 200
        color: "lightblue"
        anchors.centerIn: parent
    }

    DropShadow {
        anchors.fill: rect
        horizontalOffset: 5
        verticalOffset: 5
        radius: 8
        samples: 16
        color: "#80000000"
        source: rect
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

参数说明：

  • horizontalOffset 和 verticalOffset：阴影的偏移量。
  • radius：阴影的模糊半径。
  • samples：阴影的采样数（值越大，效果越平滑）。
  • color：阴影的颜色。

# 5.6.3 模糊效果

GaussianBlur 可以为元素添加模糊效果。

import QtQuick 2.15
import QtGraphicalEffects 1.15

Item {
    width: 400
    height: 400

    Image {
        id: image
        source: "https://via.placeholder.com/200"
        width: 200
        height: 200
        anchors.centerIn: parent
    }

    GaussianBlur {
        anchors.fill: image
        radius: 8
        samples: 16
        source: image
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

参数说明：

  • radius：模糊半径。
  • samples：采样数（值越大，效果越平滑）。

# 5.6.4 渐变效果

LinearGradient 和 RadialGradient 可以为元素添加渐变背景。

import QtQuick 2.15
import QtGraphicalEffects 1.15

Item {
    width: 400
    height: 400

    Rectangle {
        id: rect
        width: 200
        height: 200
        anchors.centerIn: parent
    }

    LinearGradient {
        anchors.fill: rect
        start: Qt.point(0, 0)
        end: Qt.point(200, 200)
        gradient: Gradient {
            GradientStop { position: 0.0; color: "red" }
            GradientStop { position: 1.0; color: "blue" }
        }
        source: rect
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

参数说明：

  • start 和 end：渐变的起点和终点。
  • gradient：定义渐变的颜色和位置。

# 5.6.5 颜色叠加

ColorOverlay 可以为元素添加颜色叠加效果。

import QtQuick 2.15
import QtGraphicalEffects 1.15

Item {
    width: 400
    height: 400

    Image {
        id: image
        source: "https://via.placeholder.com/200"
        width: 200
        height: 200
        anchors.centerIn: parent
    }

    ColorOverlay {
        anchors.fill: image
        source: image
        color: "#80FF0000" // 半透明红色
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

参数说明：color：叠加的颜色。

# 5.6.6 发光效果

Glow 可以为元素添加发光效果。

import QtQuick 2.15
import QtGraphicalEffects 1.15

Item {
    width: 400
    height: 400

    Rectangle {
        id: rect
        width: 200
        height: 200
        color: "lightblue"
        anchors.centerIn: parent
    }

    Glow {
        anchors.fill: rect
        radius: 8
        samples: 16
        color: "yellow"
        source: rect
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

参数说明：

  • radius：发光半径。
  • color：发光的颜色。

# 5.6.7 遮罩效果

OpacityMask 可以使用一个元素作为遮罩，控制另一个元素的透明度。

import QtQuick 2.15
import QtGraphicalEffects 1.15

Item {
    width: 400
    height: 400

    Image {
        id: image
        source: "https://via.placeholder.com/200"
        width: 200
        height: 200
        anchors.centerIn: parent
    }

    Rectangle {
        id: mask
        width: 200
        height: 200
        radius: 100
        visible: false
    }

    OpacityMask {
        anchors.fill: image
        source: image
        maskSource: mask
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

参数说明：

  • source：被遮罩的元素。
  • maskSource：遮罩元素。

# 5.6.8 组合效果

可以将多个效果组合在一起，实现更复杂的视觉效果。示例：阴影 + 模糊 + 颜色叠加

import QtQuick 2.15
import QtGraphicalEffects 1.15

Item {
    width: 400
    height: 400

    Image {
        id: image
        source: "https://via.placeholder.com/200"
        width: 200
        height: 200
        anchors.centerIn: parent
    }

    DropShadow {
        anchors.fill: image
        horizontalOffset: 5
        verticalOffset: 5
        radius: 8
        samples: 16
        color: "#80000000"
        source: image
    }

    GaussianBlur {
        anchors.fill: image
        radius: 4
        samples: 16
        source: image
    }

    ColorOverlay {
        anchors.fill: image
        source: image
        color: "#8000FF00" // 半透明绿色
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# 5.6.9 图形效果总结

QtGraphicalEffects 模块提供了丰富的图形效果，包括：

  • 阴影：DropShadow
  • 模糊：GaussianBlur
  • 渐变：LinearGradient、RadialGradient
  • 颜色叠加：ColorOverlay
  • 发光：Glow
  • 遮罩：OpacityMask

# 5.7 复杂动画效果

# 5.7.1 AnimatedImage

在 Qt Quick 中，主要通过 AnimatedImage 组件来实现 GIF 播放功能。

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    width: 400
    height: 400
    visible: true
    
    AnimatedImage {
        id: gifAnimation
        anchors.centerIn: parent
        source: "qrc:/animations/loading.gif"
        width: 200
        height: 200
        playing: true // 自动播放
        speed: 1.0 // 播放速度，1.0 为原始速度
        
        // 动画状态改变时触发
        onStatusChanged: {
            if (status === AnimatedImage.Ready) {
                console.log("GIF loaded successfully");
            } else if (status === AnimatedImage.Error) {
                console.error("GIF loading error");
            }
        }
        
        // 帧变化时触发
        onCurrentFrameChanged: {
            console.log("Current frame:", currentFrame, "/", frameCount);
        }
    }
    
    // 控制面板
    Column {
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 10
        
        Button {
            text: gifAnimation.playing ? "暂停" : "播放"
            onClicked: gifAnimation.playing = !gifAnimation.playing
        }
        
        Slider {
            width: 200
            from: 0.1
            to: 3.0
            value: gifAnimation.speed
            onValueChanged: gifAnimation.speed = value
            ToolTip.text: "播放速度: " + value.toFixed(1) + "x"
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

核心方法监听说明：

  1. onStatusChanged 监听 - 资源加载状态管理
Image.Loading: AnimatedImage开始从文件系统或网络加载GIF资源时触发
Image.Ready: GIF文件完全加载到内存，解析完成，可以开始播放
Image.Error: 文件不存在、格式错误、内存不足等情况触发
Image.Null: 初始状态或source被清空时的状态
1
2
3
4
  1. onCurrentFrameChanged 监听 - 帧级别播放控制
帧同步机制: AnimatedImage内部维护当前播放帧索引
循环检测: 通过比较currentFrame和frameCount-1检测播放完成
性能考虑: 每帧变化都会触发，需要高效的条件判断
1
2
3
  1. onPlayingChanged 监听 - 播放状态核心控制
onPlayingChanged: {
    if (playing && !isPlaying()) {
        // 告诉外部，开始播放逻辑
    } else if (!playing && isPlaying()) {
        // 告诉外部，停止播放逻辑  
    }
}
1
2
3
4
5
6
7

实际场景思考一下：第一个gif播放完成后，先停止当前，然后更新状态。再然后延迟100ms播放第二个gif资源。这里为何要延迟播放第二个gif资源。

  1. 状态同步问题：在QML中，当你快速连续改变多个属性时（如停止播放、更新状态、切换资源），这些操作可能不会立即生效。
  2. QML渲染机制：QML的渲染是异步的，直接连续调用可能导致。第一个GIF还没完全停止就开始加载第二个，资源竞争或状态混乱
  3. 资源释放时间：GIF播放器需要时间。释放当前GIF的内存资源，清理播放状态，准备加载新的GIF文件

# 5.7.2 序列帧替代

AnimatedSprite {
    id: spriteAnimation
    width: 300
    height: 300
    anchors.centerIn: parent
    source: "qrc:/animations/sequence.png"
    frameCount: 24
    frameDuration: 40 // 每帧40ms
    frameWidth: 300
    frameHeight: 300
    running: true
}
1
2
3
4
5
6
7
8
9
10
11
12

# 5.7.3 使用Lottie动画

import QtLabs.Animation 1.0 // 需安装 Qt Labs Animation

LottieAnimation {
    id: lottieAnim
    anchors.fill: parent
    source: "qrc:/animations/animation.json"
    loops: Animation.Infinite // 无限循环
    running: true
}
1
2
3
4
5
6
7
8
9
上次更新: 2026/06/10, 11:13:41
应用层开发
README

← README→

最近更新
01
信号崩溃快速排查
06-15
02
CoreDump破案
06-15
03
perf火焰图实战
06-15
更多文章>
Theme by Vdoing | Copyright © 2019-2026 杨充 | MIT License | 桂ICP备2024034950号 | 桂公网安备45142202000030