最近我的5s實(shí)在卡的不行就打算買個手機(jī)澎现，在京東上看手機(jī)的時候發(fā)現(xiàn)這個效果仅胞，感覺挺好玩的，就想著自己實(shí)現(xiàn)下剑辫，iOS版本有此效果干旧，Android好像沒有。
思路
看到這個效果我馬上就想到了Matrix妹蔽，不了解Matrix的同學(xué)可以去網(wǎng)上看看這方面的文章椎眯，還是很多的，Matrix有一個方法可以實(shí)現(xiàn)這種效果：
setPolyToPoly(float[] src, int srcIndex, float[] dst, int dstIndex胳岂，int pointCount)
接下來我們通過一個例子來看下它的作用
正常情況下一張圖片：
點(diǎn)擊按鈕使用setPolyToPoly 方法以后效果
可以看出是改變了圖片上右和下右兩個坐標(biāo)點(diǎn)编整，代碼如下：
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數(shù)組中改變了上右和下右兩個坐標(biāo)點(diǎn)的大小，然后就實(shí)現(xiàn)了上面的效果乳丰，兩個數(shù)組的長度是8掌测，數(shù)組里兩條數(shù)據(jù)代表一個坐標(biāo)點(diǎn)，8條數(shù)據(jù)就代表4個坐標(biāo)點(diǎn)产园，分別是：上左汞斧，上右，下右淆两，下左断箫，學(xué)會使用這個方法效果就好實(shí)現(xiàn)了。
實(shí)現(xiàn)
首先使用屬性動畫來控制坐標(biāo)的變化
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();}
在動畫的修改過程中秋冰，根據(jù)比例來設(shè)置view坐標(biāo)值仲义，然后調(diào)用postInvalidate（）方法發(fā)起繪制，達(dá)到動畫效果剑勾。
@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);
}
調(diào)用mTopMatrix.setPolyToPoly(src, 0, dst, 0, src.length >> 1) 方法埃撵，繪制子view。
結(jié)束語
到此虽另，整個流程已經(jīng)分析完畢暂刘，想要看完整源碼的
https://github.com/chenpengfei88/JDCommoditySelectSpecifications
如果大家覺得對自己有用，歡迎Star捂刺， Follow谣拣，謝謝募寨。
