快捷導(dǎo)航

使用Qt實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫(huà)效果

更新時(shí)間：2024年11月19日 11:16:50 作者：姆路

這篇文章主要為大家詳細(xì)介紹了如何使用Qt實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫(huà)效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

使用QPropertyAnimation類(lèi)綁定對(duì)應(yīng)的屬性后

就可以給這個(gè)屬性設(shè)置對(duì)應(yīng)的動(dòng)畫(huà)

//比如自定義了屬性
Q_PROPERTY(int rotation READ rotation WRITE setRotation)
 
 
//給這個(gè)屬性加動(dòng)畫(huà)效果
//參數(shù)1：誰(shuí)要加動(dòng)畫(huà)效果
//參數(shù)2：哪個(gè)屬性加動(dòng)畫(huà)效果
//參數(shù)3：parent
m_animation = new QPropertyAnimation(this, "rotation", this);
 
m_animation -> setDuration(2000); //設(shè)置動(dòng)畫(huà)時(shí)長(zhǎng)
m_animation -> setStartValue(0); //設(shè)置開(kāi)始值
m_animation -> setEndValue(360); //設(shè)置結(jié)束值
m_animation -> setLoopCount(3); //設(shè)置循環(huán)次數(shù)
m_animation -> start(); //開(kāi)啟動(dòng)畫(huà)

動(dòng)畫(huà)開(kāi)啟后，就會(huì)不停的調(diào)用setRotation（屬性write函數(shù)）去修改這個(gè)屬性的值

我們?cè)趕etRotation這個(gè)函數(shù)中修改屬性的值后，調(diào)用update()

于是QPropertyAnimation就會(huì)使得對(duì)應(yīng)的控件不停的重繪，就產(chǎn)生了動(dòng)畫(huà)效果。

舉例：

旋轉(zhuǎn)的矩形

完整代碼

#ifndef WIDGET_H
#define WIDGET_H
 
#include<QPropertyAnimation>
#include<QPainter>
#include <QWidget>
 
 
 
class RotatingWidget : public QWidget {
    Q_OBJECT
    //QPropertyAnimation類(lèi)要搭配Q_PROPERTY定義的屬性來(lái)使用
    //本質(zhì)上就是QPropertyAnimation在不停的修改對(duì)應(yīng)屬性的值，然后不停的重繪，看起來(lái)像動(dòng)的效果
    Q_PROPERTY(int rotation READ rotation WRITE setRotation)
public:
    RotatingWidget(QWidget *parent = nullptr): QWidget(parent), m_rotation(0) {
        m_animation = new QPropertyAnimation(this, "rotation", this);
        m_animation->setDuration(2000);//設(shè)置動(dòng)畫(huà)時(shí)長(zhǎng)
        m_animation->setStartValue(0);//設(shè)置開(kāi)始值
        m_animation->setEndValue(360);//設(shè)置結(jié)束值
        m_animation->setLoopCount(3);//設(shè)置循環(huán)次數(shù)
        //還可以設(shè)置動(dòng)畫(huà)的效果曲線，是勻速還是先快后慢等
        m_animation->start();//開(kāi)啟動(dòng)畫(huà)
    }
    int rotation() const {
        return m_rotation;
    }
public slots:
    void setRotation(int angle) {
        m_rotation = angle;
        //屬性修改后就進(jìn)行重繪
        update();
    }
protected:
    void paintEvent(QPaintEvent *event) override {
        QWidget::paintEvent(event);
 
        QPainter painter(this);
        painter.setRenderHint(QPainter::Antialiasing);
        painter.translate(width() / 2, height() / 2);
        painter.rotate(m_rotation);
        painter.translate(-width() / 2, -height() / 2);
        // 繪制旋轉(zhuǎn)的圖形,也可以是圖片
        painter.setPen(QPen(Qt::red));
        painter.drawRect(width() / 2-50, height() / 2-50, 100, 100);
    }
private:
    QPropertyAnimation *m_animation;
    int m_rotation;
};
#endif // WIDGET_H

到此這篇關(guān)于使用Qt實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫(huà)效果的文章就介紹到這了,更多相關(guān)Qt旋轉(zhuǎn)動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: