4. QtDesignStudio使用TimeLine添加动画
创始人
2025-05-28 09:52:31

1. 说明:

在QML中可以使用各种动画组件为元素的属性变化设计不同的动画展现形式,以丰富界面交互效果。在使用 Qt Design Studio 进行界面设计时,可以在TimeLine窗口添加时间线,在时间线上为不同控件的不同属性添加动画。

2. 具体操作:

首先,在菜单栏的view->Views中将TimeLine窗口调出来,点击窗口的左上角即可添加一条时间线,如下图所示:
在这里插入图片描述
注意:时间线和当前页面状态是对应的,一个状态对应一个时间线,如果有多个状态,则在其他状态中应该单独添加时间线。
弹出TimeLine设计窗口后,会看到上中下三部分选项卡,上面部分是TimeLine Settings,就是用来设置时间线的,包括名称TimeLine ID,起始帧Start frame,结束帧End frame,结束帧和起始帧之间的差值决定了时间线的动画时长,中间部分是timelineAnimation,为时间线添加一个动画控制器,利用该动画控制时间线 currentFrame 属性值,属性包含名称Animation ID,是否启动立即运行Running in base state,起始帧Start frame,结束帧End frame,一般和TimeLine Setting中的起始帧和结束帧保持一致,时间周期Duration,是否连续Continuous,执行次数Loops,是否启动回弹效果Ping Pong,结束后停留的状态Finished。最下面的窗口是绑定窗口,如果有多个状态,多条时间线和动画控制器,可在此窗口进行组合绑定,如下图所示:
在这里插入图片描述
如果上图中不使用timelineAnimation,可以点击右上角的 - 号将其删掉,此时在TimeLine Setting选项卡的Expression Binding选项将变为可编辑状态,可以在编辑框中设置时间线 currentFrame 属性的绑定,如下图所示:
在这里插入图片描述
使用上述任意一种方式设置完成后,点击右下角的 close按钮,即可成功添加时间线。Timeline视图窗口此时会更新为可添加关键帧的状态,界面上的相关功能如下图所示:
在这里插入图片描述
在开始对控件的属性设置动画时,先将时间线拖动到第 0 帧处,然后该点亮上图中的动作捕捉按钮,点亮状态下,将鼠标移至需要添加动画的属性处,点击其左侧的设置按钮,选择Insert Keyframe选项,如下图所示:
在这里插入图片描述
此时将会在第 0 帧为属性opacity添加一个关键帧,关键帧的值就是当前状态的值,假设动画时长设置为1秒钟,则将时间线设置为1000帧处,在已经出现在时间线窗口中的属性上右键鼠标,选择Insert New Keyframe,即可在1000帧处创建一个新的关键帧。
在这里插入图片描述
双击1000帧处的关键帧图标,更改当前关键帧的数值,如下图所示:
在这里插入图片描述
最后关闭动作捕捉按钮,即可完成对透明度属性的动画设置。
实际效果(slider控制背景色的透明度)

TimeLine使用

持续更新中,请大家多多关注…

相关内容

热门资讯

【Java闭关修炼】Sprin... # 配置Mysql与注册登录模块应用服务模型IDEA 连接数据库点击IDEA右侧的database ...
Oracle 常见报错问题汇总 Oracle 常见报错问题汇总 报错:ORA-01017: invalid username/pas...
计算不规则区域的周长和面积——... 1.题目描述 设计求不规则区域周长和面积计算的算法。 测试数据的获得: 输入样例&#x...
STM32之IIC IIC协议IIC全称Inter-Integrated Circuit (集成电路总线),...
Vue3 使用MD5加密(清晰... 概述 最近在想做个cloud项目,gitee上找了个模板项目,前端使用到vue3 &#...
使用Idea编译Nacos源码... 其实nacos下载下来启动就可以了,但是为了方便一些,而且Nacos在GitHub上下载是真的慢,可...
【abp Vnext】下载并运... 软件环境:电脑需要基础软件环境node.js、npm,这些网上教程很多&...
一文了解|氢燃料电池行业痛点问... 早在1839年的英国,一位名叫威廉格罗夫的科学家,就已发明了一款通过氢气...
华秋工艺分享:第八道主流程之丝... 如图,第八道主流程为 文字 。 文字的目的:文字又名字符。是线路板上白色...
Redis10大数据类型 Redis10大数据类型Redis键(key)一、Redis字符串&#x...
MySQL变量的使用 文章目录1、系统变量1.1 查看系统变量1.2 设置系统变量2、用户变量2.1 定义用户变量2.2 ...
IntelliJ IDEA创建... 目录 ——————————————————————————————— 一、创建Java项目 1、创建...
Qt学习_08_用独立的文件存... 0 前言 上一篇笔记对样式表进行了初步学习,QT学习_07_样式表的初步学习_江湖上都...
小黑子—多媒体技术与运用基础知... 多媒体技术与运用1.0多媒体系列第一章1. 计算机媒体概述1.1 媒体的分类1.2 小结2. 多媒体...
自主移动机器人AMR控制器设计... 近年来,随着社会和技术发展,自主移动已经成为了仓储物流[1]、无人驾驶[...
Java Web应用开发——第... 第二章:JSP基本语法测验 一.单项选择题(共15题,49.5分...
代码自动生成工具实战-Curs... 文章目录Cursor code generate介绍Cursor 代码生成实战prompt1prom...
普通Java工程师 VS 优秀... 1 核心能力 1.1 要成为一名优秀的Java架构师 只懂技术还远远不够,懂技术/懂业...
【爬虫】一、前置知识 一、Web请求过程解析 1.服务器渲染:在服务器端把数据和html整合在一起ÿ...
文心一言话题的思考 ⭐️我叫忆_恒心,一名喜欢书写博客的在读研究生👨‍🎓。...
react-native an... 1. 配置环境 必须安装的依赖有:Node、JDK 和 Android Studio。...
若依分离版选择弹窗数据回读 最近学习若依框架过程中想要实现点击按钮显示弹窗,在弹窗选择信息后回读到父组件中显示&#...
板边器件距离不够,导致元器件无... 电子元器件在PCB板上的 合理布局 ,是减少焊接缺点的极重要一环!元器件...
sdbusplus:通过con... sdbusplus:通过new_method_call同步调用service的meth...
骷髅病毒分析 一、病毒信息病毒名称:骷髅病毒文件名称:d5dac2456fa67584...
使用CRT调式库调式运行时堆 #include#include#define CRTDBG_MAP_ALLOC#include #...
Hive的UDF实现两种简单方... Hive的UDF实现两种简单方法+通过编译源码添加UDF 一、实现简单的say_hello ...
211本科生就业难,绝不是个例... 曾几何时,我们在高中时期日以继夜地努力学习,只为在高考中获得更高的分数&...
Java【多线程基础2】 Th... 文章目录前言一、Thread类1, 构造方法2, 常用成员属性3, 常用成员方法3.1, start...
MySQL分区 一张表的数据在物理层面都是存放在一起的。随着业务增长,当一张表的数据量过大时ÿ...