Qt实现QQ音乐轮播图

由于项目中需要使用到类似轮播图这样的东西,百度之后发现并没有效果不错的案例,于是仿照QQ音乐的轮播图写了一个

效果如下

和QQ音乐的基本没什么差别

这里记录一下需要用到的模块QParallelAnimationGroup、QPropertyAnimation、QGraphicsOpacityEffect

基本实现原理是,通过并行动画组QParallelAnimationGroup添加QPropertyAnimationgeometry属性作为动画,其中每次切换(左移为例)geometry属性的动画有四个,包括坐标的图片消失,中间图片左移,右边的图片左移至中间,隐藏的右边图片移至右边
这其中还添加了透明度动画实现渐变效果,一次切换(左移为例)需要用到的透明度动画(QGraphicsOpacityEffect中的opacity属性)包括两个 左侧图片消失 透明度从1到0,右侧隐藏图片出现,透明度从0到1。一次切换需要将这些动画全都添加到并行动画组中,每次结束动画需要将并行动画组中的动画全部清空,下一次切换时再添加

  • 这里贴上左移示例的动画属性示例(右移也差不多)

        QRect preStartRect = this->_switchLabelList[c_preIndex]->geometry();
        QRect preEndRect = QRect(QPoint(this->_switchLabelList[_index]->x(), this->_switchLabelList[c_preIndex]->y()), this->_switchLabelList[c_preIndex]->size());

        QRect cStartRect = this->_switchLabelList[_index]->geometry();
        QRect cEndRect = this->_switchLabelList[c_preIndex]->geometry();

        QRect nextStartRect = this->_switchLabelList[c_nextIndex]->geometry();
        QRect nextEndRect = this->_switchLabelList[_index]->geometry();

        QRect d_nextStartRect = QRect(QPoint(this->_switchLabelList[_index]->x() + (this->_switchLabelList[_index]->width() - this->_switchLabelList[c_nextIndex]->width()), this->_switchLabelList[c_nextIndex]->y()), this->_switchLabelList[c_nextIndex]->size());
        QRect d_nextEndRect = this->_switchLabelList[c_nextIndex]->geometry();

        QPropertyAnimation* preAnimation = new QPropertyAnimation(this->_switchLabelList[c_preIndex], "geometry", this);
        QPropertyAnimation* preOpacityAnimation = new QPropertyAnimation(this->_labelOpacityList[c_preIndex], "opacity", this);
        QPropertyAnimation* indexAnimation = new QPropertyAnimation(this->_switchLabelList[_index], "geometry", this);
        QPropertyAnimation* nextAnimation = new QPropertyAnimation(this->_switchLabelList[c_nextIndex], "geometry", this);
        QPropertyAnimation* d_nextAnimation = new QPropertyAnimation(this->_switchLabelList[d_nextIndex], "geometry", this);
        QPropertyAnimation* d_nextOpacityAnimation = new QPropertyAnimation(this->_labelOpacityList[d_nextIndex], "opacity", this);

        preAnimation->setStartValue(preStartRect);
        preAnimation->setEndValue(preEndRect);
        preAnimation->setEasingCurve(this->_mEasingCurve);
        preAnimation->setDuration(400);

        preOpacityAnimation->setStartValue(1.00);
        preOpacityAnimation->setEndValue(0.2);
        preOpacityAnimation->setEasingCurve(this->_mEasingCurve);
        preOpacityAnimation->setDuration(400);

        indexAnimation->setStartValue(cStartRect);
        indexAnimation->setEndValue(cEndRect);
        indexAnimation->setEasingCurve(this->_mEasingCurve);
        indexAnimation->setDuration(400);

        nextAnimation->setStartValue(nextStartRect);
        nextAnimation->setEndValue(nextEndRect);
        nextAnimation->setEasingCurve(this->_mEasingCurve);
        nextAnimation->setDuration(400);

        d_nextAnimation->setStartValue(d_nextStartRect);
        d_nextAnimation->setEndValue(d_nextEndRect);
        d_nextAnimation->setEasingCurve(this->_mEasingCurve);
        d_nextAnimation->setDuration(400);

        d_nextOpacityAnimation->setStartValue(0.2);
        d_nextOpacityAnimation->setEndValue(1.0);
        d_nextOpacityAnimation->setEasingCurve(this->_mEasingCurve);
        d_nextOpacityAnimation->setDuration(400);

        this->_mAnimationGroup->addAnimation(preAnimation);
        this->_mAnimationGroup->addAnimation(indexAnimation);
        this->_mAnimationGroup->addAnimation(nextAnimation);
        this->_mAnimationGroup->addAnimation(d_nextAnimation);
        this->_mAnimationGroup->addAnimation(preOpacityAnimation);
        this->_mAnimationGroup->addAnimation(d_nextOpacityAnimation);
        ui->leftSwitchButton->setEnabled(false);
        ui->rightSwitchButton->setEnabled(false);
        this->_mAnimationGroup->start();

