qml之动态元素类型

news2024/11/18 15:30:59

文章目录

  • 动画
    • 例子
  • 应用动画
    • 例子
  • 缓动曲线
    • 例子
  • 动画分组
    • 例子
  • 嵌套动画
    • 代码
  • 状态和转换
    • 代码

动画

  • QMlL使用插值的方式控制属性的更改。
  • 动画是在指定的时间内一些列属性的持续变化。
    常用的动画类型元素动画：
  • PropertyAnimation:属性值改变播放动画
  • NumberAnimation:qreal_type值改变播放动画
  • ColorAnimation:颜色值改变播放动画
  • RotationAnimation:旋转值改变播放的动画
    Qt Quick还提供了一些特殊场景下需要使用的动画类型：
    PauseAnimation，SequentialAnimation，ParallelAnimation，AnchorAnimation，ParentAnimation，SmoothedAnimation ，SpringAnimation，PathAnimation，Vector3dAnimation
    对于更加复杂的动画，可能需要在播放动画时改变属性或者运行脚本。为此，QtQuick提供了action元素:
  • PropertyAction:在播放动画时改变属性
  • ScripAction:在播放动画时运行脚本

例子

import QtQuick
import QtQuick.Window

Image {
    id: root
    source: "../../images/background.png"

    property int padding: 40
    property bool running: false

    Image {
        id: qq
        source: "../../images/qq.png"
        x:root.padding;y:(root.height-height)/2

        NumberAnimation on x{
            to:root.width-qq.width-root.padding
            duration: 3000
            running: root.running
        }

        RotationAnimator on rotation{
            to:360
            duration: 3000
            running: root.running
        }

        OpacityAnimator on opacity{
            to:0
            duration: 3000
            running: root.running
        }
    }

    MouseArea{
        anchors.fill: root
        onClicked: root.running = true
    }
}

在这里插入图片描述

  • 应用于x和rotation、透明度属性的简单动画。
  • 每个动画的持续时间为3000毫秒。
  • x：将对象逐渐移动到右边的位置。
  • rotation：从当前角度运行到360度。
  • 透明度:从1到0
  • 三个动画并行运行，并在单击鼠标区域时启动。

应用动画

可以通过多种方式执行动画：

  • 属性上的动画：在元素完全加载后自动运行
  • 属性上的行为：属性值更改时自动运行
  • 独立动画：使用start()显式启动动画或将running设置为true时运行

例子

import QtQuick
import QtQuick.Window

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

    ClickableImageV2{
        id:qq1
        x:40;y:root.height-height
        source:"../../images/qq.png"
        text:"animation on property"

        NumberAnimation on y{
            to:40;duration:3000
        }
    }

    ClickableImageV2{
        id:qq2
        x:40+qq1.width+20;y:root.height-height
        source:"../../images/qq.png"
        text:"animation on property"

        Behavior on y{
            NumberAnimation{duration:3000}
        }

        onClicked: y=40
    }

    ClickableImageV2{
        id:qq3
        x:40+qq1.width+qq2.x;y:root.height-height
        source:"../../images/qq.png"
        text:"animation on property"

        NumberAnimation{
            id:anim
            target:qq3
            from:root.height-qq3.height
            to:40;duration:3000
            property:"y"
            running:area.pressed
        }

        MouseArea{
            id:area
            anchors.fill: parent
        }
    }
}

 第一个对象使用on＜property＞策略进行移动。动画立即开始。
 第二个对象使用Behavior on动画。此行为告诉属性它应该为值的每个更改设置动画。可以通过在行为元素上设置enabled:false来禁用该行为。
 第三个对象使用standalone动画。动画被定义为其自己的元素，几乎可以位于文档中的任何位置。

缓动曲线

在这里插入图片描述
属性的值更改可以由动画控制。缓动属性允许影响属性更改的插值曲线。
y轴：property
x轴：duration

例子

import QtQuick
import QtQuick.Window
import QtQuick.Layouts

