召唤蕾姆

用Qt实现一个桌面弹幕程序(三)--实现一个弹幕③



  • 不同种类弹幕的实现

    在上一篇文章中,杰洛君带大家实现了从屏幕右方飞行到左方的弹幕。\(^o^)/

    但是弹幕并不止这一种,有很多很多不同的弹幕种类,包括但不限于:

    • 顶部弹幕 -- -- 弹幕悬停于屏幕顶部中央一段时间
    • 底部弹幕 -- -- 弹幕悬停在屏幕底部中央一段时间
    • 逆向弹幕 -- -- 弹幕从屏幕的右方飞行到屏幕左方

    实现起来也是非常简单的~

    继续使用QPropertyAnimation作为弹幕的动画实现方式

    顶部和底部弹幕:

    开始位置和结束位置设置为屏幕中间即可
    设置停留时间
    动画结束时销毁自身

    代码实现:

    QPropertyAnimation * anim2=new QPropertyAnimation(this, "pos");
    anim2->setDuration(7000);
    anim2->setEasingCurve(QEasingCurve::Linear);
    this->setWindowOpacity(this->getTransparency());
            connect(anim2,SIGNAL(finished()),this,SLOT(deleteLater()));
    

    问题又来了,顶部弹幕和底部弹幕的坐标如何确定呢?

    这两种弹幕的显示是位于屏幕中央,所以很自然可以想到 用 屏幕的宽度 - 弹幕的宽度除以2 得到弹幕的横坐标位置。

    但是纵坐标呢?

    纵坐标位置应该和上一个弹幕位置相关,也就是说,纵坐标的位置应该为字体高度的整数倍,这样这两种弹幕的文字才能不重叠。

    所以记得用两个变量来记录顶部弹幕数量和底部弹幕数量哦~

    至于逆向弹幕的话就更简单了,把正向弹幕的起始位置和结束位置互换就可以了~这里就不用代码写出了~

    杰洛君 怒偷一懒233O(∩_∩)O哈哈~

    (p.s. Qt的动画效果有很多,感兴趣的同学可以了解一下 QEasingCurve 类 , 恩恩,就是上面代码中经常出现的 QEasingCurve::Linear 部分,在这里是用了线性,你可以切换不同的类型来体验体验他们的动画效果哦~O(∩_∩)O嗯! )

    来试试动画弹幕吧~

    杰洛君的弹幕是继承QLabel实现的~

    而QLabel是可以播放GIF的哦~

    于是乎,杰洛君 脑洞大开地想到了一个很好玩的东西~

    不如让一个GIF动画飞过屏幕吧~

    好吧,那就决定是你了,上吧!!! 小doge!!!

    doge

    杰洛君创建了一个Doge类

    基本设置和弹幕类似,但是不需要重载 paintEvent函数了~

    Doge类用到了QMovie

    在Doge类中杰洛君添加了一个 QMovie * movie 这个私有变量。

    令他的构造函数看起来是这样子的

    Doge(
    QWidget *parent, 
    QMovie * movie2,
    QRect rect,
    int type = 4,
    double Transparency = 1.00,
    int runTime=15000
    );
    

    初始化后

    调用QLabel的 QLabel::setMovie(QMovie * movie); 函数就可以在Label上显示GIF了~

    所以在这里movie2的创建是在Doge类外部的。

    在构造函数中movie2的值会赋值给私有变量movie,自然在析构函数中要加上delete这个movie指针的代码,不然就内存泄露了。

    QMovie 类用法

    QMovie * movie = new QMovie(":/project/rundoge");
    movie->start(); //启动动画
    movie->setPaused(true); //暂停动画
    movie->stop(); //停止动画

    那上面代码中的":/project/rundoge" 是什么呢?

    这个是Qt中用资源文件进行管理文件时 文件的引用方式

    右键点击项目可以新建资源文件,在里面可以添加项目要用到的资源文件

    比如 杰洛君的项目中

    0_1457010603276_20160217221427169.jpg

    我给这个gif文件 定义了前缀为 /project 别名为 rundoge

    所以访问这个文件就是用 ":/project/rundoge" 进行访问啦~

    还不清楚的话,可以用搜索引擎搜索一下 Qt 资源文件 学习更加详细的用法~

    来试试图片弹幕吧~

    除了GIF 有时一些好玩的图片也是你希望能够放上屏幕让它飞过的,比如一些图片表情(手动滑稽)

    这时就可以用 QPixmap来加载图片了,与上文中的 QMovie类似,QPixmap在构造函数中传入图片资源即可。

    初始化后再用 QLabel中的setPixmap(const QPixmap & )函数即可

    为了让图片显示完全,设置弹幕窗体大小和图片大小一致即可,如果需要缩放 QPixmap 也有提供scaled 函数给你使用。这个函数参数比较多,快快选中它 按下F1 进行学习吧~

    小 D : 感觉从上到下 说明越来越水了。。。(#‵′)凸

    杰洛君 : 冤枉冤枉!重点在下面呢~

    来试试图片弹幕吧~(重点)

    制作一个南小鸟动画~

    相信看过LoveLive的同学都知道一个非常经典的表情

    0_1457010642644_LLleft.png

    它一般从画面的左下角缓慢/快速探出头,停留在左下角一段时间,再缓慢/快速收回去

    这个如何实现呢?

    没错,还是用Qt 的动画类

    只不过这次不同,这里应该有三个动画 探出 停留 收回

    而且这三个动画是顺序执行的,于是这里 杰洛君 就用了

    QSequentialAnimationGroup类

    这个类名中我们看到了Sequential 说明动画组中 动画的执行顺序是线性的,也就是有顺序,和加入组中的顺序有关,只要动画顺序加入这个组就可以了~

            group = new QSequentialAnimationGroup(this);
      
            anim1=new QPropertyAnimation(this, "pos");
            anim1->setDuration(100);
            anim1->setStartValue(QPoint(this->getPosX(),this->getPosY()));
            anim1->setEndValue(QPoint(this->getPosX(),this->getPosY()));
            anim1->setEasingCurve(QEasingCurve::Linear);
      
            anim2=new QPropertyAnimation(this, "pos");
            anim2->setDuration(200);
            anim2->setStartValue(QPoint(this->getPosX(),this->getPosY()));
            anim2->setEndValue(QPoint(0, rect.height()-pic.size().rheight()));
            anim2->setEasingCurve(QEasingCurve::Linear);
      
            anim3=new QPropertyAnimation(this, "pos");
            anim3->setDuration(500);
            anim3->setStartValue(QPoint(0, rect.height()-pic.size().rheight()));
            anim3->setEndValue(QPoint(0, rect.height()-pic.size().rheight()));
            anim3->setEasingCurve(QEasingCurve::Linear);
      
            anim4=new QPropertyAnimation(this, "pos");
            anim4->setDuration(200);
            anim4->setEndValue(QPoint(this->getPosX(),this->getPosY()));
            anim4->setStartValue(QPoint(0, rect.height()-pic.size().rheight()));
            anim4->setEasingCurve(QEasingCurve::Linear);
      
            group->addAnimation(anim1);
            group->addAnimation(anim2);
            group->addAnimation(anim3);
            group->addAnimation(anim4);
    

    上面的代码也是非常耿直的~

    (p.s. 既然有SequentialGroup 自然也会有 QParallelAnimationGroup ,感兴趣的小伙伴可以了解一下哦~)

    后续

    今天带大家实现了各种各样奇葩弹幕呢~

    那么弹幕的介绍大概就到这里,接下来会讲解主窗体的建立和设置。

    看到未来道阻且长,杰洛君不禁一声长叹~(╯3╰) 哎~

    不过我不会就这样轻易地狗带的!加油,记录自己做过的每一个程序~


  • 网站研运

    @杰洛飞 谢谢分享!你的博客让我找到了如何在论坛中播放gif的方法!真是帮助太大了。


  • 网站研运

    @杰洛飞 说:

    QPropertyAnimation

    这个是以前用过的类,我以前还用它来制作角色移动的二维动画呢。
    链接在这里



  • @jcy 嗯嗯,我发现直接发gif是不能播放的,只能用外链的形式~谢谢你给的链接分享啦~


 

最近的回复

  • 0_1524629331614_好棒的.jpg
    各位好哦,最近我又开始进行我们论坛的再次研发了。这一次呢,我们为我们的社区添加了一个重大的功能,那就是Live2D哦。借助Live2D在Web端的技术,我们成功地把看板娘蕾姆请到我们论坛了呢。
    0_1524634368387_d2c83fb3-71fc-414e-ab02-334a1d6c6007-image.png
    不要小看她,她可以陪你们说话、也可以一个人自言自语,有时候还会爆发出中二的词汇呢;
    更多的情况下,蕾姆很温柔,早上她能向你说声早上好,中午她能向你提出建议不要太累太辛苦了,晚上也能提醒你不要熬夜。自从有了蕾姆后,我们的精神也爽了,心情也好了,自己也变得萌萌哒了。

    好了,技术方面呢,还是要感谢 @维基萌 的二次作品,虽然最初Live2D是由这家公司制作的,但是有庞大的社区力量,推动了这款产品的普及,于是乎我们也可以拿Live2D来用了呢。
    此外,得益于最近兴起的聊天机器人,我们也成功地将聊天机器人的功能整合到我们的论坛里了,目前聊天机器人很棒,感觉就像真的蕾姆一样呢。

    归纳总结,我们使用到了以下的内容:

    NodeBB框架
    Live2D
    Turing123

    萌梦社区以后会给大家带来更多更好的内容!

    阅读更多
  • 亮点就是对比的地方比较清晰。我希望另外一个beyond compare软件出现。

    阅读更多
  • 在deepin上,如何使用git托管代码,这里推荐一个工具 SmartGit

    在深度商店搜索[SmartGit],安装

    0_1524572222379_深度截图_deepin-appstore_20180424191503.png

    第一次打开,需要配置,这里输入自己的git用户名和邮箱,我使用的是码云

    0_1524572276100_深度截图_选择区域_20180424191602.png

    创建本地仓库

    菜单[Respository]-[Clone]

    0_1524572487937_深度截图_选择区域_20180424202102.png

    输入git仓库地址,下一步,下一步,

    0_1524572568462_深度截图_选择区域_20180424202236.png

    选择本地地址,Finish,这样我们的代码就从git下载到本地了

    0_1524572342889_深度截图_选择区域_20180424201348.png

    上传

    我创建了一个测试文本

    0_1524572727847_深度截图_选择区域_20180424202521.png

    右键这个文件,选择Commit

    0_1524572789341_深度截图_选择区域_20180424202623.png

    点击Commit后

    0_1524572829048_深度截图_选择区域_20180424202644.png

    右键这一条,选择Push Commit,如果提示输入账户就填码云的账号

    登录网站,检查,成功了

    0_1524573043120_深度截图_选择区域_20180424203030.png

    新建一个文档,这次提交时候选择Commit & Push,可以直接提交到网站

    阅读更多
  • 告诉你一个方法,Slider位于MouseArea的上层,然后除了Slider的hover和press事件,其余的事件都走MouseArea。怎么做到?可以在事件中设置MouseArea的visible属性。
    还有一种做法就是Slider自定义背景background,里面包含了MouseArea。

    阅读更多

关注我们

微博
QQ群











与 萌梦社区 的连接断开,我们正在尝试重连,请耐心等待