Android仿网易云音乐播放页面 背景虚化碟片效果
2024-06-16 05:39:37
1、效果图
仿网易云音乐播放页面，主要有4个关键点：
- 背景虚化。获取音乐的专辑封面，将此图片作为背景图，并进行模糊虚化处理
- 碟片合成。获取音乐的专辑封面，和黑色碟片图片进行合成
- 碟片旋转。音乐播放时，碟片顺时针360度旋转；音乐暂停，旋转暂停
- 指针旋转。音乐播放时，指针放到碟片上；音乐暂停，指针抬起
2、背景虚化
工具类
public class BlurUtil {private static final String TAG = BlurUtil.class.getSimpleName();/*** 对图片进行毛玻璃化* @param sentBitmap 位图* @param radius 虚化程度* @param canReuseInBitmap 是否重用* @return 位图*/public static Bitmap doBlur(Bitmap sentBitmap, int radius, boolean canReuseInBitmap) {Bitmap bitmap;if (canReuseInBitmap) {bitmap = sentBitmap;} else {bitmap = sentBitmap.copy(sentBitmap.getConfig(), true);}if (radius < 1) {return (null);}int w = bitmap.getWidth();int h = bitmap.getHeight();int[] pix = new int[w * h];bitmap.getPixels(pix, 0, w, 0, 0, w, h);int wm = w - 1;int hm = h - 1;int wh = w * h;int div = radius + radius + 1;int r[] = new int[wh];int g[] = new int[wh];int b[] = new int[wh];int rsum, gsum, bsum, x, y, i, p, yp, yi, yw;int vmin[] = new int[Math.max(w, h)];int divsum = (div + 1) >> 1;divsum *= divsum;int dv[] = new int[256 * divsum];for (i = 0; i < 256 * divsum; i++) {dv[i] = (i / divsum);}yw = yi = 0;int[][] stack = new int[div][3];int stackpointer;int stackstart;int[] sir;int rbs;int r1 = radius + 1;int routsum, goutsum, boutsum;int rinsum, ginsum, binsum;for (y = 0; y < h; y++) {rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;for (i = -radius; i <= radius; i++) {p = pix[yi + Math.min(wm, Math.max(i, 0))];sir = stack[i + radius];sir[0] = (p & 0xff0000) >> 16;sir[1] = (p & 0x00ff00) >> 8;sir[2] = (p & 0x0000ff);rbs = r1 - Math.abs(i);rsum += sir[0] * rbs;gsum += sir[1] * rbs;bsum += sir[2] * rbs;if (i > 0) {rinsum += sir[0];ginsum += sir[1];binsum += sir[2];} else {routsum += sir[0];goutsum += sir[1];boutsum += sir[2];}}stackpointer = radius;for (x = 0; x < w; x++) {r[yi] = dv[rsum];g[yi] = dv[gsum];b[yi] = dv[bsum];rsum -= routsum;gsum -= goutsum;bsum -= boutsum;stackstart = stackpointer - radius + div;sir = stack[stackstart % div];routsum -= sir[0];goutsum -= sir[1];boutsum -= sir[2];if (y == 0) {vmin[x] = Math.min(x + radius + 1, wm);}p = pix[yw + vmin[x]];sir[0] = (p & 0xff0000) >> 16;sir[1] = (p & 0x00ff00) >> 8;sir[2] = (p & 0x0000ff);rinsum += sir[0];ginsum += sir[1];binsum += sir[2];rsum += rinsum;gsum += ginsum;bsum += binsum;stackpointer = (stackpointer + 1) % div;sir = stack[(stackpointer) % div];routsum += sir[0];goutsum += sir[1];boutsum += sir[2];rinsum -= sir[0];ginsum -= sir[1];binsum -= sir[2];yi++;}yw += w;}for (x = 0; x < w; x++) {rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;yp = -radius * w;for (i = -radius; i <= radius; i++) {yi = Math.max(0, yp) + x;sir = stack[i + radius];sir[0] = r[yi];sir[1] = g[yi];sir[2] = b[yi];rbs = r1 - Math.abs(i);rsum += r[yi] * rbs;gsum += g[yi] * rbs;bsum += b[yi] * rbs;if (i > 0) {rinsum += sir[0];ginsum += sir[1];binsum += sir[2];} else {routsum += sir[0];goutsum += sir[1];boutsum += sir[2];}if (i < hm) {yp += w;}}yi = x;stackpointer = radius;for (y = 0; y < h; y++) {// Preserve alpha channel: ( 0xff000000 & pix[yi] )pix[yi] = (0xff000000 & pix[yi]) | (dv[rsum] << 16) | (dv[gsum] << 8) | dv[bsum];rsum -= routsum;gsum -= goutsum;bsum -= boutsum;stackstart = stackpointer - radius + div;sir = stack[stackstart % div];routsum -= sir[0];goutsum -= sir[1];boutsum -= sir[2];if (x == 0) {vmin[y] = Math.min(y + r1, hm) * w;}p = x + vmin[y];sir[0] = r[p];sir[1] = g[p];sir[2] = b[p];rinsum += sir[0];ginsum += sir[1];binsum += sir[2];rsum += rinsum;gsum += ginsum;bsum += binsum;stackpointer = (stackpointer + 1) % div;sir = stack[stackpointer];routsum += sir[0];goutsum += sir[1];boutsum += sir[2];rinsum -= sir[0];ginsum -= sir[1];binsum -= sir[2];yi += w;}}bitmap.setPixels(pix, 0, w, 0, 0, w, h);// print("虚化后 ",bitmap);return (bitmap);}/*** 对图片进行毛玻璃化* @param originBitmap 位图* @param scaleRatio 缩放比率* @param blurRadius 毛玻璃化比率，虚化程度* @return 位图*/public static Bitmap doBlur(Bitmap originBitmap, int scaleRatio, int blurRadius){
// print("原图：：",originBitmap);Bitmap scaledBitmap = Bitmap.createScaledBitmap(originBitmap,originBitmap.getWidth() / scaleRatio,originBitmap.getHeight() / scaleRatio,false);Bitmap blurBitmap = doBlur(scaledBitmap, blurRadius, false);scaledBitmap.recycle();return blurBitmap;}/*** 对图片进行 毛玻璃化，虚化* @param originBitmap 位图* @param width 缩放后的期望宽度* @param height 缩放后的期望高度* @param blurRadius 虚化程度* @return 位图*/public static Bitmap doBlur(Bitmap originBitmap,int width,int height,int blurRadius){Bitmap thumbnail = ThumbnailUtils.extractThumbnail(originBitmap, width, height);Bitmap blurBitmap = doBlur(thumbnail, blurRadius, true);thumbnail.recycle();return blurBitmap;}
}使用示例
//直接调用BlurUtil中的doBlur方法。3个参数在上述工具类代码中有详细注释
Bitmap bgbm = BlurUtil.doBlur(music.thumbBitmap,10,5);3、碟片合成
编程思路
如上图所示，碟片合成，其实是如下3个Bitmap的合成：
- 自定义的透明Bitmap，画到一个圆形画布上
- 专辑图片Bitmap
- 碟片底图Bitmap
首先用圆形画布画出一个圆盘，然后将专辑图片和这个圆形画布合并，最后再将碟片底图合并上去。
代码实现
public class MergeImage {/*** 合成碟片图片** @param discBitmap 黑胶碟片底图* @param albumBitmap 专辑封面图* @return*/public static Bitmap mergeThumbnailBitmap(Bitmap discBitmap, Bitmap albumBitmap) {//获得黑胶碟片底图宽和高int w = discBitmap.getWidth();int h = discBitmap.getHeight();//根据黑胶碟片底图的宽和高，对专辑图片进行缩放albumBitmap = Bitmap.createScaledBitmap(albumBitmap, w, h, true);Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);Canvas canvas = new Canvas(bm);Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);//这里需要先画出一个圆canvas.drawCircle(w / 2, h / 2, w / 2 - 20, paint);//圆画好之后将画笔重置一下paint.reset();//设置图像合成模式，该模式为只在源图像和目标图像相交的地方绘制源图像paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));canvas.drawBitmap(albumBitmap, 0, 0, paint);paint.reset();canvas.drawBitmap(discBitmap, 0, 0, null);return bm;}
}调用示例
Bitmap bm = MergeImage.mergeThumbnailBitmap(discBitmap,thumbBitmap);
musicAlbumImg.setImageBitmap(bm);4、碟片旋转
碟片旋转用的是ObjectAnimator类。
//第一个参数是需要旋转的View，// 第二个是动画类型（包括alpha/rotation/scale/translate），// 第三个参数是旋转开始时的角度//第四个参数是旋转结束时的角度animator = ObjectAnimator.ofFloat(musicAlbumImg, "rotation", 0f, 360.0f);animator.setDuration(10000);animator.setInterpolator(new LinearInterpolator());//匀速animator.setRepeatCount(-1);//设置动画重复次数（-1代表一直转）animator.setRepeatMode(ValueAnimator.RESTART);//动画重复模式animator.start();ObjectAnimator提供了动画的启动、暂停和恢复方法，分别是
- start()
- pause()
- resume()
也就是说在我们需要暂停动画时，比如音乐按下暂停键，此时可以调用如下方法，暂停碟片旋转
animator.pause();当再次按下播放键，继续播放时，可调用如下方法，继续碟片旋转
animator.resume();5、指针旋转
参考第4小节，留给各位读者自己实现。
Android仿网易云音乐播放页面 背景虚化碟片效果相关推荐
- Android仿网易云音乐播放界面
概述 网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅.这里抛砖引玉,原文地址:http://www.jianshu.com/p/cb54990219d9 首先来 ...
- java4android网易云,Android仿网易云音乐播放界面
概述 网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅. 首先来看一下网易的播放效果. 要实现上面的功能,我们需要对界面进行一个拆分,拆分后大概包含如下结构: 主 ...
- 音乐歌单Android,仿网易云音乐歌单界面 Header滑动效果
这是我的第一篇博客,做Android 开发2年多以来,曾经也有过写一些技术博客的想法,但因为有时候因为懒,有时候工作忙加班多而力不从心,所以迟迟没有开始写自己的博客.最近正好工作不忙,想写一些博客,记 ...
- 移动应用开发——uni-app框架 仿网易云音乐播放器学习心得
目录 一.uni-app框架介绍 1.什么是 uni-app 2.为什么要选择uni-app 3.uni-app 统一规范 4.uni-app功能框架 二.开发工具与项目创建 1.开发工具 2.项目创 ...
- Android 仿网易云音乐App
因为工作实在是有点忙,所以还没完成成品,就先挂到GitHub上.日后慢慢更新啦. 项目地址 GitHub地址,希望大佬们点个star GitHub仿网易云音乐App 效果展示 注:因为视频太模糊,每日 ...
- android仿网易云音乐、即时通讯、bilibili、沙漏动画等源码
Android精选源码 android仿网易云音乐安卓版源码 android开源即时通讯,实时传讯IM源码 android类似淘宝的商品详情页源码 android面向.艺术家.设计师等创意类作品源码 ...
- android 网易云音乐上滑动画,Android 仿网易云音乐 音轨跳动效果
网易云音乐的Loading效果,大家应该也比较熟悉了,效果是一个红色音轨不断跳动的效果,一般用于Loading等待时填充使用.本篇来自定义这个效果. Android 仿网易云音乐 音轨跳动View.g ...
- 仿网易云音乐播放界面
前言 网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅.笔者出于学习与挑战的想法,思考播放界面背后的实现原理,并写了一个小程序. 笔者尽可能地去模仿官方的视觉.交 ...
- 音乐歌单Android,[CloudReader]Android - 仿网易云音乐歌单详情页
前段时间模仿网易云音乐UI使用DataBinding做了一个App:CloudReader,今天把其中的类似歌单详情页单独拿出来说一下,我觉得其中还是有些干货的,关联到的知识点还比较有价值,而且也有很 ...
最新文章
- KNN学习之图像分类与KNN原理
- 同步、异步；阻塞、非阻塞
- dedecms arclist中截取字符串的方法
- 医疗软件产品核心算法部分说明--转载截取
- 如何快速定位程序Core？
- jpa原生query_JPA执行原生SQL语句
- 转: Jenkins+Gradle实现android开发持续集成、打包
- twisted 安装时，安装顺序为 zope.interface -twisted
- Python 线程创建和传参 - Python零基础入门教程
- kindeditor图片服务器php,kindeditor 粘贴网络图片保存到服务器
- 《线性代数应该这样学》学习笔记
- GAN（生成对抗网络）的系统全面介绍（醍醐灌顶）
- 普中51单片机数码管实例
- 新云人才招聘系统抖音小程序申请配置教程
- 手机uc打开本地html,(涨知识)关于手机UC浏览器折叠网页内容解决办法
- 微软宣布446亿美元收购雅虎
- java学习思维导图
- DCDC开关电源学习
- leetcode每日一题第三十二天-剑指 Offer 65. 不用加减乘除做加法（easy？？middle了吧）
- 【已解决】Unknown error 1146