Rectangle{
    id:root
    width: childrenRect.width
    height: childrenRect.height

    color:'gray'
    gradient: Gradient{
        GradientStop{position:0.0;color:root.color}
        GradientStop{position:1.0;color:Qt.lighter(root.color,1.5)}
    }

    ColumnLayout{
        spacing: 20
        Grid{
            spacing: 10
            columns:5

            EasingType{
                title:'Linear'
                easingType: Easing.Linear
                onClicked: {
                    animation.easing.type=easingType
                    box.toggle=!box.toggle
                }
            }
            EasingType{
                title:'InExpo'
                easingType: Easing.InExpo
                onClicked: {
                    animation.easing.type=easingType
                    box.toggle=!box.toggle
                }
            }
            EasingType{
                title:'OutExpo'
                easingType: Easing.OutExpo
                onClicked: {
                    animation.easing.type=easingType
                    box.toggle=!box.toggle
                }
            }
            EasingType{
                title:'InOutExpo'
                easingType: Easing.InOutExpo
                onClicked: {
                    animation.easing.type=easingType
                    box.toggle=!box.toggle
                }
            }
            EasingType{
                title:'InOutCubic'
                easingType: Easing.InOutCubic
                onClicked: {
                    animation.easing.type=easingType
                    box.toggle=!box.toggle
                }
            }
            EasingType{
                title:'SineCurve'
                easingType: Easing.SineCurve
                onClicked: {
                    animation.easing.type=easingType
                    box.toggle=!box.toggle
                }
            }
            EasingType{
                title:'InOutCirc'
                easingType: Easing.InOutCirc
                onClicked: {
                    animation.easing.type=easingType
                    box.toggle=!box.toggle
                }
            }
            EasingType{
                title:'InOutElastic'
                easingType: Easing.InOutElastic
                onClicked: {
                    animation.easing.type=easingType
                    box.toggle=!box.toggle
                }
            }
            EasingType{
                title:'InOutBack'
                easingType: Easing.InOutBack
                onClicked: {
                    animation.easing.type=easingType
                    box.toggle=!box.toggle
                }
            }
            EasingType{
                title:'InOutBounce'
                easingType: Easing.InOutBounce
                onClicked: {
                    animation.easing.type=easingType
                    box.toggle=!box.toggle
                }
            }
        }

        Rectangle{
            height:100
            Layout.fillWidth: true
            gradient: Gradient{
                GradientStop{position:0.0;color:'gray'}
                GradientStop{position:1.0;color:'green'}
            }
            Rectangle{
                id:box
                property  bool toggle
                anchors.verticalCenter: parent.verticalCenter
                width: 80;height:80
                gradient: Gradient{
                    GradientStop{position:0.0;color:'red'}
                    GradientStop{position:1.0;color:'yellow'}
                }

                x:toggle?20:root.width-width-20
                Behavior on x{
                    NumberAnimation{
                        id:animation
                        duration:1000
                    }
                }
            }
        }
    }

}

在这里插入图片描述
点击不同的曲线会有不同的动画效果。

动画分组

 分组有两种方式：并行或顺序。
可以使用SequentialAnimation或ParallelAnimation元素，它们充当其他动画元素的动画容器。这些分组动画本身就是动画。
在这里插入图片描述

例子

import QtQuick
import QtQuick.Window

Window {
    id:root
    width: 640
    height: 480
    visible: true
    title: qsTr("UFO")
    property int duration: 3000

    Image {
        source: "../../images/background.png"
        anchors.fill: parent
    }

    ClickableImageV3{
        id:ufo
        x:20;y:root.height-height
        source: "../../images/ufo.png"
        text:'UFO'
        onClicked: anim.restart()
    }

    ParallelAnimation/*SequentialAnimation*/{
        id:anim

        NumberAnimation{
            target: ufo
            property: 'y'
            from:root.height-ufo.height
            to:20
            duration: root.duration
        }

        NumberAnimation{
            target: ufo
            property: 'x'
            from:20
            to:500
            duration: root.duration
        }
    }
}

在这里插入图片描述

嵌套动画

 分组动画也可以嵌套。例如，一个连续动画可以有两个并行动画作为子动画。我们可以通过一个足球示例：

  • 从左到右的x平移（X1）
  • 从下到上的y平移（Y1），然后是从上到下的平移（Y2），带有一些弹跳
  • 在动画的整个持续时间内旋转360度（ROT1）
    在这里插入图片描述
     即我们可以将y的改变分成一次顺序动画，角度和x的变化与这次顺序动画为一个并行动画即可实现效果。

代码

import QtQuick
import QtQuick.Window

