带波纹动画的Layout

转载请指明出处：http://blog.youkuaiyun.com/fxdaniel/article/details/44599025

这只是本人学习之作，更多详细知识请学习大牛们的文章：
爱哥大神：http://blog.youkuaiyun.com/aigestudio/article/details/41316141
任玉刚大神：http://blog.youkuaiyun.com/singwhatiwanna/article/details/42614953

一个特殊的Layout，可以将其中容纳的子元素以波纹动画的形式消失，显示出layout的背景。

这里主要用到了PorterDuffXfermode混合模式。
在需要绘制动画的时候，先将canvas离屏缓存，然后绘制子元素，接着设置画笔的混合模式，再绘制一个透明的圆，最后恢复canvas。
这里用Runnable实现动画。

WaveAnimLayout.java

package com.example.customview;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.widget.RelativeLayout;

import com.example.util.MeasureUtil;

public class WaveAnimLayout extends RelativeLayout implements Runnable {

    private Context mContext;

    private Paint mPaint; // 画笔
    private int mRadius; // 圆的半径
    private int mMaxRadius; // 最大半径
    private int mScreenWidth; // 屏幕宽度
    private int mScreenHeight; // 屏幕高度
    private int mScreenCenterX; // 屏幕中心X坐标
    private int mScrrenCenterY; // 屏幕中心Y坐标

    private Bitmap bgBitmap;

    private boolean shouldDoAnimation = false;// 是否播放动画
    private PorterDuffXfermode porterDuffXfermode;// 图形混合模式

    public WaveAnimLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        mRadius = 0;

        // 实例化混合模式
        porterDuffXfermode = new PorterDuffXfermode(Mode.DST_IN);

        // 初始化画笔
        initPaint();

        // 计算屏幕宽高
        mScreenWidth = MeasureUtil.getScreenWidth((Activity) mContext);
        mScreenHeight = MeasureUtil.getScreenHeight((Activity) mContext);

        // 计算屏幕中心点坐标
        mScreenCenterX = mScreenWidth / 2;
        mScrrenCenterY = mScreenHeight / 2;

        // 计算最大半径
        mMaxRadius = 1 + (int) Math.sqrt((mScreenCenterX * mScreenCenterX)
                + (mScrrenCenterY * mScrrenCenterY));

        // 获取背景底图
        bgBitmap = BitmapFactory.decodeResource(mContext.getResources(),
                R.drawable.ic_launcher);

        // 缩放背景底图Bitmap至屏幕大小
        bgBitmap = Bitmap.createScaledBitmap(bgBitmap, mScreenWidth,
                mScreenHeight, true);
    }

    public WaveAnimLayout(Context context) {
        this(context, null);
    }

    public boolean isShouldDoAnimation() {
        return shouldDoAnimation;
    }

    public void setShouldDoAnimation(boolean shouldDoAnimation) {
        this.shouldDoAnimation = shouldDoAnimation;
    }

    public void initPaint() {

        // 初始化画笔
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setARGB(0, 255, 255, 255);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 绘制背景
        // canvas.drawBitmap(bgBitmap, 0, 0, null);
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {

        if (!shouldDoAnimation) {
            super.dispatchDraw(canvas);
            return;
        }

        // 离屏缓存
        int sc = canvas.saveLayer(0, 0, mScreenWidth, mScreenHeight, null,
                Canvas.ALL_SAVE_FLAG);
        // 绘制子元素
        super.dispatchDraw(canvas);

        // 设置混合模式
        mPaint.setXfermode(porterDuffXfermode);
        // 绘制透明的圆
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, mRadius, mPaint);

        // 还原混合模式
        mPaint.setXfermode(null);

        // 还原画布
        canvas.restoreToCount(sc);
    }

    @Override
    public void run() {

        while (true) {
            if (!shouldDoAnimation)
                continue;

            if (mRadius < mMaxRadius) {
                mRadius += 1;
            } else {
                mRadius = 0;
                shouldDoAnimation = false;
            }
            try {
                Thread.sleep(1);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            postInvalidate();
            ;
        }
    }
}

MainActivity.java

package com.example.customview;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.RelativeLayout;

public class MainActivity extends Activity {

    Button start , stop;

    RelativeLayout layout;

    Thread thread;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        layout = (WaveAnimLayout)findViewById(R.id.layout);

        start = (Button)findViewById(R.id.btn_start);
        stop = (Button)findViewById(R.id.btn_stop);

        thread = new Thread((WaveAnimLayout)layout);
        thread.start();

        start.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                ((WaveAnimLayout)layout).setShouldDoAnimation(true);
            }
        });

        stop.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                ((WaveAnimLayout)layout).setShouldDoAnimation(false);
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

activity_main.xml

<com.example.customview.WaveAnimLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/ic_launcher" >

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="#ff808080">
        <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="开始" />

    <Button
        android:id="@+id/btn_stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="停止" />
    </LinearLayout>


</com.example.customview.WaveAnimLayout>

项目源码下载：http://download.youkuaiyun.com/detail/fxdaniel/8530117