自定义View实现网易云音乐留声机效果(代码区)

网易云音乐js代码 立即下载
//绘制旋转了指定角度的唱针
    private void drawNeedle(Canvas canvas,int degree){
        //移动坐标到水平中点
        canvas.save();
        canvas.translate(halfMeassuredWidth,0);
        //绘制唱针手臂
        needPaint.setStrokeWidth(20);
        needPaint.setColor(Color.parseColor("#C0C0C0"));
        //绘制第一段臂
        canvas.rotate(degree);
        canvas.drawLine(0,0,0,longArmLength,needPaint);
        //绘制第二段臂
        canvas.translate(0,longArmLength);
        canvas.rotate(-30);
        canvas.drawLine(0,0,0,shortArmLength,needPaint);
        //绘制唱针头
        //绘制第一段唱针头
        canvas.translate(0,longHeadLength);
        needPaint.setStrokeWidth(40);
        canvas.drawLine(0,0,0,longHeadLength,needPaint);
        //绘制第二段唱针头
        canvas.translate(0,longHeadLength);
        needPaint.setStrokeWidth(60);
        canvas.drawLine(0,0,0,shortHeadLength,needPaint);
        canvas.restore();

        //两个重叠的圆形
        canvas.save();
        canvas.translate(halfMeassuredWidth,0);
        needPaint.setStyle(Paint.Style.FILL);
        needPaint.setColor(Color.parseColor("#C0C0C0"));
        canvas.drawCircle(0,0,bigCircleRadius,needPaint);
        needPaint.setColor(Color.parseColor("#8A8A8A"));
        canvas.drawCircle(0,0,samllCircleRadius,needPaint);
        canvas.restore();

    }
public class GramophoneView extends View{
    private int halfMeassuredWidth;// 绘制唱片相关变量
    private static final int DEFAULT_PICTURE_RADIUS = 400;// 中间图片默认半径
    private static final float DEFAULT_DISK_ROTATE_SPEED = 0.3f;  // 唱片旋转默认速度,其实是通过每次旋转叠加的角度来控制速度
    private int pictureRadius;  //中间图片的半径
    private int ringWidth;  //黑色圆环宽度
    private float diskRotateSpeed;  //唱片旋转速度
    private Paint discPaint;  //唱片画笔
    private Path clipPath; //裁剪图片的路径
    private Bitmap bitmap;  //图片
    private Rect srcRect;  //图片被裁剪范围
    private Rect dstRect;  //图片被绘制范围
    private static final int PLAY_DEGREE  = -15;//播放状态唱针的旋转角度
    private static final int PAUSE_DEGREE = -45;//暂停状态唱针的旋转角度
    private int samllCircleRadius = 20;//唱针顶部小圆半径
    private int bigCircleRadius;//唱针顶部大圆半径
    private int longArmLength; //唱针手臂,较长那段的长度
    private int shortArmLength; //唱针手臂,较短那段的长度
    private int longHeadLength; //唱针的头,较长那段的长度
    private int shortHeadLength; //唱针的头,较短那段的长度
    private Paint needPaint;  //唱针画笔
    private boolean isPlaying; //是否处于播放状态
    private int needleDegreeCounter; //唱针旋转角度计数器
    private float diskDegreeCounter; //唱片旋转角度计数器

public GramophoneView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.GramophoneView);
        pictureRadius = (int) typedArray.getDimension(R.styleable.GramophoneView_picture_radius,DEFAULT_PICTURE_RADIUS);
        diskRotateSpeed = typedArray.getFloat(R.styleable.GramophoneView_disk_rotate_speed,DEFAULT_DISK_ROTATE_SPEED);
        Drawable drawable = typedArray.getDrawable(R.styleable.GramophoneView_src);
        if (drawable==null){
            bitmap =  BitmapFactory.decodeResource(getResources(),R.mipmap.gramophone_view_default_picture);
        }else {
            bitmap = ((BitmapDrawable)drawable).getBitmap();
        }
        typedArray.recycle();
        //初始化唱片变量
        ringWidth = pictureRadius>>1;
        discPaint = new Paint();
        discPaint.setColor(Color.BLACK);
        discPaint.setStyle(Paint.Style.STROKE);
        discPaint.setStrokeWidth(ringWidth);
        srcRect = new Rect();
        dstRect = new Rect();
        setBitmapRect(srcRect,dstRect);
        clipPath = new Path();
        clipPath.addCircle(0,0,pictureRadius,Path.Direction.CW);
        diskDegreeCounter = 0;

        //初始化唱针变量
        bigCircleRadius = samllCircleRadius<<1;
        shortHeadLength = (pictureRadius + ringWidth)/15;
        longHeadLength = shortHeadLength<<1;
        shortArmLength = longHeadLength<<1;
        longArmLength = shortArmLength<<1;
        needPaint = new Paint();
        needleDegreeCounter = PAUSE_DEGREE;
    }
}
//绘制旋转了指定角度的唱片(类似唱针,唱片里面的图片是会旋转不同角度的)
    private void drawDisk(Canvas canvas,float degree){
        //移动坐标系到唱针下方合适位置,然后旋转指定角度
        //save():用来保存Canvas的状态,save()方法之后的代码,能够调用Canvas的平移、放缩、旋转、裁剪等操作!
        canvas.save();
        canvas.translate(halfMeassuredWidth,pictureRadius+ringWidth+longArmLength);
        canvas.rotate(degree);
        //绘制圆环
        canvas.drawCircle(0,0,pictureRadius+ringWidth/2,discPaint);
        //绘制图片
        canvas.clipPath(clipPath);
        canvas.drawBitmap(bitmap,srcRect,dstRect,discPaint);
        canvas.restore();
        //.restore():用来恢复Canvas之前保存的状态,防止save()方法代码之后对Canvas运行的操作。继续对兴许的绘制会产生影响。通过该方法能够避免连带的影响!

    }
 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        halfMeassuredWidth = getMeasuredWidth()>>1;
        drawDisk(canvas);//绘制唱片
        drawNeedle(canvas);//绘制唱针
        // 如果唱针当前角度大于暂停状态下的角度(注意了由于是负数所以是大于),
        // 继续重绘
        if (needleDegreeCounter > PAUSE_DEGREE){
            invalidate();
        }
    }

 //绘制唱片(胶片)
    private void drawDisk(Canvas canvas) {
        // 这里的diskRotateSpeed变量就是唱片每次变化角度,就是旋转速度的意思
        diskDegreeCounter = diskDegreeCounter%360 + diskRotateSpeed;
        drawDisk(canvas,diskDegreeCounter);
    }

 private void drawNeedle(Canvas canvas) {
        //根据播放/暂停状态控制唱针角度的加/减变化
        if(isPlaying){
            if (needleDegreeCounter < PLAY_DEGREE){
                needleDegreeCounter += 3;
                Log.e("zhangyubin",needleDegreeCounter+"");
            }
        }else {
            if (needleDegreeCounter >PAUSE_DEGREE){
                needleDegreeCounter -=3;
                Log.e("zhangyubin",needleDegreeCounter+"");
            }
        }
        drawNeedle(canvas,needleDegreeCounter);
    }

 

