灵感来源于一个D3学习群中的一个大神的demo,再加上自己学习D3一个半多月,看了很多Demo,总有一种看了知道是什么意思的,但是要让自己写,就写不出来的赶脚,
所以就尝试做个小Demo来练练手。难度不大,主要在于自己把之前学的一些东西串起来。巩固一下自己知识点。
主要使用到的就是d3(用于界面的绘制)和html5中audio的使用。
下面就让我们一起来看下演示的效果,如下图:
从上面的效果图可以看出:
播放器可以实现音乐的声音和歌曲的切换
并且在音乐播放的时候有动态的矩形在上下伸缩。
还有最外层的进度条,用来显示当前歌曲的进度的。还有中间按钮暂停或者播放显示不同的图形。
这些效果是都d3做出来的,也就是说都是被包裹在svg里面的。
那么接下来我就大概我怎么使用d3画的思路:
首先是最外面的进度条:这个应该是比较简单。只要用d3画出来两个圆弧,第二个圆弧的开始endAngle是0,随着音乐的播放,获取当前播放时间和总的时间,来
得到当前应该旋转到多少度,这里面自然而然就可以使用attrTween('d',function(){})这个方法来设置角度的过渡动画,我之前写过饼图动画就是说这个的,这样就可
以让他一直增加endAngle,从而达到进度条的效果。
PS:其实也可以是自己弄个定时器,不断改变当前的endAngle,效果跟上面一样,我就这样试过,不过人家把东西弄好了,你可以直接调用上面的API。
中间的圆弧,就是分成4份的。这只是画的饼图,在使用padAngle弄出圆弧之间的一点间隙。
然后就是他外层的一直动的rect,这个就是在每层的添加6个rect,然后不断的更新rect的属性,
然后使用data中的update从而不断更新数据,然后再添加上transition()的过渡动画,这样就让rect不断的更新自己的高度。不断的动起来。
中间就是给circle添加图片:
play.append("defs")
.append('pattern')
.attr({
id: "avatar",
width: "100%",
height: "100%",
patternContentUnits: "objectBoundingBox"
})
.append('image')
.attr('class', 'myImage')
.attr({
width: "1",
height: "1",
"xlink:href": "media/1.png"
});
play.append("circle")
.attr("r", 90)
.attr('fill', 'url(#avatar)')
然后就是中间还有两个按钮一个播放一个暂停的样式,是两个path路径,然后通过设置一个class名字,来在后面处理中是否让他显示出来。
play.append("path").attr('class', 'startBtn')
.attr("d", "M-22,-30l60,30l-60,30z")
play
.append("path").attr('class', 'restartBtn1')
.attr('d', "M-30,-30L-30,30L-10,30L-10,-30Z");
play.append("path").attr('class', 'restartBtn2')
.attr('d', "M10,-30L10,30L30,30L30,-30Z");
然后一个简单但不粗暴的音乐播放器就完成了。学习的过程是无聊还是通过来做点东西,来增加对d3的兴趣和知识掌握。
最后音乐代码还是比较多的,所以我把他放在了github上面了。
https://kangjun-kj.github.io/D3-Music/
可以下载源码到自己本地看效果。