QML中的动画

最新推荐文章于 2024-10-11 18:02:22 发布
最新推荐文章于 2024-10-11 18:02:22 发布
阅读量279 收藏 4
点赞数 4
分类专栏： QML的零零碎碎 文章标签： qt c++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sc_o_r_pio/article/details/141612414
版权

通过states属性，立马切换相关属性的值

如下：

鼠标进入时，颜色变绿，宽度变宽

鼠标按下时，颜色变蓝

鼠标释放时，颜色和宽度回到最开始的样子

 代码如下：

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle
    {
        id:rect1
        width: 300
        height: 300
        color:"red"

        //指定一个初始状态
        state: "normal"

        //states属性可以定义多个状态，是一个数组
        states:[
            //State是一个元素
            State {
                name: "noraml"
                //定义该状态下的相关属性的值
                PropertyChanges {
                    //指定是哪个元素
                    target: rect1
                    color:"red"
                    width:300
                }
                //还可以继续追加PropertyChanges，里面的taget也可以是其他元素
            },
            State {
                name: "green_color"
                PropertyChanges {
                    target: rect1
                    color:"green"
                    width:400
                }
            },
            State {
                name: "blue_color"
                PropertyChanges {
                    target: rect1
                    color:"blue"
                    width:400
                }
            }
        ]


        //找机会切换状态，这里举例：鼠标相关操作时切换状态
        MouseArea{
            anchors.fill: parent
            hoverEnabled: true

            onEntered: {
                //鼠标进入时，状态切换
                rect1.state="green_color"
            }
            onPressed: {
                //鼠标按下时，状态切换
                rect1.state="blue_color"
            }
            onReleased: {
                //鼠标释放时，状态切换到最开始的状态
                rect1.state="normal"
            }
            onExited: {
                //鼠标离开时，状态切换到最开始的状态
                rect1.state="normal"
            }

        }
    }
}

 通过transitions属性来给状态切换加动画，而不是瞬间切换

颜色和宽度的切换都有1s的缓冲

 

 代码如下：

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle
    {
        id:rect1
        width: 300
        height: 300
        color:"red"

        //指定一个初始状态
        state: "normal"

        //states属性可以定义多个状态，是一个数组
        states:[
            //State是一个元素
            State {
                name: "noraml"
                //定义该状态下的相关属性的值
                PropertyChanges {
                    //指定是哪个元素
                    target: rect1
                    color:"red"
                    width:300
                }
                //还可以继续追加PropertyChanges，里面的taget也可以是其他元素
            },
            State {
                name: "green_color"
                PropertyChanges {
                    target: rect1
                    color:"green"
                    width:400
                }
            },
            State {
                name: "blue_color"
                PropertyChanges {
                    target: rect1
                    color:"blue"
                    width:400
                }
            }
        ]

        transitions: [
            Transition {
                //从normal状态到green_color状态
                from: "normal"
                to: "green_color"

                //颜色变化了，时长为1s
                ColorAnimation {
                    duration: 1000
                }
                //宽度变化了，时长为1s
                //使用NumberAnimation或者PropertyAnimation元素都行
               NumberAnimation{
                    property: "width"
                    duration: 1000
                }
            },
            Transition {
                //从green_color状态到blue_color状态
                from: "green_color"
                to: "blue_color"

                //颜色变化了，时长为1s
                ColorAnimation {
                    duration: 1000
                }
                //宽度变化了，时长为1s
               NumberAnimation{
                    property: "width"
                    duration: 1000
                }
            },
            Transition {
                //从blue_color状态到normal状态
                from: "blue_color"
                to: "normal"

                //颜色变化了，时长为1s
                ColorAnimation {
                    duration: 1000
                }
                //宽度变化了，时长为1s
               NumberAnimation{
                    property: "width"
                    duration: 1000
                }
            }

        ]


        MouseArea{
            anchors.fill: parent
            hoverEnabled: true

            onEntered: {
                //鼠标进入时，状态切换
                rect1.state="green_color"
            }
            onPressed: {
                //鼠标按下时，状态切换
                rect1.state="blue_color"
            }
            onReleased: {
                //鼠标释放时，状态切换到最开始的状态
                rect1.state="normal"
            }
            onExited: {
                //鼠标离开时，状态切换到最开始的状态
                rect1.state="normal"
            }

        }
    }
}

通过元素PropertyAnimation和NumberAnimation预先定义动画

点击矩形时颜色变化，透明度变化，宽度变化

 代码如下：

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle
    {
        id:rect1
        width: 300
        height: 300
        color:"red"
        opacity: 1

        //预先定义好动画效果
        PropertyAnimation{
            id:color_change
            //rect1的颜色变为绿色,时间1s
            target: rect1
            properties: "color"
            to:"green"
            duration:1000
        }
        NumberAnimation{
            id:opacity_change
            //rect1透明度渐变,时间1s
            target: rect1
            properties: "opacity"
            from:0.1
            to:1
            duration:1000
        }
        NumberAnimation{
            id:width_change
            //rect1宽度变宽,时间1s
            target: rect1
            properties: "width"
            to:400
            duration:1000
        }
        
        MouseArea{
            anchors.fill: parent
            onClicked: {
                //点击的时候启动预先定义好的动画
                color_change.start();
                opacity_change.start();
                width_change.start();
            }
        }
    }
}

