Qt 之 QPropertyAnimation

简述

QPropertyAnimation类定义了Qt的属性动画。

QPropertyAnimation以Qt属性做差值,作为属性值存储在QVariants中,该类继承自QVariantAnimation,并支持基类相同的元类型动画。

声明属性的类必须是一个QObject,为了能够让属性可以用做动画效果,必须提供一个setter(这样,QPropertyAnimation才可以设置属性的值)。注意:这能够使它让许多Qt控件产生动画效果。

| 版权声明:一去、二三里,未经博主允许不得转载。

详细描述

来看一个示例:

QPropertyAnimation *animation = new QPropertyAnimation(myWidget, "geometry");
animation->setDuration(10000);
animation->setStartValue(QRect(0, 0, 100, 30));
animation->setEndValue(QRect(250, 250, 100, 30));

animation->start();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

首先,我们通过构造函数创建一个QPropertyAnimation对象,其中myWidget表示动画作用的QObject对象,geometry则表示QObject的属性。然后,可以指定属性的开始值和结束值。此过程等于在你自己的类中实现了自定义属性 - 需要用QVariantAnimation检测你自定义的QVariant类型是否支持。

QVariantAnimation类详细的描述了如何设置动画。需要注意的是:如果没有设置起始值,在QPropertyAnimation实例被创建时,属性就会设置起始值为它有的值。

QPropertyAnimation就其本身而言非常奏效。对于复杂的动画,例如:包含多个对象,则可以使用QAnimationGroup,动画组是一个可以包含其它动画的动画,并可以管理动画的播放。可以参考QParallelAnimationGroup的示例。

公共函数

  • QByteArray propertyName() const
    返回动画的目标属性名

  • void setPropertyName(const QByteArray & propertyName)
    设置动画的目标属性名

  • void setTargetObject(QObject * target)
    设置动画作用的QObject对象

  • QObject * targetObject() const
    返回动画作用的QObject对象

示例

原始属性

下面,利用上面讲解的geometry属性,来实现一个动画坐标变化。

效果

这里写图片描述

源码

QPropertyAnimation *pAnimation = new QPropertyAnimation(m_pLabel, "geometry");
pAnimation->setDuration(1000);
pAnimation->setStartValue(QRect(0, 0, 75, 25));
pAnimation->setEndValue(QRect(200, 130, 75, 25));
pAnimation->setEasingCurve(QEasingCurve::OutBounce);  // 缓和曲线风格
connect(pStartButton, SIGNAL(clicked(bool)), pAnimation, SLOT(start()));
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

自定义属性

通过自定义属性alpha,来使用动画设置标签的样式。

效果

这里写图片描述

源码

#ifndef MAIN_WINDOW_H
#define MAIN_WINDOW_H

...

class MainWindow : public CustomWindow
{
    Q_OBJECT
    Q_PROPERTY(int alpha READ alpha WRITE setAlpha)

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    int alpha() const;
    void setAlpha(const int alpha);

private:
    int m_nAlpha;
    QLabel *m_pLabel;
};

#endif // MAIN_WINDOW_H
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
#include "main_window.h"

MainWindow::MainWindow(QWidget *parent)
    : CustomWindow(parent)
{
    ...

    QPushButton *pStartButton = new QPushButton(this);
    pStartButton->setText(QString::fromLocal8Bit("开始动画"));

    m_pLabel = new QLabel(this);
    m_pLabel->setText(QString::fromLocal8Bit("一去丶二三里"));
    m_pLabel->setAlignment(Qt::AlignCenter);
    m_pLabel->setStyleSheet("color: rgb(0, 160, 230);");

    QPropertyAnimation *pAnimation = new QPropertyAnimation();
    pAnimation->setTargetObject(this);
    pAnimation->setPropertyName("alpha");
    pAnimation->setDuration(1000);
    pAnimation->setKeyValueAt(0, 255);
    pAnimation->setKeyValueAt(0.5, 100);
    pAnimation->setKeyValueAt(1, 255);
    pAnimation->setLoopCount(-1);  //永远运行,直到stop
    connect(pStartButton, SIGNAL(clicked(bool)), pAnimation, SLOT(start()));

    ...
}

int MainWindow::alpha() const
{
    return m_nAlpha;
}

void MainWindow::setAlpha(const int alpha)
{
    m_nAlpha = alpha;
    QString strQSS = QString("color: rgb(0, 160, 230); background-color: rgba(10, 160, 105, %1);").arg(m_nAlpha);
    m_pLabel->setStyleSheet(strQSS);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

O(∩_∩)O~是不是很easy,如果你想要实现更多其它效果,都可以自定义。但一定要注意以下两点:

  1. 需要用QVariantAnimation检测你自定义的QVariant类型是否支持。
  2. 声明属性的类必须是一个QObject,必须为属性提供一个setter(这样,QPropertyAnimation才可以设置属性的值)。

--------------------- 本文来自 一去丶二三里 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/liang19890820/article/details/51882026?utm_source=copy

  • 14
    点赞
  • 66
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值