仿唱片机音乐播放器源码.zip 仿唱片机音乐播放器源码是仿照老式留声机样式的播放器,使用之前先选几首歌然后添加到一个半圆形的歌曲列表里,然后先按右上角的开关按钮,会有一个留声机唱针缓缓右移的动画效果。   立即下载

相关推荐

Flash唱片动画,唱片机切换碟片动画.rar

Flash唱片动画,唱片机切换碟片动画,或许以后能用上的一小段flash动画剪辑素材,关于唱片播放的,开源Flash源码下载。

Android仿网易云音乐:留声机效果

参考文章:blog.youkuaiyun.com/jasper_succ…blog.youkuaiyun.com/xiangzhihon…blog.youkuaiyun.com/lzq33521/ar…效果图资源1(当前用的是这个)资源2思路:准备2张图片,1张是圆盘碟片,1张是指针图片。播放的时候圆盘碟片开始旋转,指针图片旋转一定角度到圆盘碟片上;暂停则圆盘碟片停止旋转,指针图片旋转一定角度离开圆盘碟片图片,再次播放的时候圆盘碟片...

weixin_34008805的博客 434

仿网易云音乐小程序源码

仿网易云音乐小程序源码,可以学习小程序开发使用,导入时需要把result下面的截图删掉就小于2M了。

HTML网页调用 网易云 音乐播放器代码

表现形式一:单曲播放 调用代码: &amp;lt;iframe frameborder=&quot;no&quot; border=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot; width=100% height=86 src=&quot;http://music.163.com/outchain/player?type=2&am

YFCMS博客 5万+

网易云音乐打碟页面Demo

网易云音乐打碟页面Demo

AI数字人短视频数字人口播数字人分身建模流程全解析

在人工智能与计算机图形学蓬勃发展的当下,数字人建模作为打造虚拟数字人的核心环节,其流程复杂且精妙,融合了多种前沿技术与创意构思,为栩栩如生的数字人形象奠定基石。​。

2403_87518095的博客 1446

Python爬取网易云音乐免费音乐代码,以及下载,以实测

自己抓一下我请求中的连接,去修改一下参数就可以使用了。具体的参数自己去抓请求去看,这里就不做过多演示了。

