用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();