Qt 在 View 中添加动画效果 - sbw Blog

Qt 在 View 中添加动画效果

来源: 石博文博客 | 浏览: 7726 | 评论: 10 发表时间: 2017-02-24

Qt 中经常使用 Model-View 模型来创建列表等视图,这样设计程序结构的好处是能将数据部分和界面完全分离。其中 Model 负责数据的准备与加工,View 提供了具体的对外显示的 Widget,而 Delegate 用作在 View 上绘图的模块。而对于现代的图形程序设计,对动画效果的要求更多,需要这三个模块配合来创建动画效果。



最终效果

qlistview animation

动画原理

由于 Model-View 模式的基本流程是由 Model 提供数据由 Delegate 绘图再由 View 显示。所以如果想要创建动画,首先必然是由 Model 出发,发送 DataChanged 信号通知 View 重绘某个数据。


上面的代码实现了所说的功能,其基本思想就是使用一个 Timer 来不断发送 DataChanged 信号来维持界面重绘。其中控制 Timer 的 interval 可以控制动画的刷新率。


动画的绘制

绘图的主要代码就是通过 Model 获取当前 Item 是否应该显示动画等信息,再根据一个变量代表的动画帧来绘图。Delegate 的核心代码如下:

这里用了一个巧妙的方法来获得动画帧,就是使用 Unix 时间戳。控制 Index 变量的计算可以控制动画的速度。


动画的几个要素

1. 动画的开始时间(即 Timer 的启动时间)。这里的具体需求是点击某个 Item 之后开始动画。

2. 动画的结束时间(即 Timer 的停止时间)。此时应该是这个 Item 完成 Click 的某些动作,收到对应的 Callback/信号时结束动画。

3. 动画所应用到哪个位置。也就是说要能从 Model 中获取出,当前哪些位置的 Item 是有动画效果的,要能区别出有动画和无动画的 Item。


完整的示例

这里有一个我在开发 Deepin Control-Center 时,使用这个方法为 QListView 添加一个等待设备连接动画的示例,具体的 git 提交可以参考: 为 QListView 添加动画的示例


QT

  • 声明: 评论属于其发表者所有,不代表本站的观点和立场.
  • 南浦月 回复该留言 时间: 2017-03-29

    你这博客不清真啊……

  • 路人甲 回复该留言 时间: 2017-12-10

    乔老师不清真。

  • 石博文 回复该留言 时间: 2019-03-27

    乔老师来加个链接啊

  • 凌星竹 回复该留言 时间: 2020-07-10

    订阅了一下rss,然后第一个就是这篇,点进来一看梦回当年。

  • sbw 回复该留言 时间: 2020-07-13

    23333

已有 5 位网友发表了一针见血的评论,你还等什么?
  • 昵称: *
  • 邮箱:
  • 网址:
  • 记住我的信息
  • Color
  • Red
  • Blue
  • Code
  • bash
  • cpp
  • css
  • java
  • js
  • perl
  • php
  • python
  • ruby
  • sql
  • xml