Item {
    id:root
    width: 480
    height: 300
    property int duration: 3000

    Rectangle{
        id:sky
        width: root.width
        height: 200
        gradient: Gradient{
            GradientStop{position:0.0;color:"#0080FF"}
            GradientStop{position:1.0;color:"#66CCFF"}
        }
    }

    Rectangle{
        id:ground
        anchors.top: sky.bottom
        anchors.bottom:root.bottom
        width: root.width
        gradient: Gradient{
            GradientStop{position:0.0;color:"#00FF00"}
            GradientStop{position:1.0;color:"#00803F"}
        }
    }

    Image {
        id: ball
        source: "../../images/soccer_ball.png"
        scale:0.5
        x:0;y:root.height-height

        MouseArea{
            anchors.fill: parent
            onClicked: {
                ball.x=0
                ball.y=root.height-ball.height
                ball.rotation=0
                anim.restart()
            }
        }
    }

    ParallelAnimation{
        id:anim

        SequentialAnimation{
            NumberAnimation{
                properties: "y"
                target: ball
                to:20
                duration: root.duration*0.4
                easing.type:Easing.OutCirc
            }

            NumberAnimation{
                properties: "y"
                target: ball
                to:root.height-ball.height
                duration: root.duration*0.6
                easing.type:Easing.OutBounce
            }
        }

        NumberAnimation{
            properties: "x"
            target: ball
            to:380
            duration: root.duration
        }

        RotationAnimation{
            properties: "rotation"
            target: ball
            to:720
            duration: root.duration
        }
    }
}

状态和转换

  • 状态定义了一组属性的更改，可以由特定条件触发。
  • 状态开关可以附加一个转换，该转换定义了这些更改对应的动画，或执行附加的行为。
  • 进入状态时也可以执行行为。
    例如，两个信号灯。stop用红色，go用绿色。两个灯光不应同时发光。
state: "stop" 

states: [ 
	State { 
		name: "stop" 
		PropertyChanges { target: light1; color: root.red }
		PropertyChanges { target: light2; color: root.black } 
	}, 
	State { 
		name: "go" 
		PropertyChanges { target: light1; color: root.black } 
		PropertyChanges { target: light2; color: root.green } 
	} 
] 

MouseArea { 
	anchors.fill: parent 
	onClicked: parent.state = (parent.state == "stop" ? "go" : "stop") 
}

在这里插入图片描述
 现在能够成功地改变信号灯的状态。为了使UI更具吸引力，应该添加一些带有动画效果的过渡。状态改变可以触发转换。

transitions: [ 
	Transition { 
		from: "stop"; to: "go" 
		// from: "*"; to: "*" 
		ColorAnimation { target: light1; properties: "color"; duration: 2000 } 
		ColorAnimation { target: light2; properties: "color"; duration: 2000 } 
	} 
]

rom: “"; to: "” 表示“从任何状态到任何其他状态”，是默认值。

代码

import QtQuick
import QtQuick.Window

Item {
    id: root
    width: 150;height:260
    property color black: 'black'
    property color red: 'red'
    property color green: 'green'

    Rectangle{
        anchors.fill: parent
        color:"#333333"
    }

    state: "stop"

    states: [
        State {
            name: "stop"
            PropertyChanges {target: light1;color:root.red;}
            PropertyChanges {target: light2;color:root.black;}
        },

        State {
            name: "go"
            PropertyChanges {target: light1;color:root.black;}
            PropertyChanges {target: light2;color:root.green;}
        }
    ]

    transitions: [
        Transition {
            from: "*";to: "*"
            ColorAnimation {
                target:light1;duration: 1000;properties: 'color'
            }
            ColorAnimation {
                target:light2;duration: 1000;properties: 'color'
            }
        }
    ]

    Rectangle{
        id:light1
        x:25;y:15
        width:100;height: width
        radius: width/2
        color:root.black
        border.color: Qt.lighter(color,1.1)
    }

    Rectangle{
        id:light2
        x:25;y:135
        width:100;height: width
        radius: width/2
        color:root.black
        border.color: Qt.lighter(color,1.1)
    }

    MouseArea{
        anchors.fill: root
        onClicked: {
            parent.state = ((parent.state == "stop")?"go":"stop")
        }
    }
}

完整代码链接

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1120912.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【快速解决】在vs2022中配置SFML图形库

【快速解决】在vs2022中配置SFML图形库

目录 SFML 图形库的安装步骤如下： 1.下载 SFML 在 SFML 的官网（下载对应操作系统版本的 SFML）。​编辑 2.解压文件 将下载的压缩包解压至任意位置，得到类似如下的目录结构： 3.配置 VS 打开 Visual Studio&#xff…
阅读更多...
Linux ————使用常用的Linux命令

