Qt Quick 动画入门篇

最新推荐文章于 2024-05-16 04:55:10 发布
最新推荐文章于 2024-05-16 04:55:10 发布
阅读量670 收藏 11
点赞数
分类专栏： QT开发 文章标签： qt nginx C/C++ qt教程 qt开发 qt编程 Qt Quick
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73443478/article/details/131642129
版权

简介

在使用 QML 进行界面开发时，我们的目标是创建一套流体界面，所谓流体界面指的是UI组件是动态变化的。举个例子，当界面上的组件需要变化时，如果视觉画布突然变化会导致用户的体验感比较差。而如果在状态的变化过程中，我们添加一些引导，把状态从初始慢慢变化到目标状态，让用户可以感受到这个变化的过程，那么用户的感官体验这一块就会大大提升了，而这也就是所谓的动态变化

这里需要引出几个重要的概念：State（状态）、Transition（过度）、Animation（动画）

State（状态）：所有项目都有一个默认状态，用于定义对象和特性值的默认配置。可以通过向 states 属性添加状态项来定义新状态，以允许项在不同配置之间切换

Transition（过度）：发生状态更改时要应用的动画

Animation（动画）：随着时间的推移逐渐改变属性

具体请参考官方文档：Important Concepts in Qt Quick - States, Transitions and Animations

本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，C++设计模式，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QSS，OpenCV，Quick模块，面试题等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

缓和曲线

通常动画中的变化是匀速的，如果开发者觉得太单调了，可以调节动画的变化速度曲线，即缓和曲线。我们通过动画的 easing 属性组来改变缓和曲线

type - 缓和曲线类型

amplitude - 幅度

period - 周期

overshoot - 过冲

bezierCurve - 贝塞尔

 

缓和曲线的类型如下所示：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

动画类型

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 类型值的更改设置动画

本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，C++设计模式，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QSS，OpenCV，Quick模块，面试题等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

 

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()
    }
}

行为动画

  • Behavior - 为特性更改指定默认动画

 

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

本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，C++设计模式，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QSS，OpenCV，Quick模块，面试题等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

