国产成人精品免费视频麻豆大全,无码一区二区三,一区二区三区四区高清无码,操操日操,口交麻豆,成人精品视频在线观看,大香蕉尹人视频,无码人妻一区二区三区

效果圖：

前言

最近項目中做了一個音頻播放的功能，播放條上需要一個如上圖的效果。一開始為了趕時間，就用幀動畫實現(xiàn)的，但是效果看起來沒那么絲滑。今天沒啥事，就抽時間用自定義view的方式了一下。看上圖的對比，自定義view的實現(xiàn)效果是不是像德芙一樣絲滑。

優(yōu)勢

自定義view實現(xiàn)的方式比起幀動畫的方式，有以下幾個優(yōu)勢。

1、視覺效果更佳。

2、幀動畫需要不同幀的圖片，而自定義view的方式使用paint畫出來的，更剩資源。

3、可變化性強，可以通過屬性來改變指針的顏色、寬高比、指針個數(shù)，從而應用到更多場景。

4、使用方便，就像使用TextView、Button等。

怎么使用

使用非常簡單，就像普通的控件一樣，在xml配置屬性，然后在Activity里，調用start()、stop()來控制開始與暫停。

            android:id="@+id/voise_playint_icon"        android:layout_width="40dp"        android:layout_height="40dp"        android:layout_below="@+id/btn_stop"        android:layout_marginLeft="300dp"        android:layout_marginTop="50dp"        android:background="#CCCCCC"        android:padding="5dp"        voisePlayingIconAttr:color="#FF6565"        voisePlayingIconAttr:pointer_num="4"        voisePlayingIconAttr:pointer_width="5" />

//開始 voisePlayingIcon.start();//停止voisePlayingIcon.stop();

實現(xiàn)步驟

- 思路

1、自定義view,在畫布上依次畫幾個不同高度的矩形。

2、開啟一個子線程，在這個子線程中寫一個死循環(huán)，來模擬正弦函數(shù)的過程，x軸方向取值范圍是0到正無窮。然后去Y軸的絕對值，那么Y軸的取值范圍就是0到1。

3、利用上一步y(tǒng)軸取值來乘以控件高度，改變每個小舉行的高度。

4、刷新畫布。

5、這樣就達到了想要的效果，并且小矩形的高度變化速度，是符合正弦變化速率的。

代碼實現(xiàn)

代碼不是很多，這里直接貼出代碼，具體講解看代碼中的注釋。


public class VoisePlayingIcon extends View {
    //畫筆    private Paint paint;
    //跳動指針的集合    private List pointers;
    //跳動指針的數(shù)量    private int pointerNum;
    //邏輯坐標 原點    private float basePointX;    private float basePointY;
    //指針間的間隙  默認5dp    private float pointerPadding;
    //每個指針的寬度 默認3dp    private float pointerWidth;
    //指針的顏色    private int pointerColor = Color.RED;
    //控制開始/停止    private boolean isPlaying = false;
    //子線程    private Thread myThread;
    //指針波動速率    private int pointerSpeed;

    public VoisePlayingIcon(Context context) {        super(context);        init();    }
    public VoisePlayingIcon(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        //取出自定義屬性        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.voisePlayingIconAttr);        pointerColor = ta.getColor(R.styleable.voisePlayingIconAttr_color, Color.RED);        pointerNum = ta.getInt(R.styleable.voisePlayingIconAttr_pointer_num, 4);//指針的數(shù)量，默認為4        pointerWidth = DensityUtils.dp2px(getContext(),                ta.getFloat(R.styleable.voisePlayingIconAttr_pointer_width, 5f));//指針的寬度，默認5dp        pointerSpeed = ta.getInt(R.styleable.voisePlayingIconAttr_pointer_speed, 40);        init();    }
    public VoisePlayingIcon(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.voisePlayingIconAttr);        pointerColor = ta.getColor(R.styleable.voisePlayingIconAttr_color, Color.RED);        pointerNum = ta.getInt(R.styleable.voisePlayingIconAttr_pointer_num, 4);        pointerWidth = DensityUtils.dp2px(getContext(), ta.getFloat(R.styleable.voisePlayingIconAttr_pointer_width, 5f));        pointerSpeed = ta.getInt(R.styleable.voisePlayingIconAttr_pointer_speed, 40);        init();    }
    /**     * 初始化畫筆與指針的集合     */    private void init() {        paint = new Paint();        paint.setAntiAlias(true);        paint.setColor(pointerColor);        pointers = new ArrayList<>();    }

