Android模仿京东商品详情 选择规格特效

效果.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，谢谢。