Android模仿京東商品詳情 選擇規格特效

weixin_34208283發表於2016-11-17
Android特效
2255810-e169c28a95a9684e.gif
效果.gif

最近我的5s實在卡的不行就打算買個手機，在京東上看手機的時候發現這個效果，感覺挺好玩的，就想著自己實現下，iOS版本有此效果，Android好像沒有。

思路

看到這個效果我馬上就想到了Matrix，不瞭解Matrix的同學可以去網上看看這方面的文章，還是很多的，Matrix有一個方法可以實現這種效果：

setPolyToPoly(float[] src, int srcIndex, float[] dst, int dstIndex，int pointCount)

接下來我們通過一個例子來看下它的作用
正常情況下一張圖片：

2255810-abfeb140f434ae8b.png
yuan.png

點選按鈕使用setPolyToPoly 方法以後效果


2255810-7bac1b87124a0000.png
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，謝謝。

相關文章