用QT实现动画,我们必定用到QPropertyAnimation,这里我们介绍几种情形的动画实现。如直线动画,曲线动画,路径动画。
一、基础知识
1、QPropertyAnimation的初始化
我们首先必须在包涵QPropertyAnimation的头文件或者模块,否则报错不能识别。我们来实例化一个,下面是类的构造函数:
  QPropertyAnimation(QObject *target, const QByteArray &propertyName, QObject *parent = nullptr);
 
很显然,它有三个参数,所以我们可以带参初始化:
 target:要实施动画的对象,可以是widget对象或子对象,自定义的图形对象;
 propertyName:这里是一个描述字符串常量,“pos” 、“opacity ”、“geometry”,“sacleFactor”,分别控制位置、透明度、形状,大小;
 parent:可以不填写,它有默认值为nullptr;
 下面是初始化构造函数的举例:
QPropertyAnimation * animation=QPropertyAnimation(targetObject,“pos”);//pos  opacity geometry
 
我们根据需要选择pos 、opacity 、geometry中的任何一个。
当然,我们也可以不带参在构造函数实例化,而是空置构造函数的参数列表,然后用属性设置来设置这些参数:
 setTargetObject:设置仿真对象
 setPropertyName:设置仿真属性的名称
QPropertyAnimation * animation=QPropertyAnimation();
animation->setTargetObject(this);
animation->setPropertyName("pos");
 
2、设置运动属性参数
运动属性参数主要
 setDuration:设置仿真持续的时间
 setStartValue:设置初始值
 setEndValue:设置结束值
 setKeyValueAt:设置关键点的值
  animation->setDuration(4000);
  animation->setStartValue(QPoint(30, 30));
  animation->setEndValue(QPoint(350, 30));
  
 
上面的代码我们设置了起点和终点。如果我们只是做简单的两种状态的动画,这已经足够了,如果是多个状态(这里的状态可以是位置、形状、透明度),那么我们就要借助另一个参数属性设置方法。
3、多状态点运动参数设置setKeyValueAt[关键帧]
setKeyValueAt的设置一般有两个参数,但官网和论坛中可以找到的说明都很少,这里详细说一下:
 
 step:表示状态变化的程度0~1,表示0%到100%,当设置为1时就表示动画结束了。
 value:它是一个QVariant类型,QPoint对应pos,QRect对应geometry,单个数值对应opacity 或者sacleFactor
animation->setKeyValueAt(0.5,QPoint(200,200));
 
如果我们要批量设置多状态点运动参数即关键帧,我们可以直接使用setKeyValues来完成,这里不再赘述,这和setKeyValueAt的数据对一样,只不过是数组而已;
到这里,一个动画需要的关键参数设置都已经完成了。
二、实例
1、简单直线动画
QPropertyAnimation * animation=QPropertyAnimation(targetObject,“pos”)
  animation->setDuration(4000);
  animation->setStartValue(QPoint(30, 30));
  animation->setEndValue(QPoint(350, 30));
  animation->start();
 
这里的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);
 
形状动画,设置不同的动画百分比和矩形特征
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();
 
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、更多的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();
      
 
例如,我们要做一个尺寸和透明度同时变化的动画,那么就应该使用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();
                
















