仿网易音乐听歌识曲-麦克风动画

仿网易音乐听歌识曲-麦克风动画

最近准备做一个关于麦克风的类库，平时听歌也基本用网易音乐，发现了这个效果挺不错的，所以实现收集起来。

一、效果图

二、实现思路分析

• 透明度变换的体现；
• 半径不断扩散；
• 多个圆形的实现；

实现思路： 主要在于如何能够把不同的圆环跟对应的透明度进行对应上。实现上用两个List进行实现。

三、代码编写

/**
 * Created by Iflytek_dsw on 2017/6/24.
 */

public class MicRecordingView extends View{

    /**画笔*/
    private Paint paint;
    /**透明度集合*/
    private List<Integer> alphaList;
    /**所有圆环半径集合*/
    private List<Integer> circleList;
    /**圆环的颜色*/
    private int circleColor = Color.RED;
    /**圆环之间的间隔大小*/
    private int gapLength = 50;
    /**最大半径*/
    private int maxWidth = 200;
    /**圆环的个数*/
    private int circieNumber = 5;
    /**圆环的半径x，y*/
    private float circleX, circleY;
    /**是否运行动画*/
    private boolean isStarting = false;
    public MicRecordingView(Context context, AttributeSet attrs) {
        super(context, attrs);
        circleColor = Color.RED;
        paint = new Paint();
        paint.setColor(circleColor);
        alphaList = new ArrayList<>();
        circleList = new ArrayList<>();
        alphaList.add(0, 255);
        circleList.add(0, 0);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        maxWidth = w > h ? h / 2 : w / 2;
        circleX = w / 2;
        circleY = h / 2;
        circieNumber = maxWidth / gapLength;
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for(int i = 0; i < circleList.size(); i++){
            int circleWidth = circleList.get(i);
            int alpha = alphaList.get(i);
            paint.setAlpha(alpha);
            canvas.drawCircle(circleX, circleY, circleWidth + gapLength, paint);

            if(isStarting && alpha > 0 && circleWidth < maxWidth){//一个圆环逐渐扩大
                alphaList.set(i, alpha - 1);
                circleList.set(i, circleWidth + 1);
            }

            /**当一个圆形的半径扩大到了gapLength的长度，就创建下一个圆*/
            if(isStarting && circleList.get(circleList.size() - 1) == gapLength){
                alphaList.add(255);
                circleList.add(0);
            }

            if(isStarting && circleList.size() == circieNumber){//保持圆圈在运行
                alphaList.remove(0);
                circleList.remove(0);
            }

            invalidate();
        }
    }

    /**
     *执行动画
     */
    public void start() {
        isStarting = true;
    }

    /**
     *停止动画
     */
    public void stop() {
        isStarting = false;
    }

    /**
     * 判断是都在不在执行
      */
    public boolean isStarting() {
        return isStarting;
    }
}

四、View的实现

1、main_layout布局中

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="dsw.iflytek.com.wymusic.MainActivity">

    <dsw.iflytek.com.wymusic.MicRecordingView
        android:id="@+id/micView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <ImageView
        android:id="@+id/iv_mic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@mipmap/mic"/>
</RelativeLayout>

2、MainActivity.java中

public class MainActivity extends AppCompatActivity {
    private ImageView imageView;
    private MicRecordingView micRecordingView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        micRecordingView = (MicRecordingView) findViewById(R.id.micView);
        imageView = (ImageView) findViewById(R.id.iv_mic);
        micRecordingView.start();
    }
}

五、扩展

1、修改画笔样式

paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(4);

形成圆环的波形 

2、修改绘制的图形为椭圆

int length = circleWidth + gapLength;
RectF rectF = new RectF(circleX - length, circleY - length/2,
        circleX + length, circleY + length/2);
canvas.drawOval(rectF, paint);

至此，简单的模仿了下。