小畅的博客 2114

【算法】—前缀和与差分详解

前缀和指一个数组的某下标之前的所有数组元素的和(即数列的前n项求和),前缀和是一种重要的预处理,能够降低算法的时间复杂度,可以快速地求出某一段的和,对于处理区间之间的问题是往往十分高效相比较其他算法而言,前缀和更像是一种解题的技巧,一种优化方式输入一个长度为 n 的整数序列。接下来再输入 m 个询问,每个询问输入一对 l,r 对于每个询问,输出原序列中从第 l 个数到第 r 个数的和5 32 1 3 6 41 21 32 4123453610。

DAY I 的成长之路 6022

抓取网易云音乐代码)

注:该代码仅限教学借鉴,处学习以外的用途请勿使用。

FFGHJFK的博客 1315

40分钟快速入门Dart基础(上)

针对final 和const 理解的有点模糊的可以参考这篇文章: 可以参考这里Flutter 知识梳理(Dart)-Dart中static final const 区别看是不是超级好上手,好操作~其实Dart的整个学习起来还是蛮简单的,对于有基础的老司机更简单一些。分分钟敲起来~这篇文章就简单的介绍到这里如何短时间快速入门Dart,避免入坑。由于是想让大家快速入门Flutter,所以针对上面的这些章节我们讲解的只是一些在开发Flutter 过程中常用的一些方法和函数。

qq_7813180 4570

手把手教你用SIMCOM A7670C_FASL模组实现双路MQTT连接阿里云(附完整源码)

本文详细介绍了如何使用SIMCOM A7670C_FASL 4G模组实现双路MQTT连接阿里云,包括硬件配置、开发环境搭建、双路MQTT架构设计及实现细节。通过完整的源码示例和实战指南,帮助开发者快速掌握物联网设备开发中的多路MQTT连接技术,提升工业级应用的开发效率。

weixin_33696822的博客 227

【微信小程序学习】网易云音乐歌曲详情页代码实现

这里记录一下做网易云小程序的音乐播放详情页面的代码。 音乐播放界面的主要的重点有几个: 1、磁盘和摇杆的旋转效果,这里运用了css的动画属性 2、音乐播放和暂停,下一首/上一首等播放效果的实现 3、进度条的样式和控制 4、和上一页音乐推荐列表页通信,利用订阅与发布Pubsub HTML <!--pages/songDetail/songDetail.wxml--> <view class="songDetailContainer"> &lt...

qiaoyangla的博客 7509

YOLOv8【第一章:基础入门篇·第1节】一文搞定,核心架构深度解析与环境配置!

🏆 本文收录于 《YOLOv8实战:从入门到深度优化》 专栏,该专栏专注于分享我在YOLOv8目标检测模型中的实战经验,涵盖从入门基础到深度优化的全方位解决方案。无论你是计算机视觉的新手,还是具有多年深度学习经验的专家,本专栏都将为你提供高效、可复现的技术方案,助你掌握YOLOv8的核心技术,提升目标检测性能,突破瓶颈,优化模型,并加速项目开发🚀!

**My Coding Family** 2102

Android开发-仿网易云音乐播放器样式设计与实现

前 言 大家平时在听音乐时使用到的网易云音乐 Android 版 App 时有没有发现网易云音乐的 App 样式做的比较好,App 抽屉式菜单栏使用 Android 独有的特性(相对于IOS) Material Design 风格的设计模式,App 整体风格设计样式符合人性设计。那么这篇博客主要讲如何实现仿网易云音乐简易版播放器。 需求分析 要实现仿网易云音乐简易版播放器的功能,需要实现以下几...

_彼岸雨敲窗_的博客 1万+

指纹对抗指南:如何绕过Cloudflare与Akamai的5s盾与浏览器指纹检测

现在的CDN反爬技术虽然越来越强,但是道高一尺魔高一丈,只要掌握了指纹伪造、流量伪装、行为模拟这些核心技术,就可以绕过绝大多数的防护措施。对抗过程中要注意效率和成本的平衡,小规模爬取用Playwright+stealth最方便,大规模爬取用curl_cffi+代理池性价比最高,遇到验证码用打码平台或者自动识别服务,不需要死磕破解。本文介绍的方案已经在实战中验证过,可以绕过95%以上的Cloudflare/Akamai防护,成功率非常高。

专注于Python爬虫开发,分享爬虫技巧、项目实战与反爬经验,使用Scrapy、BeautifulSoup等工具,解决数据抓取难题。 295

Docker:快速部署 Temporal 工作流引擎的技术指南

