ViewPager翻轉特效

先來看個簡單的特效 再一步步分析

代碼也比較簡單
activity_main.xml

<android.support.v4.view.ViewPager
    android:id="@+id/vp"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"></android.support.v4.view.ViewPager>

MainActivity.java

public class MainActivity extends FragmentActivity {
	private ViewPager vp;
	private int[] layouts = {
			R.layout.welcome1,
			R.layout.welcome2,
			R.layout.welcome3
	};

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		vp = (ViewPager)findViewById(R.id.vp);
		WelcomePagerAdapter adapter = new WelcomePagerAdapter(getSupportFragmentManager());
		vp.setPageTransformer(true, new WelcompagerTransformer());
		vp.setAdapter(adapter);
	}
	
	class WelcomePagerAdapter extends FragmentPagerAdapter{
		public WelcomePagerAdapter(FragmentManager fm) {
			super(fm);
		}

		@Override
		public Fragment getItem(int position) {
			Fragment f = new TranslateFragment();
			Bundle bundle = new Bundle();
			bundle.putInt("layoutId", layouts[position]);
			f.setArguments(bundle );
			return f;
		}

		@Override
		public int getCount() {
			return 3;
		}
		
	}

}

vp.setPageTransformer 需要一個實現了ViewPager.PageTransformer的參數 這裏面定義了transformPage方法 在這個方法設置滑動算法

WelcomePageTransfomer.java

public class WelcomePageTransfomer implements ViewPager.PageTransformer {
    /**
     *
     * @param view 當前的view
     * @param position 當前view 滑動的位置
     */
    @Override
    public void transformPage(@NonNull View view, float position) {
        //效果1
        view.setScaleX(1 - Math.abs(position));
        view.setScaleY(1 - Math.abs(position));
    }
}

實際上這個transformPage方法 在我們滑動的時候會爲不同的view調用很多次執行該方法

理解position變化 我們可以根據這個參數 作不同的效果

@Override
    public void transformPage(@NonNull View view, float position) {
        view.setScaleX(Math.max(0.9f,1-Math.abs(position)));
		view.setScaleY(Math.max(0.9f,1-Math.abs(position)));
    }

-------------------------------------------------------------------------------------------------------------------

@Override
    public void transformPage(@NonNull View view, float position) {
        view.setPivotX(position < 0f ? view.getWidth() : 0f);//左邊頁面：0~-1；右邊的頁面：1~0
        view.setPivotY(view.getHeight() * 0.5f);
        view.setRotationY(position * 45f);//0~90度
    }

---------------------------------------------------------------------------------------------------------------------------------

@Override
    public void transformPage(@NonNull View view, float position) {
        view.setPivotX(view.getWidth() * 0.5f);//左邊頁面：0~-1；右邊的頁面：1~0
        view.setPivotY(view.getHeight() * 0.5f);
        view.setRotationY(-position * 45f);//0~90度
    }

----------------------------------------------------------------------------------------------------------------------

@Override
    public void transformPage(@NonNull View view, float position) {
        if(position<1&&position>-1){
            //找到裏面的子控件
            ViewGroup v = (ViewGroup) view.findViewById(R.id.rl);
            int childCount = v.getChildCount();
            for (int i = 1; i < childCount; i++) {
                View childView = v.getChildAt(i);
                float factor = (float) Math.random()*3;
                if(childView.getTag()==null){
                    childView.setTag(factor);
                }else{
                    factor = (float) childView.getTag();
                }
                /**每一個子控件達到不同的視差效果，translationX是不一樣的
                 * position : 0 ~ -1
                 * translationX: 0 ~ childView.getWidth();
                 */
                childView.setTranslationX(factor*childView.getWidth()*position);
            }

        }
    }