图片切换马赛克动画效果

1、创建初始化界面的定义类

public class AniPlayer {private RelativeLayout mBox = null;private Context mContext = null;public static final AniPlayer INST = new AniPlayer();private boolean isPlaying = false;int nextSwitchingStyle = 0;private int[] imageResources = {R.drawable.bbb, R.drawable.aaa};int nextImageResource = 0;private Handler handler = null;public void play(Context context,RelativeLayout box) {if (isPlaying) {return;}isPlaying = true;if (handler == null) {handler = new Handler();}mContext = context;mBox = box;playNext();}private void playNext() {nextSwitchingStyle++;if (nextSwitchingStyle >= 1) {nextSwitchingStyle = 0;}int imgRes = imageResources[nextImageResource];nextImageResource++;if (nextImageResource >= 2) {nextImageResource = 0;}SwitchableImageView imgView = new SwitchableImageView(mContext);imgView.setImageResource(imgRes);imgView.setScaleType(ScaleType.FIT_XY);LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);mBox.addView(imgView, lp);//imgView.setSwitchingPercent(0.0f);ObjectAnimator animator = ObjectAnimator.ofFloat(imgView, "switchingPercent",//0.001f, 0.4f, 0.5f, 1.0f);//0.1f, 0.2f, 0.3f, 0.4f, 0.5f, 0.6f, 0.7f, 0.8f, 0.9f, 1.0f);1.0f);animator.setDuration(5000);animator.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animation) {}@Overridepublic void onAnimationRepeat(Animator animation) {}@Overridepublic void onAnimationEnd(Animator animation) {clearViewsNotOnTop(mBox);handler.postDelayed(new Runnable() {@Overridepublic void run() {playNext();}}, 2000);}@Overridepublic void onAnimationCancel(Animator animation) {isPlaying = false;}});animator.start();}private void clearViewsNotOnTop(RelativeLayout parent) {int count = parent.getChildCount();if (count >= 2) {parent.removeViews(0, count - 1);}}}

2、创建马赛克工具类

public class SwitchableImageView extends ImageView {protected float switchingPercent = 0;public SwitchableImageView(Context context) {super(context);}public SwitchableImageView(Context context, AttributeSet attrs) {super(context, attrs);}public SwitchableImageView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}public void setSwitchingPercent(float switchingPercent) {this.switchingPercent = switchingPercent;switchingPercentChanged();}protected void switchingPercentChanged() {SwitchingStyle.马赛克.switchingPercentChanged(this);invalidate();}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);SwitchingStyle.马赛克.onDraw(this, canvas);}public static enum SwitchingStyle {马赛克 {@Overrideprotected void onDraw(SwitchableImageView thiz, Canvas canvas) {thiz.drawMosaic(canvas);}@Overrideprotected void switchingPercentChanged(SwitchableImageView thiz) {if (thiz.switchingPercent < 1.0f) {thiz.setLayerType(View.LAYER_TYPE_SOFTWARE, null);} else {thiz.setLayerType(View.LAYER_TYPE_NONE, null);}}};private static final Paint CLEARING_PAINT;private static final Paint NORMAL_PAINT;static {// 预先创建，尽量别在onDraw中创建东西CLEARING_PAINT = new Paint();CLEARING_PAINT.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));NORMAL_PAINT = new Paint();NORMAL_PAINT.setColor(Color.BLACK);}protected abstract void switchingPercentChanged(SwitchableImageView thiz);protected abstract void onDraw(SwitchableImageView thiz, Canvas canvas);}// 以下是马赛克相关的东西private int mosaicSize = 0;private int xCount = 0, yCount = 0;private HashSet<Integer> revealedMosaicSet = new HashSet<Integer>();private Random random = new Random();private void initMosaicData(int width, int height) {int[] xyCount = { 0, 0 };mosaicSize = calcMosaicSize(width, height, xyCount);xCount = xyCount[0];yCount = xyCount[1];revealedMosaicSet.clear();}private static int calcMosaicSize(int width, int height, int[] outXyCount) {int dimen = width > height ? width : height;int result = dimen / 10;if (outXyCount != null && outXyCount.length >= 2) {outXyCount[0] = Math.round((float)width / (float)result);outXyCount[1] = Math.round((float)height / (float)result);}return result;}private void drawMosaic(Canvas canvas) {if (switchingPercent == 0.0f) {initMosaicData(canvas.getWidth(), canvas.getHeight());}int expectedRevealedCount = Math.round(xCount * yCount * switchingPercent);while (revealedMosaicSet.size() < expectedRevealedCount) {revealOneMosaic();}for (int y=0; y < yCount; y++) {for (int x=0; x < xCount; x++) {int w = mosaicSize;int h = mosaicSize;if (x == xCount - 1) {w = canvas.getWidth() - x * mosaicSize;}if (y == yCount - 1) {h = canvas.getHeight() - y * mosaicSize;}if (!revealedMosaicSet.contains(x + y * xCount)) {canvas.drawRect(x * mosaicSize, y * mosaicSize,x * mosaicSize + w, y * mosaicSize + h, SwitchingStyle.CLEARING_PAINT);}}}}private void revealOneMosaic() {int r = random.nextInt(xCount * yCount - revealedMosaicSet.size());for (int i=0; i < xCount * yCount; i++) {if (!revealedMosaicSet.contains(i)) {if (r == 0) {revealedMosaicSet.add(i);break;}r--;}}}}

效果如图：