    /**     * 在onLayout中做一些，寬高方面的初始化     *     * @param changed     * @param left     * @param top     * @param right     * @param bottom     */    @Override    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {        super.onLayout(changed, left, top, right, bottom);        //獲取邏輯原點的，也就是畫布左下角的坐標。這里減去了paddingBottom的距離        basePointY = getHeight() - getPaddingBottom();        Random random = new Random();        if (pointers != null)            pointers.clear();        for (int i = 0; i < pointerNum; i++) {            //創(chuàng)建指針對象，利用0~1的隨機數(shù) 乘以 可繪制區(qū)域的高度。作為每個指針的初始高度。            pointers.add(new Pointer((float) (0.1 * (random.nextInt(10) + 1) * (getHeight() - getPaddingBottom() - getPaddingTop()))));        }        //計算每個指針之間的間隔  總寬度 - 左右兩邊的padding - 所有指針占去的寬度  然后再除以間隔的數(shù)量        pointerPadding = (getWidth() - getPaddingLeft() - getPaddingRight() - pointerWidth * pointerNum) / (pointerNum - 1);    }

    /**     * 開始繪畫     *     * @param canvas     */    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //將x坐標移動到邏輯原點，也就是左下角        basePointX = 0f + getPaddingLeft();        //循環(huán)繪制每一個指針。        for (int i = 0; i < pointers.size(); i++) {            //繪制指針，也就是繪制矩形            canvas.drawRect(basePointX,                    basePointY - pointers.get(i).getHeight(),                    basePointX + pointerWidth,                    basePointY,                    paint);            basePointX += (pointerPadding + pointerWidth);        }    }
    /**     * 開始播放     */    public void start() {        if (!isPlaying) {            if (myThread == null) {//開啟子線程                myThread = new Thread(new MyRunnable());                myThread.start();            }            isPlaying = true;//控制子線程中的循環(huán)        }    }
    /**     * 停止子線程，并刷新畫布     */    public void stop() {        isPlaying = false;        invalidate();    }
    /**     * 處理子線程發(fā)出來的指令，然后刷新布局     */    private Handler myHandler = new Handler() {        @Override        public void handleMessage(Message msg) {            super.handleMessage(msg);            invalidate();        }    };
    /**     * 子線程，循環(huán)改變每個指針的高度     */    public class MyRunnable implements Runnable {
        @Override        public void run() {
            for (float i = 0; i < Integer.MAX_VALUE; ) {//創(chuàng)建一個死循環(huán)，每循環(huán)一次i+0.1                try {                    for (int j = 0; j < pointers.size(); j++) { //循環(huán)改變每個指針高度                        float rate = (float) Math.abs(Math.sin(i + j));//利用正弦有規(guī)律的獲取0~1的數(shù)。                        pointers.get(j).setHeight((basePointY - getPaddingTop()) * rate); //rate 乘以 可繪制高度，來改變每個指針的高度                    }                    Thread.sleep(pointerSpeed);//休眠一下下，可自行調節(jié)                    if (isPlaying) { //控制開始/暫停                        myHandler.sendEmptyMessage(0);                        i += 0.1;                    }                } catch (InterruptedException e) {                    e.printStackTrace();                }            }        }    }

    /**     * 指針類     */    public class Pointer {        private float height;
        public Pointer(float height) {            this.height = height;        }
        public float getHeight() {            return height;        }
        public void setHeight(float height) {            this.height = height;        }    }}

自定義屬性如下：

這樣的效果可以用在音樂播放的播放條，同樣也可以當作一個Loading來使用。

源碼地址：

https://github.com/chaohengxing/VoisePlayingIcon

到這里就結束啦。

Android實現(xiàn)音樂播放頻譜動畫效果