QT动画实例代码QPropertyAnimation的应用_在 'qtwidgets.pyi' 中找不到引用 'qpropertyanimation

用QT实现动画，我们必定用到QPropertyAnimation，这里我们介绍几种情形的动画实现。如直线动画，曲线动画，路径动画。

一、基础知识

1、QPropertyAnimation的初始化

我们首先必须在包涵QPropertyAnimation的头文件或者模块，否则报错不能识别。我们来实例化一个，下面是类的构造函数：

  QPropertyAnimation(QObject *target, const QByteArray &propertyName, QObject *parent = nullptr);
1

很显然，它有三个参数，所以我们可以带参初始化：
target：要实施动画的对象，可以是widget对象或子对象，自定义的图形对象；
propertyName：这里是一个描述字符串常量，“pos” 、“opacity ”、“geometry”，“sacleFactor”，分别控制位置、透明度、形状，大小;
parent:可以不填写，它有默认值为nullptr;
下面是初始化构造函数的举例：

QPropertyAnimation * animation=QPropertyAnimation(targetObject,“pos”);//pos  opacity geometry
1

我们根据需要选择pos 、opacity 、geometry中的任何一个。

当然，我们也可以不带参在构造函数实例化，而是空置构造函数的参数列表，然后用属性设置来设置这些参数：
setTargetObject：设置仿真对象
setPropertyName：设置仿真属性的名称

QPropertyAnimation * animation=QPropertyAnimation();
animation->setTargetObject(this);
animation->setPropertyName("pos");
1
2
3

2、设置运动属性参数

运动属性参数主要
setDuration：设置仿真持续的时间
setStartValue：设置初始值
setEndValue：设置结束值
setKeyValueAt：设置关键点的值

  animation->setDuration(4000);
  animation->setStartValue(QPoint(30, 30));
  animation->setEndValue(QPoint(350, 30));
  
1
2
3
4

上面的代码我们设置了起点和终点。如果我们只是做简单的两种状态的动画，这已经足够了，如果是多个状态（这里的状态可以是位置、形状、透明度），那么我们就要借助另一个参数属性设置方法。

3、多状态点运动参数设置setKeyValueAt[关键帧]

setKeyValueAt的设置一般有两个参数，但官网和论坛中可以找到的说明都很少，这里详细说一下：

step：表示状态变化的程度0~1，表示0%到100%，当设置为1时就表示动画结束了。
value:它是一个QVariant类型，QPoint对应pos，QRect对应geometry，单个数值对应opacity 或者sacleFactor

animation->setKeyValueAt(0.5,QPoint(200,200));
1

如果我们要批量设置多状态点运动参数即关键帧，我们可以直接使用setKeyValues来完成，这里不再赘述，这和setKeyValueAt的数据对一样，只不过是数组而已；

到这里，一个动画需要的关键参数设置都已经完成了。

二、实例

1、简单直线动画

QPropertyAnimation * animation=QPropertyAnimation(targetObject,“pos”)
  animation->setDuration(4000);
  animation->setStartValue(QPoint(30, 30));
  animation->setEndValue(QPoint(350, 30));
  animation->start();
1
2
3
4
5

这里的targetObject可以是窗体或者是任何图形对象；

2、多状态点[关键帧]

位置动画，那么就是设置不同的动画百分比和点坐标，如下：

QPropertyAnimation * animation1=QPropertyAnimation(targetObject,“pos”)
 animation1->setStartValue(QPoint(0, 0));
 animation1->setKeyValueAt(0.25, QPoint(250, 0));
 animation1->setKeyValueAt(0.50, QPoint(250, 250));
 animation1->setKeyValueAt(0.75, QPoint(0, 250));
 animation1->setKeyValueAt(0.99, QPoint(0, 0));
 animation1->setEndValue(QPoint(0, 0));
 animation1->start(QAbstractAnimation::KeepWhenStopped);
1
2
3
4
5
6
7
8

形状动画，设置不同的动画百分比和矩形特征

QPropertyAnimation * animation1=QPropertyAnimation(targetObject,“pos”)
  animation1->setDuration(3000);
   animation1->setKeyValueAt(0, QRect(0, 0, 00, 00));
   animation1->setKeyValueAt(0.4, QRect(250, 0, 0, 0));
   animation1->setKeyValueAt(0.8, QRect(250, 250, 0, 0));
   animation1->setKeyValueAt(0.9, QRect(0, 250, 0, 0));
   animation1->setEndValue(QRect(0, 0, 0, 0));
   animation1->start();
1
2
3
4
5
6
7
8

3、路径动画

路径动画需要一路径QPainterPath，这个大家可以先参考学习QPainterPath；有了路径后我们就可以绘制路径动画了，我们依旧要使用setKeyValueAt：

QPropertyAnimation * animation1=QPropertyAnimation(targetObject,“pos”)
animation->setDuration(4000);
animation->setStartValue(QPoint(30, 30));
for (int i=0;i<101;i++)
     animation->setKeyValueAt(i/100, path.pointAtPercent(i));
     //这里的path我们事先已经绘制好了
animation->setEndValue(QPoint(350, 30));
animation->start();
1
2
3
4
5
6
7
8

三、用出高级感来

1、更多的QPropertyAnimation 属性方法

我们要把QPropertyAnimation 用出高级感来，那必须熟悉更多的QPropertyAnimation 的属性方法，如：
setEasingCurve:设置擦除模式
currentValue：返回当前值
valueChanged：只要仿真追踪的值发生变化，就发送该信号

2、上下游与之相关的类

还有与QPropertyAnimation 相关的上下游的类如：
QPauseAnimation
QVariantAnimation

3、多动画的并行和串行

AnimationGroup：多个动画AnimationGroup可以加入这个类实现多动画的并行和串行播放
QParallelAnimationGroup：并行播放组类
QSequentialAnimationGroup：串行播放组类
首先，我们来看看串行的动画组QSequentialAnimationGroup ：

QSequentialAnimationGroup *group = new QSequentialAnimationGroup(this);
QPropertyAnimation * animation1=QPropertyAnimation(targetObject,“pos”);
QPropertyAnimation * animation2=QPropertyAnimation(targetObject,“pos”);
QPropertyAnimation * animation3=QPropertyAnimation(targetObject,“pos”);
QPropertyAnimation * animation4=QPropertyAnimation(targetObject,“pos”);
//这里略去了具体每个动画的内容
  group->addAnimation(animation1);
  group->addAnimation(animation2);
  group->addAnimation(animation3);
  group->addAnimation(animation4);
  group->setLoopCount(4);//根据需要设置循环次数，-1时为无限次循环
  group->start();
      
1
2
3
4
5
6
7
8
9
10
11
12
13

例如，我们要做一个尺寸和透明度同时变化的动画，那么就应该使用QParallelAnimationGroup

QParallelAnimationGroup *group = new QParallelAnimationGroup(this);

    //尺寸变化动画
  QPropertyAnimation * mscaleAnimation = new QPropertyAnimation(this, "sacleFactor");
    sAnimation->setDuration(3000);
    sAnimation->setStartValue(0.1);
    sAnimation->setEndValue(1.0);
    sAnimation->setEasingCurve(QEasingCurve::OutQuad);
    group->addAnimation(sAnimation);

    //透明度变化动画
    QPropertyAnimation *fAnimation= new QPropertyAnimation(this, "opacity");
    fAnimation->setDuration(3000);
    fAnimation->setStartValue(1);
    fAnimation->setEndValue(0.1);
    fAnimation->setEasingCurve(QEasingCurve::OutQuad);
    group->addAnimation(fAnimation);
    group->start();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19