原文地址:https://www.cnblogs.com/During/p/12523494.html

时间: 2024-11-11 13:32:30

Qt实现QQ音乐轮播图的相关文章

vue移动音乐app开发学习(三):轮播图组件的开发

本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一:创建轮播图组件slider.vue 1:在src/base下新建base文件夹,然后创建silder.vue: <template> <div class="slider" ref="slider"> <div class="sl

Vue实现音乐播放器(七):轮播图组件(二)

轮播图组件 <template> <div class="slider" ref="slider"> <div class="slider-group" ref="sliderGroup"> //这里的<slot></slot>插槽表示里面的内容可以由引用这个轮播图组件的推荐组件来插入 只需要在<slider></slider>标签里面插入内容

Html5如何快速在页面中写出多个轮播图效果

我们在做项目的过程中,有时候客户需求要求你在同一个页面中,写几个不同样式的轮播图效果,那么如何快速实现呢?(要知道若果你每个轮播图都要用原生javascript写的话,会很麻烦,代码也不够简洁) 这里我们就可以借助插件来实现这一功能,swiper.js就是一个专门处理轮播图效果的js库,下面举例来说明: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=

从零开始,搭建博客系统MVC5+EF6搭建框架(5),博客详情页、留言、轮播图管理、右侧统计博文

一.博客系统进度回顾 上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效果 2.2实现控制器在前台控制器中创建一个Blog的控制器,主要是展示博客分类以及详情页 Action详情页实现: 1 /// <summary> 2 /// 详情页 3 /// </summary> 4 /// <param name="id"><

微信浏览器轮播图的使用经验

最近在搞微信,不得不吐槽下微信的网页的开发不比考虑那么多的网页的兼容性,因为微信一致使用的是QQ浏览器内核,但是不得不说,这个浏览器很操蛋... 在移动端的轮播图有很多种,我们的一个大牛使用的是unslider.js.手势事件(touch事件)用的是jquery.event.swipe.(曾经我使用过zepto提供的touch.js,但是在微信浏览器里超难用,还不如toucher.js.在其他地方是否好用,就不造了.) 网上说unslider.js可以自动响应容器大小布局,这个确实存在.但是在微

iOS开发之 用第三方类库实现轮播图

在github上面有很多的第三方类库,大大节约了大家的开发时间 下载地址:https://github.com/gsdios/SDCycleScrollView 现已支持cocoapods导入:pod 'SDCycleScrollView','~> 1.61' 效果 具体实现代码 #import "ViewController.h" #import "SDCycleScrollView.h" @interface ViewController () <S

iOS用第三方类库实现轮播图

在github上面有很多的第三方类库,大大节约了大家的开发时间 下载地址:https://github.com/gsdios/SDCycleScrollView 现已支持cocoapods导入:pod 'SDCycleScrollView','~> 1.61' 效果 具体实现代码 #import "ViewController.h" #import "SDCycleScrollView.h" @interface ViewController () <S

移动端 触屏轮播图(完善版)

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=320,user-scalable=no" /> <title>ios 轮播图简版<