十年编程老舅
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt(C++) | QPropertyAnimation动画(移动、缩放、透明)篇
m0_45463480的博客
03-10 793
Qt(C++) | QPropertyAnimation动画(移动、缩放、透明)篇
Qt动画开发：阴影动画，头像闪烁，窗口淡化，控件移动，曲线动画，旋转动画，连击Combo动画等
qq_36651243的博客
03-25 3471
Qt动画综合
qt-各种惊艳动画实例
u013083044的博客
02-18 360
【代码】qt-各种惊艳动画实例。
【QT教程】QT6动画与效果
QT界面开发界面美化
05-16 801
QT6动画与效果简介QT6动画与效果简介QT6是Qt Company发布的最新版本的Qt框架，它支持跨平台的应用程序开发。QT6带来了许多新特性和改进，其中动画与效果是Qt框架中非常吸引人的一部分，可以帮助开发者创建生动、有趣的用户界面。动画与效果的概念在软件开发中，动画与效果是指通过一系列连续的图像或状态变化来创建动态视觉效果的技术。在用户界面设计中，动画与效果可以用来增强用户体验，使界面更加生动、有趣和易于使用。QT6中的动画与效果。
Qt 实现窗口大小变化时动画过渡
myzstudio
06-14 1358
Qt 实现自定义动画属性窗口大小 过渡动画
QT—动画框架
Half-up的博客
07-24 1278
QT-动画 概念、数值类型 实现属性动画 使用缓和曲线（(关键帧动画) 动画组 图形视图框架中使用动画
《QML和Qt Quick快速入门》示例源码
09-16
《QML和Qt Quick快速入门》示例源码是一份专为初学者设计的资源，旨在帮助理解并掌握QML和Qt Quick这两种强大的GUI开发工具。QML（Qt Meta Language）是Qt框架的一部分，用于创建现代、动态且响应迅速的用户界面。Qt...
《QML和Qt Quick快速入门》源码.zip
最新发布
05-30
然后可以直接双击.pro文件在Qt Creator中打开项目；也可以使用Qt Creator的“文件→打开文件或项目”菜单项打开源码中的.pro项目文件；还可以直接将源码目录中的.pro文件拖入Qt Creator界面来打开，打开后在项目模式...
QT Quick动画演示
11-12
在"QT Quick动画演示"中，我们主要探讨的是如何在QT Quick中实现丰富的动画效果，包括按钮点击响应、元素动态移动、图像的显示与隐藏以及GIF动画的播放控制。 首先，QT Quick动画的基础是QML（Qt Meta Object ...
基于QtQuick的入门例子，方便大家入门学习
01-02
【QtQuick入门详解】 QtQuick是Qt框架的一部分，它提供了一种高效且声明式的用户界面设计方式，使得开发者可以快速创建美观、响应迅速的应用程序。本教程将通过一个简单的入门例子，帮助初学者理解QtQuick的基本...
Qt + OpenGL + Animation + Rect + 移动的矩形
10-03
这个是用Qt中QGLWidget实现的OpenGL移动的矩形。
Qt多界面动画切换实现
06-02
Qt多界面切换实现，基于Qt5.9.1 LTS实现，界面是六方格形式
Qt动画效果实现
12-05
Qt的Widget属性动画，位移、缩放、不透明度动画等，可以通过组合实现复杂效果
qt quick编程入门源代码-霍亚飞
03-08
本资料是《qt quick编程入门》的随书源代码。 包含QML 语言的语法和编写Qt Quick程序需要用到的基本知识点。包括QML语法、Qt Quick基础知识以及在图形动画、3D、数据处理、多媒体和移动开发方面的应用等。
详解QPropertyAnimation的使用--实现Qt动画效果
简介
04-28 788
在Qt框架中，是实现界面动画效果的强大工具，它允许开发者对对象的属性进行动画化处理，从而提升用户体验。本文将深入探讨的基本使用方法、高阶技巧及注意事项，并通过C++代码示例加以说明。
在Qt中制作动画-2
shuishou1000的博客
09-23 938
在这个例子中，我们将使用缓动曲线制作动画。基础的代码文件看 初级动画1. 1，在start()函数前定义缓动曲线，并添加到属性动画中。 QPropertyAnimation *animation=new QPropertyAnimation(ui->pushButton,"geometry"); animation->setDuration(10000); animation->setStartValue(ui->pushButton->geometry())...
Qt Quick教程(4)--Qt Quick简介
qq_34462436的博客
10-01 1782
Qt Quick简介导语目录一、Qt Quick和QML简介二、创建一个Qt Quick应用三、QML文件内容介绍四、其他文件内容介绍小结 导语 在上一篇我们已经安装好了Qt 5.5，现在正式开始学习Qt5中全新的Qt Quick编程。Qt Quick对于大部分人来说是一个全新的概念，对这样一个全新的东西要怎样开始学习呢？在没有专业书籍（当然，《Qt 5编程入门》现在已经出版了，在这篇文章中我们假...
QT状态机框架
colorant的专栏
03-10 9329
状态机(The State Machine Framework) 作者：刘旭晖 Raymond 转载请注明出处Email：colorant@163.comBLOG：http://blog.csdn.net/colorant/ QT的State Machine Framework是在Qt4.6中引入的，其理论基础是Harel的Statechart，通过定义一系列的可能状态，以及系统如何在
【Qt Quick】NumberAnimation动画
weixin_44697562的博客
03-09 257
简介 NumberAnimation是PropertyAnimation的派生类，类似数字类型的（例如：x、y等）属性都可以使用这个方法 例子 Text { id: text_warning text: qsTr("") opacity: 0 font{ bold: true pixelSize: 14 } color: "red" x:(parent.width - width)/2 MouseArea{
QtQuick中文入门与元素详解
QtQuick中文手册是一份详细介绍Qt公司提供的用于快速构建用户界面的框架的文档。QtQuick是一种基于QtDeclarative模块的声明式编程语言，它扩展了JavaScript的功能，并通过QML元素实现了动态且丰富的用户界面设计。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值