android 网易云音乐上滑动画,Android 仿网易云音乐 音轨跳动效果

网易云音乐的Loading效果，大家应该也比较熟悉了，效果是一个红色音轨不断跳动的效果，一般用于Loading等待时填充使用。本篇来自定义这个效果。

Android 仿网易云音乐 音轨跳动View.gif

原理

原理就是画4条垂直线，使用随机数不断更新，只要速度够快，就会形成跳动的效果。

画线调用canvas.drawLine()方法就可以画出来，而主要是计算每一条的垂直线的x坐标，y坐标使用随机比值(0 ~ 1)乘以总音轨高度即可算出。

其实x坐标可以不计算，我们可以使用canvas.translate()方法，每次画1条垂直线的时候，平移画布一个固定的间距距离，x坐标还是第一条先的垂直线的x坐标，再进行画线，疑似画4次后，就出现了4条垂直线了。

遇到的问题

按照上面的平移的方式，就可以画出4条垂直线，但是效果是反的，为什么呢？如下图所示：

反方向.png

因为按照Android的坐标系，我们知道，默认坐标系的(0,0)原点在控件的左上角，原点发射出来的2条边都为正轴，如果按照这个坐标系，我们画出来的线是反的。

解决这个问题也很简单，我们只要将画布旋转180度，而且旋转中心指定在控件的中心点，就可以摆正它。效果如下：

正方向.png

//旋转画布，按控件中心旋转180度，即可让音轨反转

canvas.rotate(180, mViewWidth / 2f, mViewHeight / 2f);

完整代码

自定义属性

Java代码

public class CloudMusicLoadingView extends View implements Runnable {