技术交流群里面我看到一些道友写的网易云音乐,就联想到自己写的网易云。所以将其中黑胶片转动动画的部分剥离出来。独立的写了一个类,这个类中集成了播放,暂停的界面响应。本着开源精神将代码公开,还望各位道友能指点一二。
目前这个类名叫heijiaopianwidget,在其中我用PS做两张黑胶片和转杆的两张素材照片是本类的核心。整个类的动画实现依赖于两张图片的转动。
类中分别声明了两个QTimer,设定了一定的频率来访问增加转动角度的函数,整个动画在QPainEvent中绘制而成。
#include <QPainter>
#include <QTimer>
class HeiJiaoPianWidget : public QWidget
{
Q_OBJECT
public:
explicit HeiJiaoPianWidget(QWidget *parent = 0);
int readThe_i()//读取角度
{
return i;
}
void writeThe_i(int x)//写入角度
{
this->i=x;
}
int readThe_j()//读取杆的角度
{
return j;
}
void writeThe_j(int x)//写入杆的角度
{
this->j=x;
}
void openTheMusic();//开始
void closeTheMusic();//关闭
private:
QTimer *heijiaopianTimer;//黑胶片的timer
QTimer *huifuganTimer;//回复杆的timer
int i=0;//黑胶片转动的角度,会有定时器来改变它
int j=0;//转动杆的转动角度,会有定时器来改变它
void setHeiJiaoPianWidgetSeting();//设置黑胶片widget的默认设置
void paintEvent(QPaintEvent *event);//绘制事件,所有的动态实现就在这里面实现的
signals:
private slots:
public slots:
void changeHeijiaopian();//转动黑胶片
void changeHuifugan();//转动回复杆
};
#include "heijiaopianwidget.h"
HeiJiaoPianWidget::HeiJiaoPianWidget(QWidget *parent) : QWidget(parent)
{
setHeiJiaoPianWidgetSeting();
}
void HeiJiaoPianWidget::setHeiJiaoPianWidgetSeting()//该widget的一些默认参数
{
setMaximumSize(1000,700);
setMinimumSize(1000,700);
huifuganTimer=new QTimer(this);
heijiaopianTimer=new QTimer(this);
heijiaopianTimer->setInterval(42);
huifuganTimer->setInterval(14);
connect(heijiaopianTimer,SIGNAL(timeout()),this,SLOT(changeHeijiaopian()));
connect(huifuganTimer,SIGNAL(timeout()),this,SLOT(changeHuifugan()));
}
void HeiJiaoPianWidget::paintEvent(QPaintEvent *event)//绘制事件
{
Q_UNUSED(event);
QPainter painter(this);
painter.setRenderHint(QPainter::SmoothPixmapTransform);
painter.setRenderHint(QPainter::Antialiasing);
painter.save();
QPixmap pix0=QPixmap(":/png/image/music3.png");//默认的背景图片
painter.drawPixmap(0,0,1000,700,pix0);
painter.restore();
painter.save();
QRectF rect=QRectF(0,0,1000,700);//默认的添加一层模糊界面
QColor color1(30,30,40);
color1.setAlphaF(0.8);
painter.setPen(Qt::NoPen);
painter.setBrush(color1);
painter.drawRect(rect);
painter.restore();
painter.save();
QColor color(100,100,100);// 黑胶片下部的一层背景色
painter.translate(85,110);//重新定义了该widget的原点。
painter.setPen(Qt::NoPen);
painter.setBrush(color);
painter.drawEllipse(-5,-5,400,400);
painter.restore();
painter.save();
QPixmap pix1;//黑胶片
pix1.load(":/png/image/heijiaopian.png");
painter.translate(85,110);//为了好看移动的原点
painter.translate(195,195);//让图片的中心作为旋转的中心
painter.rotate(i);//顺时针旋转的角度
painter.translate(-195,-195);//使原点复原
painter.drawPixmap(0,0,390,390,pix1);
painter.restore();
painter.save();
QPixmap pix;//转动杆
pix.load(":/png/image/changegan.png");
painter.translate(30,-200);//为了好看移动了原点
painter.translate(250,250);//让图片的中心作为旋转的中心
painter.rotate(j);//顺时针旋转的角度
painter.translate(-250,-250);//使原点复原
painter.drawPixmap(0,0,500,500,pix);
painter.restore();
}
void HeiJiaoPianWidget::openTheMusic()//开始
{
heijiaopianTimer->start();
huifuganTimer->start();
}
void HeiJiaoPianWidget::closeTheMusic()//关闭
{
heijiaopianTimer->stop();
j=0;
update();
huifuganTimer->stop();
}
void HeiJiaoPianWidget::changeHeijiaopian()//转动黑胶片的函数
{
i+=1;
if(i>360)
{
i=0;
}
update();
}
void HeiJiaoPianWidget::changeHuifugan()
{
j+=1;
if(j>30)
{
huifuganTimer->stop();
}
update();
}
以上代码是该类的核心。
下载工程文件: