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

时间：2015-11-17 23:27:47 阅读：417 评论：0 收藏：0 [点我收藏+]

标签：

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

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

以下为源码：

[cpp] view plain copy

#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();
}

以下为程序截图：

技术分享

http://blog.csdn.net/huihui1988/article/details/5853728#comments

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

标签：

原文地址：http://www.cnblogs.com/findumars/p/4973147.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行