通过PropertyAnimation/NumberAnimation/ColorAnimation on 某某属性：元素显示时立马产生动画效果 

宽度变宽，颜色变黄，变得不透明

 代码如下：

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle
    {
        id:rect1
        width: 300
        height: 300
        color:"red"
        opacity: 1

        //矩形刚显示时，颜色就逐渐变成黄色
        ColorAnimation on color{
            to: "yellow"
            duration: 1000
        }
        //宽度逐渐边长
        PropertyAnimation on width {
            from:0
            to:400
            duration: 1000
        }
        //逐渐从透明变为不透明
        NumberAnimation on opacity {
            from: 0
            to:1
            duration: 1000
        }


    }
}

还可以通过SequentialAnimation指定多个动画的执行顺序

先沿x方向移动，同时宽度变宽

然后沿着沿方向移动，同时变透明

代码如下：

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


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

        //创建多个动画，然后按照书写顺序执行
        //立马执行:on 某某属性
        SequentialAnimation on x{
            //running: true
            //先沿x方向移动
            NumberAnimation {
                target: rect;
                property: "x";
                to: 50;
                duration: 1000
            }
            //再沿y方向移动
            NumberAnimation {
                target: rect;
                property: "y";
                to: 50;
                duration: 1000
            }
        }
        //多个SequentialAnimation整体是同时执行的，但SequentialAnimation里面的是按顺序执行的
        SequentialAnimation{
            //running置为true也可以立马执行
            running: true
            id:change
            //宽度先变宽
            NumberAnimation {
                target: rect;
                property: "width";
                to: 200;
                duration: 1000
            }
            //然后变透明
            NumberAnimation {
                target: rect;
                property: "opacity";
                to: 0;
                duration: 1000
            }
        }

    }

}

 还可以通过Behavior元素来绑定属性，属性变化时加动画

 鼠标进入颜色变绿，鼠标离开颜色变红

 代码如下：

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        width: 400
        height: 400

        Rectangle {
            id: coloredRect
            width: 100
            height: 100
            anchors.centerIn: parent

            //搭配states属性
            //绑定到颜色，颜色变化时，加上变化时长
            Behavior on color {
                ColorAnimation {
                    duration: 1000
                }
            }

            MouseArea {
                id: mouser
                anchors.fill: parent
                hoverEnabled: true
            }

            states: [

                State {
                name: "GreenState"
                //鼠标进入时颜色变绿
                when: mouser.containsMouse

                PropertyChanges {
                    target: coloredRect
                    color: "green"
                }
            },
            State {
                name: "RedState"
                //鼠标离开时颜色变红
                when: !mouser.containsMouse

                PropertyChanges {
                    target: coloredRect
                    color: "red"
                }
            }]
        }
    }
}

