Qt仿Android带特效的数字时钟源码分析（滑动，翻页，旋转效果）

这个数字时钟的源码可以在Qt Demo中找到，风格是仿Android的，不过该Demo中含有三种动画效果（鉴于本人未曾用过Android的系统，因此不知道Android的数字时钟是否也含有这三种效果），其分别为滑动、翻页和旋转。

由于本人的Qt Creator输入中文后显示的都是乱码，因而在此只能使用英文进行注释，后期如果有时间再进行中文的相关整理。可能有些地方理解并不是很正确。希望大家多多指正！

 

以下为源码：

#include <QtCore> #include <QtGui> class Digits: public QWidget { Q_OBJECT public: /*Define three transition modes of the digital clock*/ enum { Slide, Flip, Rotate }; Digits(QWidget *parent) : QWidget(parent) , m_number(0) , m_transition(Slide) { setAttribute(Qt::WA_OpaquePaintEvent, true); //Widget paints all its pixels when it receives a paint event setAttribute(Qt::WA_NoSystemBackground, true); //Indicates that the widget has no background, i.e. when the widget receives paint events, the background is not automatically repainted. connect(&m_animator, SIGNAL(frameChanged(int)), SLOT(update())); //start animation m_animator.setFrameRange(0, 100); m_animator.setDuration(600); //Construct a 0.6-second timeline with a frame range of 0 - 100 m_animator.setCurveShape(QTimeLine::EaseInOutCurve); //starts growing slowly, then runs steadily, then grows slowly again } /*Set transition when time changed*/ void setTransition(int tr) { m_transition = tr; } /*Get transition mode*/ int transition() const { return m_transition; } /*Set hours and minutes*/ void setNumber(int n) { if (m_number != n) { m_number = qBound(0, n, 99); preparePixmap(); update(); } } /*Flip to next state*/ void flipTo(int n) { if (m_number != n) { m_number = qBound(0, n, 99); m_lastPixmap = m_pixmap; preparePixmap(); m_animator.stop(); m_animator.start(); } } protected: /*Draw the main frame of the digits area*/ void drawFrame(QPainter *p, const QRect &rect) { p->setPen(Qt::NoPen); QLinearGradient gradient(rect.topLeft(), rect.bottomLeft()); //Set linear gradient area gradient.setColorAt(0.00, QColor(245, 245, 245)); gradient.setColorAt(0.49, QColor(192, 192, 192)); gradient.setColorAt(0.51, QColor(245, 245, 245)); gradient.setColorAt(1.00, QColor(192, 192, 192)); //Creates stop points at the given position with the given color p->setBrush(gradient); QRect r = rect; p->drawRoundedRect(r, 15, 15, Qt::RelativeSize); /* Draws outer rectangle rect with rounded corners. Qt::RelativeSize specifies the size relative to the bounding rectangle, typically using percentage measurements. */ r.adjust(1, 4, -1, -4); //Adds 1, 4, -1 and -4 respectively to the existing coordinates of the rectangle p->setPen(QColor(181, 181, 181)); p->setBrush(Qt::NoBrush); p->drawRoundedRect(r, 15, 15, Qt::RelativeSize); //Draws inner rectangle rect with rounded corners. p->setPen(QColor(159, 159, 159)); int y = rect.top() + rect.height() / 2 - 1; p->drawLine(rect.left(), y, rect.right(), y); //Draws the mid-line from (rect.left(), y) to (rect.right(), y) and sets the current pen position to (rect.right(), y) } /*Draw the digits*/ QPixmap drawDigits(int n, const QRect &rect) { int scaleFactor = 2; #if defined(Q_OS_SYMBIAN) || defined(Q_OS_WINCE_WM) if (rect.height() > 240) scaleFactor = 1; #endif QString str = QString::number(n); if (str.length() == 1) str.prepend("0"); //Ensure it is double-digit QFont font; font.setFamily("Helvetica"); int fontHeight = scaleFactor * 0.55 * rect.height(); font.setPixelSize(fontHeight); //Sets the font size to pixelSize pixels font.setBold(true); QPixmap pixmap(rect.size() * scaleFactor); pixmap.fill(Qt::transparent); QLinearGradient gradient(QPoint(0, 0), QPoint(0, pixmap.height())); //Constructs a linear gradient with interpolation area between (0,0) and (0,pixmap.height()) gradient.setColorAt(0.00, QColor(128, 128, 128)); gradient.setColorAt(0.49, QColor(64, 64, 64)); gradient.setColorAt(0.51, QColor(128, 128, 128)); gradient.setColorAt(1.00, QColor(16, 16, 16)); //Creates stop points at the given position with the given color QPainter p; p.begin(&pixmap); p.setFont(font); QPen pen; pen.setBrush(QBrush(gradient)); //Set penbrush with linergrident p.setPen(pen); p.drawText(pixmap.rect(), Qt::AlignCenter, str); //Draws the digit number(str here) within the provided rectangle p.end(); return pixmap.scaledToWidth(width(), Qt::SmoothTransformation); //Returns a scaled copy of the image which is transformed using bilinear filtering } /*prepare the pixmap */ void preparePixmap() { m_pixmap = QPixmap(size()); m_pixmap.fill(Qt::transparent); //Fills the pixmap with the given transparent black value (i.e., QColor(0, 0, 0, 0)) QPainter p; p.begin(&m_pixmap); p.drawPixmap(0, 0, drawDigits(m_number, rect())); //Draws the given digits-pixmap at position (0, 0) p.end(); } /*define a resize event*/ void resizeEvent(QResizeEvent*) { preparePixmap(); update();//Causes a paintEvent() call } /*Paint the static state*/ void paintStatic() { QPainter p(this); p.fillRect(rect(), Qt::black); //Fill the widget rec with black color int pad = width() / 10; drawFrame(&p, rect().adjusted(pad, pad, -pad, -pad)); p.drawPixmap(0, 0, m_pixmap); } /*Paint the slide state*/ void paintSlide() { QPainter p(this); p.fillRect(rect(), Qt::black); int pad = width() / 10; QRect fr = rect().adjusted(pad, pad, -pad, -pad); drawFrame(&p, fr); p.setClipRect(fr); //sets the clip region to the given rectangle using the given clip operation int y = height() * m_animator.currentFrame() / 100; p.drawPixmap(0, y, m_lastPixmap); //Draw last-time state pixmap from 0 to height()(Y Coordinate) in 0.6 second p.drawPixmap(0, y - height(), m_pixmap); //Draw current-time state pixmap from -height() to 0 (Y Coordinate) in 0.6 second } /*Paint the flip state*/ void paintFlip() { QPainter p(this); #if !defined(Q_OS_SYMBIAN) && !defined(Q_OS_WINCE_WM) p.setRenderHint(QPainter::SmoothPixmapTransform, true); p.setRenderHint(QPainter::Antialiasing, true); #endif p.fillRect(rect(), Qt::black); int hw = width() / 2; int hh = height() / 2; // behind is the new pixmap int pad = width() / 10; QRect fr = rect().adjusted(pad, pad, -pad, -pad); drawFrame(&p, fr); p.drawPixmap(0, 0, m_pixmap); int index = m_animator.currentFrame(); if (index <= 50) { // the top part of the old pixmap is flipping int angle = -180 * index / 100; QTransform transform; transform.translate(hw, hh); //Moves the coordinate system to the center of widget transform.rotate(angle, Qt::XAxis); //Rotates the coordinate system counterclockwise by angle about the X axis p.setTransform(transform); drawFrame(&p, fr.adjusted(-hw, -hh, -hw, -hh)); p.drawPixmap(-hw, -hh, m_lastPixmap); // the bottom part is still the old pixmap p.resetTransform(); p.setClipRect(0, hh, width(), hh); //Enables clipping, and sets the clip region to the rectangle beginning at (0, hh) with the given width and height drawFrame(&p, fr); p.drawPixmap(0, 0, m_lastPixmap); } else { p.setClipRect(0, hh, width(), hh); // the bottom part is still the old pixmap drawFrame(&p, fr); p.drawPixmap(0, 0, m_lastPixmap); // the bottom part of the new pixmap is flipping int angle = 180 - 180 * m_animator.currentFrame() / 100; QTransform transform; transform.translate(hw, hh); transform.rotate(angle, Qt::XAxis); p.setTransform(transform); drawFrame(&p, fr.adjusted(-hw, -hh, -hw, -hh)); p.drawPixmap(-hw, -hh, m_pixmap); } } /*Paint the rotate state*/ void paintRotate() { QPainter p(this); int pad = width() / 10; QRect fr = rect().adjusted(pad, pad, -pad, -pad); drawFrame(&p, fr); p.setClipRect(fr); int angle1 = -180 * m_animator.currentFrame() / 100; int angle2 = 180 - 180 * m_animator.currentFrame() / 100; int angle = (m_animator.currentFrame() <= 50) ? angle1 : angle2; QPixmap pix = (m_animator.currentFrame() <= 50) ? m_lastPixmap : m_pixmap; QTransform transform; transform.translate(width() / 2, height() / 2); transform.rotate(angle, Qt::XAxis); p.setTransform(transform); p.setRenderHint(QPainter::SmoothPixmapTransform, true); p.drawPixmap(-width() / 2, -height() / 2, pix); } void paintEvent(QPaintEvent *event) { Q_UNUSED(event); if (m_animator.state() == QTimeLine::Running) { if (m_transition == Slide) paintSlide(); if (m_transition == Flip) paintFlip(); if (m_transition == Rotate) paintRotate(); } else { paintStatic(); } } private: int m_number;//number to set to digits int m_transition;//transition mode(change effect) QPixmap m_pixmap;//current time pixmap QPixmap m_lastPixmap;//next state time pixmap QTimeLine m_animator; //used to animate a GUI control by calling a slot periodically //The timeline's duration describes for how long the animation will run //connect the frameChanged() signal to a suitable slot in the widget you wish to animate }; class DigiFlip : public QMainWindow { Q_OBJECT public: DigiFlip(QWidget *parent = 0) : QMainWindow(parent) { m_hour = new Digits(this); m_hour->show(); m_minute = new Digits(this); m_minute->show(); QPalette pal = palette(); pal.setColor(QPalette::Window, Qt::black); //Sets the color used for the given color role, in all color groups, to the specified solid color. setPalette(pal); m_ticker.start(1000, this); //Send a timer event every second QTime t = QTime::currentTime(); m_hour->setNumber(t.hour()); m_minute->setNumber(t.minute()); updateTime(); QAction *slideAction = new QAction("&Slide", this); QAction *flipAction = new QAction("&Flip", this); QAction *rotateAction = new QAction("&Rotate", this); connect(slideAction, SIGNAL(triggered()), SLOT(chooseSlide())); connect(flipAction, SIGNAL(triggered()), SLOT(chooseFlip())); connect(rotateAction, SIGNAL(triggered()), SLOT(chooseRotate())); #if defined(Q_OS_SYMBIAN) || defined(Q_OS_WINCE_WM) menuBar()->addAction(slideAction); menuBar()->addAction(flipAction); menuBar()->addAction(rotateAction); #else addAction(slideAction); addAction(flipAction); addAction(rotateAction); setContextMenuPolicy(Qt::ActionsContextMenu); //Shows a context menu(right click) #endif } /*Real-time updates*/ void updateTime() { QTime t = QTime::currentTime(); m_hour->flipTo(t.hour()); m_minute->flipTo(t.minute()); QString str = t.toString("hh:mm:ss"); str.prepend(": "); if (m_hour->transition() == Digits::Slide) str.prepend("Slide"); if (m_hour->transition() == Digits::Flip) str.prepend("Flip"); if (m_hour->transition() == Digits::Rotate) str.prepend("Rotate"); setWindowTitle(str); } /*Switch transition mode*/ void switchTransition(int delta) { int i = (m_hour->transition() + delta + 3) % 3; m_hour->setTransition(i); m_minute->setTransition(i); updateTime(); } protected: void resizeEvent(QResizeEvent*) { int digitsWidth = width() / 2; int digitsHeight = digitsWidth * 1.2; int y = (height() - digitsHeight) / 3; m_hour->resize(digitsWidth, digitsHeight); m_hour->move(0, y); m_minute->resize(digitsWidth, digitsHeight); m_minute->move(width() / 2, y); } /*Timer event,receive timer events */ void timerEvent(QTimerEvent*) { updateTime(); } /* Get key press event */ void keyPressEvent(QKeyEvent *event) { if (event->key() == Qt::Key_Right) { switchTransition(1); event->accept(); } if (event->key() == Qt::Key_Left) { switchTransition(-1); event->accept(); } } private slots: void chooseSlide() { m_hour->setTransition(0); m_minute->setTransition(0); updateTime(); } void chooseFlip() { m_hour->setTransition(1); m_minute->setTransition(1); updateTime(); } void chooseRotate() { m_hour->setTransition(2); m_minute->setTransition(2); updateTime(); } private: QBasicTimer m_ticker; Digits *m_hour; Digits *m_minute; }; #include "digiflip.moc" int main(int argc, char *argv[]) { QApplication app(argc, argv); DigiFlip time; //#if defined(Q_OS_SYMBIAN) || defined(Q_OS_WINCE_WM) // time.showFullScreen(); //#else time.resize(320, 240); time.show(); //#endif return app.exec(); }

 

以下为程序截图：