高级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);
}
}