姆路
关注
专栏目录
QML Canvas 制作动画
青春不老，奋斗不止！
07-06 875
终于要介绍动画了，这意味着我们快要把 Canvas 学完了，所以是时候庆祝一下了.....
QML-Loaders：在QML中加载动画实现
02-05
在QML中，动画不仅限于简单的平移、旋转和缩放，还可以通过QML的内置动画系统或者JavaScript进行高级定制。Loaders与动画的结合，可以创建出动态加载的组件动画，比如组件出现、消失或改变状态时的过渡效果。 1. **...
QML动画
贝勒里恩的博客
08-25 1778
给用户一个可操作的暗示；平滑衔接界面与界面的切换，让界面感觉更流畅；产生拟物效果，让软件更容易理解和使用；Qt Quick提供了比较丰富的动画类库，可以让我们的界面动起来。一般的动画都是通过操作Item的property来实现的，比如移动一个文本对象，你只需要确认起始位置和目标位置，两个位置中间的运动轨迹，PropertyAnimation或者NumberAnimation可以帮我们计算出来，他们有各种各样的算法产生不同的动画效果。.................................
QML 开机动画
小黄的博客
02-11 460
纯QML开发的开机动画
QML Animation动画详解
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
02-26 1154
alwaysRunToEnd：该属性接收布尔类型的参数。该属性保存动画是否运行到完成才停止。当loops属性被设置时，这个属性是最有用的，因为动画将正常播放结束，但不会重新启动。loops：该属性接收int类型的参数。该属性保存播放动画的次数。默认是1，如果该属性设置为时，动画将不断重复，直到显式停止（将running属性设置为false，或者调用stop()方法）。paused：该属性接布尔类型的参数。该属性标识动画是否暂停。设置paused属性可以控制动画是否暂停。
【QML】qml动画机制总结
iriczhao的博客
11-18 2342
一、引言 使用Qml进行项目开发时，往往需要控制一个显示控件的x，y，z三轴的坐标值，旋转，缩放，变化等。这些效果可以使用QML的动画类型进行实现。 本文总结qml的动画机制，重点记录qml动画机制的主要QML类型，以及一些属性使用方法。 二、qml动画机制的主要类型 如上图所示，qml动画的根为Animation，在实际项目开发中，使用比较多的还是ColorAnimation、 NumberAnimation和RotationAnimation三个属性动画。 三、Animation 【属性】 1、alw
QML旋转动画
世界需要程序员，而我就是其中一员！
04-27 382
动画被用于属性的改变。一个动画定义了属性值改变的曲线，将一个属性值变化从一个值过渡到另一个值。动画是由一连串的目标属性活动定义的，平缓的曲线算法能够引发一个定义时间内属性的持续变化。所有在QtQuick中的动画都由同一个计时器来控制，因此它们始终都保持同步，这也提高了动画的性能和显示效果。
qml 过渡 动画 转换
weixin_43527214的博客
03-12 427
转换：用于状态转换，常与state配套使用，使用from和to来筛选state。方法一：使用Behavior on x 监听x的变化从而调用动画运行。方法二：通过动画的id，使用start或running启动动画。
QML界面动画（一）
zjgo007的专栏
12-20 1378
在地图上显示半透明控制栏，用户可自行控制控制栏弹出与隐藏，控件界面设计完后使用整体的缩放，缩放的锚点位置置于控件的左上角，对缩放数值添加动画即可。 在地图上展示数据图表内容同时能显示地图内容，开始将图表框采用弹出置于地图之上，但是这样部分地图会被遮挡，因此改进为将地图平推的方式，即缩小地图组件的width的同时增加图表组件的width。实现方法是控件设置两个state，state切换时添加切换动画即可，这里不要对地图组件和图表组件分别添加动画，不然会先推地图后拉出
QML应用动画（Applying Animations）
世界需要程序员，而我就是其中一员！
05-01 880
动画可以通过以下几种方式来应用： 属性动画 - 在元素完整加载后自动运行； 属性动作 - 当属性值改变时自动运行； 独立运行动画 - 使用start()函数明确指定运行或者running属性被设置为true（比如通过属性绑定） 后面我们会谈论如何在状态变换时播放动画。
Qt Qml圆形进度条动画
01-19
本篇将深入探讨如何在QML中实现圆形进度条动画。 首先，让我们了解QML中的基本元素。`Rectangle`是最基础的图形元素，可以用来绘制各种形状，包括圆形。`Path`和`PathView`允许我们定义和控制路径上的动画。`...
QT QML 零基础动画教程
06-20
针对QML可视化组件的详细动画教程，零基础学习，系统性的介绍QML动画中，所涉及的状态、转换、及动画的相关概念，同时详细的说明了动画运作的三种方式，1、直接使用动画，2、通过转换使用动画，3、通过行为使用动画...
QML简易动画
08-30
在本文中，我们将深入探讨QML（Quantum Markup Language）中的动画机制，通过"矩形变正方形、正方形变矩形"的示例来理解其工作原理，并学习如何实现"动画操作、随机颜色和动画控制循环执行"。QML是Qt框架中用于构建...
QT调用最新的libusb库
卤煮小鱼的博客
10-06 627
下载最新的库的下载网站：https://libusb.info/下载：解压后目录如下：根据自己的编译器选择库：①将头文件中添加libusb.h②源文件中添加libusb-1.0.lib③添加库文件：添加库后直接编译，不报错即为成功：参考例程中的调用方法：
Ubuntu QT 交叉编译环境搭建
某风吾起的博客
10-09 649
下载安装qtCreator 去QT下载官网下载对应需要的QT软件。 这里下载5.12.96版本的 改变安装包权限，然后，sudo运行安装包。 安装在opt目录下 安装完成。到安装路径QtCreator的bin目录中 找到应用的开启程序： 后台运行QtCreator: /opt/Qt5.12.9/Tools/QtCreator/bin/qtcreator.sh & not a valid identifier 的错误 今天上午搭建交叉编译环境，安装arm-linux-gcc时，source
Qt-窗口对话框QColorDialog的使用(52)
weixin_67595436的博客
10-11 339
Qt-窗口对话框QColorDialog的使用
Qt 自绘开关按钮以及设计器中的提升为用法
最新发布
Ray
10-11 225
在Qt设计器中，它允许用户将一个标准Qt Widget转换为自定义的QWidget子类。这样，用户可以在设计器中使用自己的控件，同时还能在代码中添加额外的功能或属性。知识理应共享，源码在此提升为用起来还是很方便的，可以大大减少代码量以及提高阅读效率。
Qt中的网络客户端
WSTONECH的博客
10-07 1325
Qt中客户端接口，QNetworkAccessManager系列类的使用。
QT事件与网络通信
yangh1231的博客
10-11 86
【代码】QT事件与网络通信。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值