1. 程式人生 > >利用PageTransformer實現viewpager的視差效果變換和反轉特效

利用PageTransformer實現viewpager的視差效果變換和反轉特效

利用PageTransformer實現viewpager的幾種切換效果,適合做歡迎頁,程式碼比較簡單,但是效果還不錯,核心主要是PageTransformer的使用。

page在切換的時候會呼叫transformPage(View page, float position)方法,注意是多個page不停的呼叫這方法,引數page就是呼叫此方法的view,引數position就是這個view的位置資訊。0代表當前view,-1代表左邊的相鄰的view,1代表右面相鄰的view。在本專案中,我們只操作-1~1之間的view(也就是使用者可能會見的view)。

 @Override
    public void transformPage(View page, float position) {
        if (position > -1 && position < 1) {
            initransforPage(page, position);
        }
    }


先看第一種效果

在page切換過程中加入放大縮小的動畫,根據position判斷page縮放的程度。

   page.setScaleX(1-Math.abs(position));
                page.setScaleY(1-Math.abs(position));

第二種效果

這種效果跟上面的效果類似,只不過添加了縮小的最小限度,最小設定成0.9f

 page.setScaleX(Math.max(0.9f,1-Math.abs(position)));
 page.setScaleY(Math.max(0.9f,1-Math.abs(position)));

第三種效果

利用翻轉動畫實現了page切換,根據position來確定setPivotX引數和反轉的角度

  page.setPivotX(position<0f?page.getWidth():0f);
  page.setPivotY(page.getHeight()*0.5f);
  page.setRotationY(position*45);
第四種效果


同樣是反轉,只不過反過來了而已

 page.setPivotX(page.getWidth()*0.5f);
 page.setPivotY(page.getHeight()*0.5f);
 page.setRotationY(-position*45);
第五種效果


gif圖的關係效果不是很明顯,其實這是一種視差效果。根據position和view的寬度給page中每個子view賦予不同的偏移量,形成這種視差移動的效果。

 ViewGroup v = (ViewGroup) page.findViewById(R.id.rl);
                int childCount = v.getChildCount();
                for (int i = 0; i < childCount; i++) {
                    View childView = v.getChildAt(i);
                    float factor = (float) Math.random();
                    if (childView.getTag() == null) {
                        childView.setTag(factor);
                    } else {
                        factor = (float) childView.getTag();
                    }
                    childView.setTranslationX(factor * childView.getWidth() * position);
                }
                break;

以上就是這幾種效果的全部核心程式碼,也可以根據自己需求組合變換。主要是拋磚引玉,哈哈哈。

下載連結:http://download.csdn.net/detail/liujiayut800/9885267