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);
            }

        }
    }