Linux ————使用常用的Linux命令

（一）Linux命令的特点 在Linux系统的早期版本中，由于不支持图形用户界面，命令行成为了主要的操作手段。对于那些在文本模式和终端模式下需要查看系统状态和监控系统操作的用户，熟悉常用的Linux命令是至关重要的。以下是…
阅读更多...
自然语言处理---Transformer机制详解之Self attention机制详解

自然语言处理---Transformer机制详解之Self attention机制详解

1 Self-attention的特点 self-attention是一种通过自身和自身进行关联的attention机制, 从而得到更好的representation来表达自身. self-attention是attention机制的一种特殊情况，在self-attention中, QKV, 序列中的每个单词(token)都和该序列中的其他所有单词(to…
阅读更多...
RDB.js：适用于 Node.js 和 Typescript 的终极对象关系映射器

RDB.js：适用于 Node.js 和 Typescript 的终极对象关系映射器

RDB.js 是适用于 Node.js 和 Typescript 的终极对象关系映射器，可与 Postgres、MS SQL、MySQL、Sybase SAP 和 SQLite 等流行数据库无缝集成。无论您是使用 TypeScript 还是 JavaScript（包括 CommonJS 和 ECMAScript）构建应用程序&#xff0c…
阅读更多...
高效MMdetection(3.1.0)环境安装和训练自己数据集教程(实现于Linux(ubuntu)，可在windows尝试)

高效MMdetection(3.1.0)环境安装和训练自己数据集教程(实现于Linux(ubuntu)，可在windows尝试)

很久没用mmdetection了，作为目标检测常见的几个深度学习框架，mmdetection用的人还是很多的，其中比较吸引人的一点就是mmdetection集成了非常多的算法，对于想做实验对比和算法学习的人来说，基于这个框架可以事半功倍。因…
阅读更多...
“暂停加息，股市低迷：242只股票创新低，比特币突破2.8万美元后看涨趋势不可挡！“

“暂停加息，股市低迷：242只股票创新低，比特币突破2.8万美元后看涨趋势不可挡！“

11 月1日 FOMC 会议 美联储主席杰罗姆鲍威尔周五在纽约发表讲话，毫不意外地，他采取了更加鸽派的立场，因为在不确定的世界中，美国政府的过度杠杆化和可能即将到来的经济衰退已成为共识。 根据鲍威尔对未来加息的最低限度讨论&…
阅读更多...
Datawhale学习笔记AI +新能源：电动汽车充电站充电量预测2

Datawhale学习笔记AI +新能源：电动汽车充电站充电量预测2

在飞浆平台上成功运行出pandas-profiling啦~ 首先一键安装 pip install ydata_profiling然后演示，可以生成一个网页对数据有一个比较好的理解 import numpy as np import pandas as pd from ydata_profiling import ProfileReporttrain_power pd.read_csv(/home/…
阅读更多...
【神印王座】半神级别的伊莱克斯，有着什么故事，他又为何会陨落？

【神印王座】半神级别的伊莱克斯，有着什么故事，他又为何会陨落？

【侵权联系删除】【文/郑尔巴金】 你知道手握日月摘星辰，世间无我这般人，如果我想我早已成神，这背后到底藏着一个什么样的故事吗？伊莱克斯一个配角，为何能让人如此痴迷？在最近的国漫场里，有两部…
阅读更多...
Windows Server 2019 搭建FTP站点

Windows Server 2019 搭建FTP站点

目录 1.添加IIS及FTP服务角色 2.创建FTP账户（用户名和密码）和组 3.设置共享文件夹的权限 4.添加及设置FTP站点 5.配置FTP防火墙支持 6.配置安全组策略 7.客户端测试 踩过的坑说明： 1.添加IIS及FTP服务角色 a.选择【开始】→【服务器…
阅读更多...
【刷题篇】反转链表

【刷题篇】反转链表

文章目录 一、206.反转链表二、92.反转链表 ||三、25. K 个一组翻转链表 一、206.反转链表 class Solution { public://使用头插//三个指针也可以ListNode* reverseList(ListNode* head) {if(headnullptr)return nullptr;ListNode* curhead;ListNode* newheadnew ListNode(0);L…
阅读更多...
推荐一款简单好用的Bug管理软件

推荐一款简单好用的Bug管理软件

软件开发的速度和质量是企业成功的关键因素，然而随着软件项目的复杂性增加，Bug的管理变得越来越困难。为了解决这个问题，Zoho公司推出了一款强大的Bug管理软件，帮助企业在一个地方记录和跟踪Bug，提高修复效率。 这款名…
阅读更多...
spring tx:advice事务配置—— tx:advice中不允许出现属性 ‘transaction-manager‘

spring tx:advice事务配置—— tx:advice中不允许出现属性 ‘transaction-manager‘

今天在配置java事务管理时出现了一些问题。 提示：只有这几个属性 经过查询资料发现是bean的配置少了一些。 可以在xml文件顶部添加： xmlns:tx"http://www.springframework.org/schema/tx" 下面也提供一份bean文件配置的模板： &a…
阅读更多...
MongoDB URL链接 如何设置账号密码

MongoDB URL链接 如何设置账号密码

个人博客，求关注。。 MongoDB URL链接 如何设置账号密码 假设你的账号是root，你的密码也是root，则 mongodb://username:passwordlocalhost:27017完美，再见。
阅读更多...
《红蓝攻防对抗实战》二.内网探测协议出网之TCP/UDP协议探测出网

《红蓝攻防对抗实战》二.内网探测协议出网之TCP/UDP协议探测出网

目录 一.TCP/UDP协议探测出网 1.NC工具探测TCP协议出网 2.Telnet命令探测TCP协议出网 3.UDP协议探测出网 当红队人员在进行内网渗透时，经常会遇到目标主机不出网的场景，而主机不出网的原因有很多，常见的原因例如目标主机未设置网关&#…
阅读更多...
Linux环境部署应用必知必会

Linux环境部署应用必知必会

修改环境变量 Linux环境变量配置的6种方法，建议收藏！ - 知乎 修改java环境变量 软件安装 安装redis redis是一个非关系型数据库，是一个存储键值对的数据库，通常被称为数据结构服务器。 值（value）可以是…
阅读更多...
00TD时尚女童睡衣，蕾丝边＋蝴蝶结太好看了

00TD时尚女童睡衣，蕾丝边＋蝴蝶结太好看了

甜美又可爱的蕾丝花边加蝴蝶结 真的一下子戳中了我的心巴， 满满的少女风真的很好看， 妥妥的可爱小公主一枚 柔软又亲肤，厚厚的很保暖 睡觉真的很舒服 还有袖口和裤脚都做了松紧设计哟！
阅读更多...
【iOS】UITableView总结（Cell的复用原理、自定义Cell、UITableViewCell协议方法）

【iOS】UITableView总结（Cell的复用原理、自定义Cell、UITableViewCell协议方法）

UITableView 列表的特点： 数据量大样式较为统一通常需要分组垂直滚动通常可视区只有一个 -> 视图的复用 UITableViewDataSource UITableView作为视图，只负责展示，协助管理，不管理数据 需要开发者为UITableView提供展示所需…
阅读更多...
“一键合并剪辑，轻松添加片头——全新的视频编辑工具让你成为视频制作达人“

“一键合并剪辑，轻松添加片头——全新的视频编辑工具让你成为视频制作达人“

在日常生活中，我们时常会遇到需要制作视频的情况。但面对繁琐的视频剪辑和合并，你是否感到无从下手？今天，我们为你带来一款全新的视频编辑工具，让你轻松成为视频制作达人！ 首先我们要进入好简单批量智剪主页…
阅读更多...
【扩散模型】【文本到音频论文系列翻译二】使用指令微调LLM和潜在扩散模型的文本到音频生成

【扩散模型】【文本到音频论文系列翻译二】使用指令微调LLM和潜在扩散模型的文本到音频生成

🔥 🔥🔥 github: https://github.com/declare-lab/tango 效果：https://tango-web.github.io/ 论文地址：https://arxiv.org/pdf/2304.13731.pdf 数据集audiocaps下载： https://blog.csdn.net/weixin_4350969…
阅读更多...
进程（1）——什么是进程？【linux】

进程（1）——什么是进程？【linux】

进程（1）——什么是进程？【linux】 一. 什么是进程？二. 管理进程：2.1 怎么管理：2.2 PCB2.3.1 task_struct2.3.2 组织task_struct： 三.查看进程3.1 ps ajx3.2 ls /proc 四. 父子进程4.1 什么是父子…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023