SeniorUI0504_Xfermode心电图效果

高级UI汇总​​​​​​​
eniorUI05_Paint_Xfermode模式
##1 Effect Picture

##2 Demo
SeniorUI05_HeartMapActivity
##3 Requirement
心电图：一条线随“心率”波动上下起伏，随时间逐渐向左移动，一段周期后还原继续
##4 Theory

• 此案例用用图片表示心电图，实际使用时，可以用Bitmap画path实现（可以参考Xfermode刮刮卡效果）
• 自定义View，xfermode合成部分心电图显示图片，Animation不断改变内容达到动态效果
• 心电图图片合成：一张随Animation的不断变换长度的不透明图片、一张心电图片，PorterDuff.Mode.DST_IN合成

##5 Core Code

public class HeartMapView extends View {

    private Paint mBitMapPaint;


    private Bitmap mBitMapSRC, mBitMapDST;

    private int dx;

    public HeartMapView(Context context) {
        super(context);
        setLayerType(LAYER_TYPE_SOFTWARE,null);
        mBitMapPaint = new Paint();
        mBitMapPaint.setColor(Color.RED);

        mBitMapDST =BitmapFactory.decodeResource(getResources(), R.drawable.heartmap);
        mBitMapSRC = Bitmap.createBitmap(mBitMapDST.getWidth(),mBitMapDST.getHeight(), Bitmap.Config.ARGB_8888);

        startAnimation();

    }

    private void startAnimation() {
        ValueAnimator animator = ValueAnimator.ofInt(0, mBitMapDST.getWidth());
        animator.setDuration(6000);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setInterpolator(new LinearInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                dx = (int) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        animator.start();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 清空src bitmap的内容，变成透明的
        Canvas c = new Canvas(mBitMapSRC);
        c.drawColor(Color.RED, PorterDuff.Mode.CLEAR);

        // 画不透明的矩形区域
        c.drawRect(mBitMapDST.getWidth() - dx, 0 , mBitMapDST.getWidth(),mBitMapDST.getHeight(),mBitMapPaint);

        // 画目标图片
        canvas.drawBitmap(mBitMapDST, 0 ,0 , mBitMapPaint);
        mBitMapPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        canvas.drawBitmap(mBitMapSRC,0,0,mBitMapPaint);
        mBitMapPaint.setXfermode(null);
    }
}