Juega con la barra de progreso de la ola grande en mapa de bits

Indique el autor AndroidMsky y la fuente de la reimpresión. 

http://blog.csdn.net/AndroidMsky/article/details/53520406

No puedo esperar para llegar a las representaciones:

 
Se pueden cambiar 4 estados de onda:

https://github.com/AndroidMsky/BitmapWaveView

Creo que es bueno dar una estrella gracias hermanos

Instrucciones:

Admitido en BitmapWave es todavía un niño de 200 líneas:

BitmapWave.java

Dos atributos personalizados:

<declare-styleable name="bitmapWave">
        <attr name="backbitmap" format="reference"/>
        <attr name="overColor" format="color"/>

    </declare-styleable>
    

Y usar en el diseño:

<com.example.liangmutian.bitmapwaveview.BitmapWave
        android:id="@+id/bitmapwave2"
        bitmapwave:backbitmap="@mipmap/q1"
        bitmapwave:overColor="#eddf0e"
        android:layout_width="100dp"
        android:layout_height="250dp"
        />

Admite atributos modificados:

Nombre del Atributo	descripción	Observaciones
Mapa de bits mapa de bits	Imagen de fondo
privado int mWaveLength = 700;	Ancho de onda
int progerss privado = 50;	Altura total de la ola
privado int mWaveHeight = 80;	Amplitud de onda alta
waveBit flotante privado = 1 / 4f;	Relación de onda izquierda y derecha	Predeterminado 1: 1
private int mWavePaintColor;	Color de onda

Soporte de método:

mBitmapWave.setMode(1);

valor	descripción	Observaciones
0	Ola básica
1	La superposición desaparece	Puede indicar carga inversa
2	Sensación de remojo
3	Superposición roja	Ola de color de corte transparente profundizar

改变颜色
   public void setColor(int c) {
        mWavePaint.setColor(c);
    }
改变进度
    public void setProgerss(int c) {
        this.progerss = c;
    }

Análisis de principios

Acabado de ideas

1. Dibujar la imagen en un mapa de bits 
2. Dibujar la imagen de fondo 
3. Dibujar olas grandes
4. Dibujar  con un tipo de pincel específico 
5. Usar animación de valor para hacer que las ondas se muevan 
6. Proporcionar progreso de configuración de diseño, configuración de colores y otros métodos y etiqueta de atributos xml

Análisis de dificultad

Utilice ValueAnimator para generar la diferencia y vuelva a la vista para generar ondas:

ValueAnimator animator = ValueAnimator.ofInt(0, mWaveLength);
        animator.setDuration(1000);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setInterpolator(new LinearInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mOffset = (int) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        animator.start();

El dibujo de la trayectoria de la onda se deriva de la curva de Bezier:

 mPath.reset();
        mPath.moveTo(-mWaveLength + mOffset, mCenterY);
        for (int i = 0; i < mWaveCount; i++) {

            mPath.quadTo((-mWaveLength * (1 - waveBit)) + (i * mWaveLength) + mOffset, mCenterY + mWaveHeight,
                    (-mWaveLength / 2) + (i * mWaveLength) + mOffset, mCenterY);

            mPath.quadTo((-mWaveLength * waveBit) + (i * mWaveLength) + mOffset, mCenterY - mWaveHeight, i * mWaveLength + mOffset, mCenterY);
        }

        mPath.lineTo(mWidth, mHeight);
        mPath.lineTo(0, mHeight);
        mPath.close();

Si no comprende la curva de Bezier, puede leer un artículo de Bezier del médico.

La clave es jugar con 16 pinceles 

private PorterDuffXfermode mMode3 = new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY);//透明出来
    //private PorterDuffXfermode mMode = new PorterDuffXfermode(PorterDuff.Mode.XOR);//红色覆盖
    private PorterDuffXfermode mMode2 = new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP);//浸泡感觉
    private PorterDuffXfermode mMode1 = new PorterDuffXfermode(PorterDuff.Mode.DST_OUT);//重叠部分消失 可以表示反向加载
    private PorterDuffXfermode mMode0 = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);//基本波浪

Proporcione un método para cambiar el tipo de cepillo alto:

public void setMode(int c) {

        switch (c) {
            case 0:
                mWavePaint.setXfermode(mMode0);
                break;
            case 1:
                mWavePaint.setXfermode(mMode1);
                break;
            case 2:
                mWavePaint.setXfermode(mMode2);
                break;
            case 3:
                mWavePaint.setXfermode(mMode3);
                break;


        }

    }

La breve introducción ha terminado.