Temporal是一个开源的分布式工作流引擎,适用于复杂业务流程(如订单处理、支付流程等),提供状态持久化、自动重试、多语言SDK支持等特性。部署简单,支持Docker Compose,包含核心服务、Web UI及数据库。以TypeScript为例,开发者可快速编写工作流(如订单处理)和Worker,通过CLI或SDK启动和管理。Temporal简化了分布式系统的可靠性设计,适合电商、自动化任务等场景。

木头 640

自定义View----留声机

/** * Created by Kingfar on 2017/12/18. * 仿网易云音乐留声机(唱片机)View */ public class GramophoneView extends View { /** * 尺寸计算设计说明: * 1、唱片有两个主要尺寸:中间图片的半径、黑色圆环的宽度。 * 黑色圆环的宽度 = 图片半径的一半...

lian895615的博客 296

深入浅出块I/O子系统(四)请求处理过程

BIO请求处理的流程 函数scsi_request_fn()代码(摘自文件drivers/scsi/scsi_lib.c) (1)static void scsi_request_fn(struct request_queue *q) (2)int scsi_dispatch_cmd(struct scsi_cmnd *cmd) { host->hostt->queuecommand(host, cmd) } (3)struct sas_internal *i sas_queuec

sinat_37817094的博客 1347

自定义View(留声机)

//自定义GramophoneViewpackage bwei.com.changji_zidingyi; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapFactory; imp...

zhang1223665986的博客 282

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

Android自定义View分享——仿网易云音乐留声机效果

写在前面 这是笔者自学习自定义View以来,分享的第六篇效果,之前写过一篇打钩小动画,有兴趣的可以看看: Android自定义View分享——打钩动画 之前的博客笔者一般都会说,这是不太复杂但是“长得”还可以的效果,这次的分享也长得挺好看的,但是不敢说“不太复杂”。虽然没有用到很高级的API(这篇分享还是以canvas的各个API调用为主),但是在涉及到计算的地方,确实是有些复杂(繁琐)。让

Kingfar Ou 4796

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

Android自定义View——仿网易云音乐留声机效果

//自定义类 public class GramophoneView extends View { /** * 尺寸计算设计说明: * 1、唱片有两个主要尺寸:中间图片的半径、黑色圆环的宽度。 * 黑色圆环的宽度 = 图片半径的一半。 * 2、唱针分为“手臂”和“头”,手臂分两段,一段长的一段短的,头也是一段长的一段短的。 * 唱针四个

XiaoZhuang__的博客 1672

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

网易云音乐案例

下载网易云音乐node接口项目,在本地启动,为我们vue项目提供数据支持项目地址:https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=%e5%ae%89%e8%a3%85**备用地址:**https://github.com/Binaryify/NeteaseCloudMusicApi/tree/master/docs下载后,安装所有依赖,在本地启动起来,测试访问此地址是否有数据http://locallhost:3000,看到如下页面就成功了初始化

m0_65552590的博客 764

一起学ReactNative(3) 实现网易云音乐旋转唱片效果

前言 先看一下整体完成效果 今天主要聊聊 这个唱片的旋转效果如何实现 这个效果实现其实非常简单 先来看一下效果图 如有发现任何问题的 都可以直接加我的QQ:469373256效果图红色线:scroll 粉色线:一个宽度跟手机宽度一样的view组件 内部实现了唱片的居中 黄色线:里面的内容跟粉色线一样 不过初始的时候不显示 只会在scroll滑动结束的时候进行触发ok 这样简单的介绍了一下

fangkyi02的博客 2864

仿网易云音乐播放音乐转盘

#import @interface GKWYMusicCoverView : UIView @property (nonatomic, strong) UIImageView *imgView; - (void)playedWithAnimated:(BOOL)animated; - (void)pausedWithAnimated:(BOOL)animated; @end //

huangmindong的专栏 3698

【网易云音乐】--源代码分享

网易云音乐歌曲功能(评论源代码分享)页面一:页面二: 页面三: 关于音乐播放的实现大家可以通过下面这个链接学习进行实现,功能是一样的【前端】-音乐播放器(源代码和结构讲解,大家可以将自己喜欢的歌曲添加到数据当中,js实现页面动态显示音乐)-优快云博客歌词实现动态效果思想:1.获得播放歌词内容2.通过歌词数据初始化当前歌词列表3.通过获取audio对象,获取播放时间,然后通过将json中的对象中的时间进行解析成秒数,通过当前音乐时间找出应该播放哪句歌词,然后给当前歌词进行高光设置,并且将歌词进行改变(

2301_81253185的博客 4569
上一篇: 贝塞尔曲线简介和安卓实现动画效果展示(代码区)
下一篇: JSON快速入门(Java版)(代码区)
OneLinee
博客等级 码龄10年 11粉丝 41原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值