程序猿谈恋爱什么的·QT自定义符文旋转按钮

原创 于 2017-08-11 10:55:25 发布 · 922 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Opencv #QT #qq

有人说学习MFC的过程就像是初恋，而学习QT的感觉就像是和志玲姐姐谈恋爱。
本猿没学过MFC，自然也就不知道初恋是什么滋味，不过既然是初恋，那么迟早都要被抛弃的吧。
和志玲姐姐贪恋爱，过程虽然甜蜜，不过就算谈到了最后也不一定走到一起吧。
也就是说，学习QT的过程并不枯燥，丰富的动画效果和强大的信号槽机制是传统的CLR和MFC完全无法比拟的。
QT更加适用于现代化界面的要求，也势必会更加蓬勃地发展。

这一次教大家如何自定义符文旋转按钮功能，我们先放效果上来：


如果我是客户的话当然愿意用这样的按钮了，客户也是有中二之魂的好么，摔！
首先我们看到按钮被定义成了自定义形状，不再是普通的low了一B的方块了，这就必须用到QT中的自定义stylesheet。
然后我们实现了每一个符文绕着中心进行旋转的效果，就用到了Q中的属性动画机制。
本人博客：
http://blog.youkuaiyun.com/qq_30547073?viewmode=list
好了废话不多说，我们上代码。 
void qscarlet_opencvMaster::init_AnimationButton()//初始化动画按钮
{
    int RotCenterX =100;
    int RotCenterY =100;
    int RotR =90;
    double RotLittleAngel =2;//移动多少度(可以被360整除)
    double RotLittleRad = RotLittleAngel/180*CV_PI;
    int RotPieceNum = 360.0/RotLittleAngel;
    double Everyone =1.0/(double)RotPieceNum;//将1.0分成这么多份,每一份是多少

    //动画效果==天流血斩杀
    QPushButton *Lin_BT1 = new QPushButton(tr("lin"),ui->tab_ttribute);
    QPushButton *Bing_BT2 = new QPushButton(tr("bing"),ui->tab_ttribute);
    QPushButton *Dou_BT3 = new QPushButton(tr("dou"),ui->tab_ttribute);
    QPushButton *Zhe_BT4 = new QPushButton(tr("zhe"),ui->tab_ttribute);
    QPushButton *Jie_BT5 = new QPushButton(tr("jie"),ui->tab_ttribute);
    QPushButton *GIRL_BT6 = new QPushButton(tr("GIRL"),ui->tab_ttribute);
    Lin_BT1->setStyleSheet//临
            ("QPushButton{border-image: url(:/moveBTico/movebtico/BT_lin_Normal.png);}"
             "QPushButton:hover{border-image: url(:/moveBTico/movebtico/BT_lin_hover.png);}"
             "QPushButton:pressed{border-image: url(:/moveBTico/movebtico/BT_lin_press.png);}");
    Lin_BT1->setToolTip(tr("Lin"));
    Bing_BT2->setStyleSheet//兵
            ("QPushButton{border-image: url(:/moveBTico/movebtico/BT_bing_Normal.png);}"
             "QPushButton:hover{border-image: url(:/moveBTico/movebtico/BT_bing_hover.png);}"
             "QPushButton:pressed{border-image: url(:/moveBTico/movebtico/BT_bing_press.png);}");
    Bing_BT2->setToolTip(tr("Bing"));
    Dou_BT3->setStyleSheet//斗
            ("QPushButton{border-image: url(:/moveBTico/movebtico/BT_dou_Normal.png);}"
             "QPushButton:hover{border-image: url(:/moveBTico/movebtico/BT_dou_hover.png);}"
             "QPushButton:pressed{border-image: url(:/moveBTico/movebtico/BT_dou_press.png);}");
    Dou_BT3->setToolTip(tr("Dou"));
    Zhe_BT4->setStyleSheet//者
            ("QPushButton{border-image: url(:/moveBTico/movebtico/BT_zhe_Normal.png);}"
             "QPushButton:hover{border-image: url(:/moveBTico/movebtico/BT_zhe_hover.png);}"
             "QPushButton:pressed{border-image: url(:/moveBTico/movebtico/BT_zhe_press.png);}");
    Zhe_BT4->setToolTip(tr("Zhe"));
    Jie_BT5->setStyleSheet//皆
            ("QPushButton{border-image: url(:/moveBTico/movebtico/BT_jie_Normal.png);}"
             "QPushButton:hover{border-image: url(:/moveBTico/movebtico/BT_jie_hover.png);}"
             "QPushButton:pressed{border-image: url(:/moveBTico/movebtico/BT_jie_press.png);}");
    Jie_BT5->setToolTip(tr("Jie"));
    GIRL_BT6->setStyleSheet//二小姐
            ("QPushButton{border-image: url(:/moveBTico/movebtico/BT_GIRL_Normal.png);}"
             "QPushButton:hover{border-image: url(:/moveBTico/movebtico/BT_GIRL_hover.png);}"
             "QPushButton:pressed{border-image: url(:/moveBTico/movebtico/BT_GIRL_press.png);}");
    GIRL_BT6->setToolTip(tr("GIRL"));
    AnimationButtonList.append(Lin_BT1);
    AnimationButtonList.append(Bing_BT2);
    AnimationButtonList.append(Dou_BT3);
    AnimationButtonList.append(Zhe_BT4);
    AnimationButtonList.append(Jie_BT5);
    double IntervalRad = 2*CV_PI/(double) AnimationButtonList.size();
    QVBoxLayout*Movelayout =new QVBoxLayout();//QGridLayout
    for(int i=0;i<AnimationButtonList.size();i++)
    {
        //Movelayout->addWidget(AnimationButtonList[i]);
        QPropertyAnimation *AnimationCon= new QPropertyAnimation(AnimationButtonList[i],"geometry");
        AnimationCon->setDuration(10000);
        for(int p=0;p<RotPieceNum;p++)
        {
             double StartRad =RotLittleRad*p+IntervalRad*i;
             AnimationCon->setKeyValueAt
             (Everyone*p,QRect(RotR*sin(StartRad)+RotCenterX,RotR*cos(StartRad)+RotCenterY,40,40));
        }
        //也许还差一个位置0的(好，现在不闪动了)
        AnimationCon->setKeyValueAt(1.0,QRect(RotR*sin(IntervalRad*i)+RotCenterX,RotR*cos(IntervalRad*i)+RotCenterY,40,40));

        AnimationCon->setEasingCurve(QEasingCurve::SineCurve);//40种符文旋转效果
        AnimationControlList.append(AnimationCon);
    }
    //ui->tab_ttribute->setLayout(Movelayout);//装载Button
    //中间二小姐静止
    QPropertyAnimation *AnimationCon_GIRL= new QPropertyAnimation(GIRL_BT6,"geometry");
    AnimationCon_GIRL->setKeyValueAt(0.0,QRect(RotCenterX-20,RotCenterY-20,100,64));
    AnimationCon_GIRL->setKeyValueAt(1.0,QRect(RotCenterX-20,RotCenterY-20,100,64));
    AnimationControlList.append(AnimationCon_GIRL);

    for(int i=0;i<AnimationControlList.size();i++)//全部开始
    {
        AnimationControlList[i]->setLoopCount(-1);
        AnimationControlList[i]->start();
    }

    //基本用法
    //m_ButtonAnimation->setKeyValueAt(0,QRect(0,0,50,30));
    //m_ButtonAnimation->setKeyValueAt(0.2,QRect(50,100,10,20));
    //m_ButtonAnimation->setKeyValueAt(0.5,QRect(100,100,100,60));
    //m_ButtonAnimation->setKeyValueAt(1,QRect(0,0,50,30));
    //myAnimation->setStartValue(QRect(0,0,50,30));
    //myAnimation->setEndValue(QRect(100,100,100,60));
    //myAnimation->pause();//暂停
    //myAnimation->resume();//恢复状态
    //myAnimation->setDirection(QAbstractAnimation::Backward);//Forward
    //m_ButtonAnimation->setLoopCount(-1);
    //m_ButtonAnimation->start();
}
这个是初始化动画的代码，简单讲解一下，首先我们必须将圆周分块，每一次移动2°.因为QT里面使用属性动画的方法是这样的：给出初始状态和末尾状态，那么QT就自动平滑地对这两种状态进行过渡.比如说下面代码（书上的）就实现了按钮从初始的状态过渡到了另一个状态： 
#include<QApplication>
#include<QPushButton>
#include<QPropertyAnimation>
int main(int argc,char* argv[])
{
    QApplication app(argc,argv);
    QPushButton button("Animated Button");
    button.show();
    QPropertyAnimation animation("&button,"geometry");
    animatin.setDuration(1000);
   // animation.setStartValue(QRect(0,0,120,30));
   // animation.setEndValue(QRect(250,250,200,60));
    //将中间几句可以改为：
    animation.setKeyValueAt(0,QRect(0,0,120,30));
    animation.setKeyValueAt(0.8,QRect(250,250,200,60));
    animation.setKeyValueAt(1,QRect(0,0,120,30));
    animation.start();
    return app.exec();
}
我们利用这一点，加入一简单的分析就可以做出旋转效果了。我们将一个圆周每2°分成180份，就可以让按钮看起来是平滑过渡的。
    然后我们设置StyleSheet改变按钮的三个状态：normal、hover、press。当然也可以是你自己设定的图片。
    本人首先 在PS中进行抠图，对文字分别进行内发光处理和外发光处理，分别保存成png图片，然后加载到资源中：

嘛，算了，我知道你们肯定是不肯好好抠图的，我也知道你们懒得学ps，那我先把我的资源分享一下： 
    我次奥，现在优快云资源不让免费了吗？我只好选择最少的1分，不坑大家。
  http://download.youkuaiyun.com/download/qq_30547073/9928971
  马丹，干脆连整个大工程也分享咯 qScarletNinjaSystem-V1.1 :
大工程源码
    本人不是大神，这样的效果也是一步一步自己琢磨出来的，仅供参考，大家有更好的方法也可以相互分享啊哈哈。
本人QQ:498771026欢迎大家积极评论和一起讨论。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值