概述
Qt動(dòng)畫架構(gòu)中的主要類如下圖所示:

動(dòng)畫框架由基類QAbstractAnimation和它的兩個(gè)兒子QVariantAnimation和QAnimationGroup組成。QAbstractAnimation是所有動(dòng)畫類的祖宗。它包含了所有動(dòng)畫的基本屬性。比如開始,停止和暫停一個(gè)動(dòng)畫的能力。它也可以接收時(shí)間改變通知。
動(dòng)畫框架又進(jìn)一步提供了QProertyAnimation類。它繼承自QVariantAnimation并對(duì)某個(gè)Qt屬性(它須是Qt的”元數(shù)據(jù)對(duì)象系統(tǒng)”的一部分,見http://blog.csdn.net/nkmnkm/article/details/8225089)執(zhí)行動(dòng)畫。此類對(duì)屬性執(zhí)行一個(gè)寬松曲線插值。所以當(dāng)你想去動(dòng)畫一個(gè)值時(shí),你可以把它聲明為一個(gè)屬性,并且讓你的類成為一個(gè)QObject。這給予我們極大的自由度來動(dòng)畫那些已存在的widget和其它QObject。
復(fù)雜的動(dòng)畫可以通過建立一個(gè)QAbstractAnimation的樹來構(gòu)建。這個(gè)樹通過使用QAnimationGroups來創(chuàng)建,QAnimationGroups作為其它動(dòng)畫的容器。注意動(dòng)畫組也是從QAbstractAnimation派生的,所以動(dòng)畫組可以再包含其它動(dòng)畫組。
動(dòng)畫框架可以單獨(dú)使用,同時(shí)也被設(shè)計(jì)為狀態(tài)機(jī)框架的一部分。狀態(tài)機(jī)提供了一個(gè)特定的狀態(tài)可以用來播放動(dòng)畫。在進(jìn)入或退出某個(gè)狀態(tài)時(shí)QState也可以設(shè)置屬性們,并且這個(gè)特定的動(dòng)畫狀態(tài)將在指定QPropertyAnimation時(shí)給予的值之間做插值運(yùn)算。后面我們要進(jìn)一步介紹此問題。
在場(chǎng)景的背后,動(dòng)畫被一個(gè)全局定時(shí)器收集,這個(gè)定時(shí)器發(fā)送update到所有的正在播放的動(dòng)畫中。
動(dòng)畫框架中的類們
動(dòng)畫Qt屬性們
如前面所講,QPropertyAnimation類可以修改Qt屬性們。要?jiǎng)赢嬕粋€(gè)值,就需要使用此類。實(shí)際上,它的父類,QVariantAnimation,是一個(gè)虛擬類,不能被直接使用。
我們選擇動(dòng)畫Qt屬性的一個(gè)主要理由是Qt屬性為我們提供了自己動(dòng)畫已存在的類的自由度。尤其是QWidget類(我們也可以把它嵌入到一個(gè)QGraphicsView中)具有很多屬性表示其bounds,colors等等。讓我們看一個(gè)小例子:
- QPushButton button("Animated Button");
- button.show();
- QPropertyAnimation animation(&button, "geometry");
- animation.setDuration(10000);
- animation.setStartValue(QRect(0, 0, 100, 30));
- animation.setEndValue(QRect(250, 250, 100, 30));
- animation.start();
這段代碼將把按鈕在10秒種內(nèi)從屏幕的左上角移動(dòng)到(250,250)處。
上面的例子舉在開始值和結(jié)束值之間做線性插值。還可以在開始和結(jié)束值之間設(shè)置值,插值運(yùn)算就會(huì)經(jīng)過這些點(diǎn)。
- QPushButton button("Animated Button");
- button.show();
- QPropertyAnimation animation(&button, "geometry");
- animation.setDuration(10000);
- animation.setKeyValueAt(0, QRect(0, 0, 100, 30));
- animation.setKeyValueAt(0.8, QRect(250, 250, 100, 30));
- animation.setKeyValueAt(1, QRect(0, 0, 100, 30));
- animation.start();
在此例中,動(dòng)畫將按鈕在8秒中內(nèi)弄到(250,250)處,然后在2秒種內(nèi)又弄回原位。移位是在這些點(diǎn)中間以線性插值進(jìn)行的。
你 也有可能動(dòng)畫一個(gè)QObject的值,雖然這些值并沒有被聲明為Qt屬性。唯一的要求就是這個(gè)值具有一個(gè)setter。之后你可以從這個(gè)類派生子類從而包 含這些值并且聲明一個(gè)使用這個(gè)setter的屬性。注意每個(gè)Qt屬性都需要有一個(gè)getter,所以你需要提供一個(gè)getter,如果它不存在的話。
- class MyGraphicsRectItem : public QObject, public QGraphicsRectItem
- {
- Q_OBJECT
- Q_PROPERTY(QRectF geometry READ geometry WRITE setGeometry)
- };
在上例中,我們派生了QGraphicsRectItem并定義了一個(gè)geometry屬性。我們現(xiàn)在可以動(dòng)畫這個(gè)widget的geometry了,即使QGraphicsRectItem沒有提供geometry屬性。
動(dòng)畫和圖形視圖框架
當(dāng)你想動(dòng)畫QGraphicsItems,你也要用QPropertyAnimation。然而,QGraphicsItem不是從QObject派生的。一個(gè)好的解決方案是派生要?jiǎng)赢嫷膱D形item。派生類也要從QObject派生。這樣,QPropertyAnimation就可以被用于QGraphicsItems了。
- class Pixmap : public QObject, public QGraphicsPixmapItem
- {
- Q_OBJECT
- Q_PROPERTY(QPointF pos READ pos WRITE setPos)
- ...
就如上一節(jié)中所講的,我們需要定義希望去動(dòng)畫的屬性。
注意:QObject必須是繼承中的第一個(gè),因?yàn)樵獢?shù)據(jù)對(duì)象系統(tǒng)需要這樣做。
寬松曲線
QPropertyAnimation在屬性的開始值和結(jié)束值之間執(zhí)行一個(gè)插值運(yùn)算。除了向動(dòng)畫添加更多的關(guān)鍵值外,你還可以使用一個(gè)寬松曲線。寬松曲線描述了一個(gè)在0和1之間插值的速度變化的函數(shù),如果你想控制一個(gè)動(dòng)畫的速度而不改變插值的路徑時(shí),就非常有用。
- QPushButton button("Animated Button");
- button.show();
- QPropertyAnimation animation(&button, "geometry");
- animation.setDuration(3000);
- animation.setStartValue(QRect(0, 0, 100, 30));
- animation.setEndValue(QRect(250, 250, 100, 30));
- animation.setEasingCurve(QEasingCurve::OutBounce);
- animation.start();
這里,動(dòng)畫將按照一個(gè)曲線進(jìn)行,這個(gè)曲線使得動(dòng)畫像一個(gè)跳動(dòng)的皮球從開始位置跳到結(jié)束位置。QEasingCurve具有一個(gè)大曲線集合,你可以從里面選擇一個(gè)。它們被定義為QEasingCurve::Type枚舉。如果你需要不一樣的曲線,你也可以自己實(shí)現(xiàn)一個(gè),然后注冊(cè)到QEasingCurve。