效果.gif
最近我的5s实在卡的不行就打算买个手机，在京东上看手机的时候发现这个效果，感觉挺好玩的，就想着自己实现下，iOS版本有此效果，Android好像没有。
思路
看到这个效果我马上就想到了Matrix，不了解Matrix的同学可以去网上看看这方面的文章，还是很多的，Matrix有一个方法可以实现这种效果：
setPolyToPoly(float[] src, int srcIndex, float[] dst, int dstIndex，int pointCount)
接下来我们通过一个例子来看下它的作用
正常情况下一张图片：
yuan.png
点击按钮使用setPolyToPoly 方法以后效果
tx.png
可以看出是改变了图片上右和下右两个坐标点，代码如下：
ImageView imageView = (ImageView) findViewById(R.id.image);
imageView.setScaleType(ImageView.ScaleType.MATRIX);
matrix.setPolyToPoly(getFourPointArray(imageView, true), 0, getFourPointArray(imageView, false), 0, 4);
imageView.setImageMatrix(matrix);
private float[] getFourPointArray(View view, boolean src) {
float[] pointArray = new float[8];
pointArray[0] = 0;
pointArray[1] = 0;
pointArray[2] = src ? view.getWidth() : view.getWidth() - 50;
pointArray[3] = src ? 0 : 50;
pointArray[4] = src ? view.getWidth() : view.getWidth() - 50;
pointArray[5] = src ? view.getHeight() : view.getHeight() - 50;
pointArray[6] = 0;
pointArray[7] = view.getHeight();
return pointArray;
}
可以看到我在dst数组中改变了上右和下右两个坐标点的大小，然后就实现了上面的效果，两个数组的长度是8，数组里两条数据代表一个坐标点，8条数据就代表4个坐标点，分别是：上左，上右，下右，下左，学会使用这个方法效果就好实现了。
实现
首先使用属性动画来控制坐标的变化
private void startAnimation(final int status) {
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float moveOffset = ((float) animation.getAnimatedValue() * offset);
setViewLocation(status, moveOffset);
postInvalidate();
}
});
valueAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
if(status == STATUS_ONE || status == STATUS_THREE) {
startAnimation(status == STATUS_ONE ? STATUS_TWO : STATUS_FOUR);
}
}
});
valueAnimator.setDuration(duration);
valueAnimator.start();}
在动画的修改过程中，根据比例来设置view坐标值，然后调用postInvalidate（）方法发起绘制，达到动画效果。
@Override
protected void dispatchDraw(Canvas canvas) {
if(!init) {
canvas.save();
mTopMatrix.reset();
mTopMatrix.setPolyToPoly(src, 0, dst, 0, src.length >> 1);
canvas.concat(mTopMatrix);
drawChild(canvas, mTopView, getDrawingTime());
canvas.restore();
drawChild(canvas, mBottomView, getDrawingTime());
return;
}
super.dispatchDraw(canvas);
}
调用mTopMatrix.setPolyToPoly(src, 0, dst, 0, src.length >> 1) 方法，绘制子view。
结束语
到此，整个流程已经分析完毕，想要看完整源码的
https://github.com/chenpengfei88/JDCommoditySelectSpecifications
如果大家觉得对自己有用，欢迎Star， Follow，谢谢。
