Flutter——实现网易云音乐的渐进式卡片切换
介绍
此功能为 仿网易云音乐App的一部分 :
仿网易云音乐App
预览图
我们可以看到页面下方切换的卡片效果
分析
首先动画以 x轴分为两部分 : 左侧文字 和 右侧图片
右侧图片以 z轴 分为 : 上、下
仔细观察,可以看到它的动画流程大致如下:
上层显示的是当前图片,下层显示的时下一张
1、左侧文字淡入淡出切换
2、右侧图片的上层,与左侧文字同时淡出
3、之后下层图片上移到 上层图片的位置
4、移动完成后,淡入一张下层图片,
5、于此同时新的文字淡入
实现
首先我们定义一个类
class MusicCalendar extends WidgetState with SingleTickerProviderStateMixin{}
因为这个动画比较复杂,实际开发时用了provider,
代码中可能会看到musicCalendarVM, 它主要是用来持有和控制状态及一些数据
我尽量把里面的代码移出来
MusicCalendar
当页面初始完成后,我们会执行init()这个方法:
///这个方法后面还会见到,它的执行会使动画开始,即淡出-移动-淡入///在这里讲,是让你对流程大概有了解,方便理解后面的代码init(){if(streamSubscription.isPaused){streamSubscription.resume();}}
首先创建一些变量
//淡出/淡入动画AnimationController fadeController;Animation fadeAnim;//图片外层是 stack,所以下面两个变量用于定位//我们根据动画的进度配合下面的两个变量,就可以达到移动图片的效果//具体可以看下面的实现double aboveRightMax;double aboveBottomMax;
我们再看一下布局,代码较多,我把说明写在注释里
去掉一些不必要的代码//root layoutContainer(child: Stack(children: <Widget>[///date 这个不用管,跟咱们做的没关系Positioned(top: getWidthPx(10),child: Text('后天',style: TextStyle(fontSize: getSp(28),color: Colors.black,fontWeight: FontWeight.bold),),),///这里是左侧 文字部分,它要做的动画 就是淡入和淡出Positioned(top: getWidthPx(60),child: FadeTransition( //使用flutter 提供的fade组件opacity: musicCalendarVM.fadeAnim,//这里与我们的 animation 绑定child: Container(width: getWidthPx(430),child: Text('${creatives[musicCalendarVM.currentIndex].uiElement.mainTitle.title}',style: TextStyle(color: Colors.grey,fontSize: getSp(32)),maxLines: 2,),),),),///这里是右侧图片区域Positioned(top: getWidthPx(30),right: 0,child: imageSwitcher(),),],),);
我们来看一下 这个方法:imageSwitcher()
Widget imageSwitcher(){return Container(//这里我们限定一下右侧图片区域的整体大小 //注意,图片要小于这个值width: getWidthPx(150),height: getWidthPx(150),child: Stack(children: <Widget>[///below///这是下面那张图片,初始为右下角Positioned(right: 0,bottom: 0,//Opacity用于控制图片的淡入淡出child: Opacity(opacity: musicCalendarVM.opacity,child: ShowImageUtil.showImageWithDefaultError(creatives[musicCalendarVM.currentIndex<=creatives.length-2?musicCalendarVM.currentIndex+1 : 0].uiElement.image.imageUrl, getWidthPx(130), getWidthPx(130),borderRadius: getHeightPx(10)),),),///fake///这里我额外放置了一张假的图片,下面细说Positioned(right: musicCalendarVM.right,bottom: musicCalendarVM.bottom,child: Visibility(visible:musicCalendarVM.showFake ,child: ShowImageUtil.showImageWithDefaultError(creatives[musicCalendarVM.fakeIndex].uiElement.image.imageUrl, getWidthPx(130), getWidthPx(130),borderRadius: getHeightPx(10)),),),///above///上面那张图片初始为左上角Positioned(left: 0,top: 0,
// right: 0,
// bottom: 0,///这里用FadeTransition 控制淡入/淡出child: FadeTransition(opacity: musicCalendarVM.fadeAnim,//与 animation绑定,与之前的 文字动画一样child: ShowImageUtil.showImageWithDefaultError(creatives[musicCalendarVM.currentIndex].uiElement.image.imageUrl, getWidthPx(130), getWidthPx(130),borderRadius: getHeightPx(10)),),),],),);}
首先我们可以看到,这个stack中有3个widget:
下方图片 代号below
上方图片 代号above
假图片 代号fake
below & above widget
我们先来看一下 below 和 above,他们虽然都是做淡入和淡出效果,但是用的组件不一样。
below 使用的是Opacity
above 使用的是FadeTransition 与文字一样
这里之所以不同,是因为两者执行的实际和动画方向不同,所以未共用一个动画。above和文字一样,由animation控制,我们不用管它,来看一下below吧。
它的 opacity属性与musicCalendarVM.opacity绑定,而这个opacity属性的刷新主要涉及两个方法
回顾一下它要做的效果,淡入(实际移动由fake来做,我们后面讲)
void showBelow(){///这里我们每20毫秒更新一下不透明度Timer timer = Timer.periodic(Duration(milliseconds: 20), (timer){if(opacity >= 1.0){///当不透明度>=1.0时,我们结束timertimer.cancel();//这个时候也就意味着,below淡入完成,//我们可以将上层图片也淡入(这个淡入的是 above)///渐显above和titlefadeController.reverse().whenComplete((){///当above淡入后,隐藏fakeshowFake = false; notifyListeners();///实际上在below淡入前,fake做了移动,移动到左上角了(冒充 above)///因此,above完成淡入后,我们要重置fake位置,显示fake(冒充 below)/// 嘿嘿right = 0; bottom = 0;///当然 fake显示的图片也应该是上层图片的下一张fakeIndex = currentIndex <= creatives.length-2 ? currentIndex+1:0;showFake = true;///真正的 below又变成全透明了opacity = 0;notifyListeners();});return;}//每20秒 不透明度+0.1opacity =(opacity+0.1).clamp(0.0, 1.0);notifyListeners();});}
我们来看一下哪里调用了showBelow()
如果你不太熟悉Provider或者bedrock框架的话,这里简单来讲,
就是页面初试完后,开始执行clock监听并执行相应的动画操作。///开头的那个方法init(){if(streamSubscription.isPaused){streamSubscription.resume();}}final Duration interval = Duration(seconds: 5);///每5秒切换一次卡片MusicCalendarVM(this.block3, this.creatives,){clock = Stream.periodic(interval,(index){});///咱们只看这里的方法streamSubscription = clock.listen((i) async{if(destroy)return;if(fadeController.status == AnimationStatus.completed|| fadeController.status == AnimationStatus.dismissed){///当上层动画淡出完成后///title和 above 渐隐,同时fake上移fadeController.forward().whenComplete((){//这里的right和bottom与fake绑定,我们稍后介绍//实际上这里的right和bottom理论上已经等于右边的值//但实际上还是会出现偏差,这里进行校准right = aboveRightMax;bottom = aboveBottomMax;notifyListeners();///更新index =》 dataList的indexincrementIndex();///插入新的below///调用了我们上的方法showBelow();//fadeController.reverse();});}});streamSubscription.pause();}
fake widget
至此 above和below就介绍完了,我们来说一下 fake,
///fakePositioned(right: musicCalendarVM.right,bottom: musicCalendarVM.bottom,child: Visibility(visible:musicCalendarVM.showFake ,child: ShowImageUtil.showImageWithDefaultError(creatives[musicCalendarVM.fakeIndex].uiElement.image.imageUrl, getWidthPx(130), getWidthPx(130),borderRadius: getHeightPx(10)),),),
fake的工作流程介绍:
当页面初始时:
above图片为第一张,fake和below为第二张
above在右上角,below和fake在右下角,且fake遮挡below(实际below为不可见)
当动画开始时:
above淡出,于此同时fake滑动到左上角。
当淡出动画结束后,我们将 above、below显示的图片index+1, 这里below还是不可见的。
然后,我们将below淡入(它始终在右下角),同时above也是淡入
(因为速度极快,且与fake重合,你是看不出它的淡入的)
操作完成后:
我们将fake(在左上)隐藏,并调整它的right和bottom为0,这样又到了右下,
随后再显示它,这样又遮挡了below,
至此一个轮回就结束了
我们大致看一下fake的主要属性:
//控制它的位置
double right = 0; double bottom = 0;
showFake//控制fake的隐藏,在上面的方法中有出现过
更新这两个属性的位置在:
void updatePosition(){right = aboveRightMax * (1-fadeAnim.value);bottom = aboveBottomMax * (1-fadeAnim.value);notifyListeners();}
updatePosition()方法则在 animationListener中调用
musicCalendarVM.fadeController.addListener(musicCalendarVM.animationListener);animationListener(){if(fadeController.status == AnimationStatus.forward){if(!showFake) showFake = true;updatePosition();}}
到了这里,整个动画效果就实现了,如果有点乱,可以在demo中对照源码和真机效果来理解。
谢谢大家的阅读,欢迎指出不足支出
Flutter——实现网易云音乐的渐进式卡片切换相关推荐
- Flutter 仿网易云音乐App
图 首页 歌曲播放和卡片切换 如正版一样,歌曲播放进度在播放/暂停 按钮的边框显示(页面下方,由黑变红) 没登录的话,一般只能听12秒 目前只做了 模块('超带感的说唱精选')的点播功能, 其他地方可 ...
- Flutter仿网易云音乐 ---基础准备
源码地址:https://gitee.com/admin_327355/music 资源.工具准备 1.接口:网易云音乐 NodeJS 版 API 2.UI:Android apk通过压缩文件解压后获 ...
- flutter 仿网易云音乐(2)
gitee项目地址 github项目地址 如果喜欢请点点star 这里今天说一下项目的播放器选择 查看了一下pub.dev 上主流的播放器插件主要有audioplayers和just_audi ...
- flutter 仿网易云音乐(3)
继续深入的将一下just_audio和audio_service搭配怎么在也没啥上使用 这里主要是创建了一个全局管理page_manager.dart 首先整理一下需求,我们在页面上需要展示到播放列表 ...
- Flutter版本 网易云音乐
接口地址NeteaseCloudMusicApi 项目地址 #####先上效果图 ##发现页 ####每日推荐 ####歌单广场 ####排行榜 ####歌单详情 ##播客页 ####播客详情页 ## ...
- 仿网易云音乐的滑动冲突处理效果
系列文章 此功能属于仿网易云音乐App的一部分 仿网易云音乐App(基础版) 实现网易云音乐的渐进式卡片切换 Flutter 自定义View--仿同花顺自选股列表 Flutter自定义View--仿高 ...
- Day08_vant实现_网易云音乐案例
Day08_vant实现_网易云音乐案例 文章目录 Day08_vant实现_网易云音乐案例 知识点自测 铺垫(自学) 本地接口项目部署 今日学习目标 1. 案例-网易云音乐 1.0 网易云音乐-本地 ...
- vue2中vant实现网易云音乐案例-附带所有源码
vue2中vant实现网易云音乐案例-附带所有源码 前言 学习笔记以及源码下载gitee: https://gitee.com/xingyueqianduan/vantmsicdemo 下载下来的内容 ...
- selenium切换iframe框架案例——翻页爬取网易云音乐歌单作者和名称
翻页爬取网易云音乐歌单作者和标题 案例目的: 通过翻页selenium操作网易云音乐,介绍如何切换iframe框架以及如何使用selenium定位数据所在的节点. 代码功能: 输入下载的数据页数,自动 ...
最新文章
- 构造代码块,初始代码块和静态代码块的执行顺序
- gsoap 学习 1-自己定义接口生成头文件
- 如何在面试中介绍自己的项目经验,90%的人都做错了!
- 伯努利数与自然数幂和
- leetcode 69. x 的平方根 思考分析
- CSS之Multi-columns的跨列
- 垃圾回收算法与实现系列-锁在Java虚拟机中的实现和优化
- Spark的分布式存储系统BlockManager全解析
- 【机器学习】监督学习--(回归)多项式回归
- java删除多选项_java – 选项菜单默认灰色边框删除
- 用YAML构建数据测试DAO层
- cocos2d里面如何实现mvc系列
- linux基础命令(一)
- 简单的音频转文字的转换方法
- 华为篇-嵌入式公司待遇盘点-第二期
- JS所有国家 数组与对象
- 金三银四马-sb java面试突击资源
- ThreadPoolExecutor中addWorker,continue retry和break retry是什么意思
- 电信宽带连接不上无线可连接服务器,电信宽带连接为什么无线连接上宽带连接连不上...
- php这个符号怎么打,怎么打出圈2符号
热门文章
- hph IIS配置问题
- Python使用xlsxwriter实现“将整个工作表打印在一页”
- IOS OpenGL ES GPUImage 柔光混合 GPUImageSoftLightBlendFilter
- Clean Code读书笔记
- VM:VMware虚拟机内创建第一个Win10系统(ISO镜像)的之详细攻略(图文教程)
- php jq截图插件,jQuery jcrop插件截图使用方法_jquery
- 负载均衡之Keepalived
- 普通的Shader-水涟漪效果
- 【编程】余 弦 曲 线
- JS实现数学排列组合公式