ViewPager切换动画

#1 原理

android定义了PagerTransformer接口，通过实现接口的transformPage方法来实现ViewPager的每个一个Pager切换的动画

#2 效果图

视觉动画（ViewGroup中子View与父亲的运动轨迹不一致）、3D内翻转、缩放、3D外翻转、卡牌；gif图片太大，就不一一上传了

#3 代码：

1）MainActivity

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;

}

}

}

activity_main.xml

2)Fragment

每一个layoutId对应的xml就是普通的包含不同ImageView的ViewGroup,id

定义随意

3） PageTransformer实现

public class WelcompagerTransformer implements PageTransformer{

/**

* 此方法是滑动的时候每一个页面View都会调用该方法

* view:当前的页面

* position:当前滑动的位置

* 视差效果：在View正常滑动的情况下，给当前View或者当前view里面的每一个子view来一个加速度

* 而且每一个加速度大小不一样。

* -1~0

* 0~1

*/

@Override

public void transformPage(View page, float position) {

Log.i("PageTransformer","transformPage page="+page+";;; position="+position);

if(position<1&&position>-1){

//找到里面的子控件

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()*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);

}

//效果1

// view.setScaleX(1-Math.abs(position));

// view.setScaleY(1-Math.abs(position));

//效果2

// view.setScaleX(Math.max(0.9f,1-Math.abs(position)));

// view.setScaleY(Math.max(0.9f,1-Math.abs(position)));

//效果3 3D翻转

// view.setPivotX(position<0f?view.getWidth():0f);//左边页面：0~-1；右边的页面：1~0

// view.setPivotY(view.getHeight()*0.5f);

// view.setRotationY(position*45f);//0~90度

//效果4 3D内翻转

// view.setPivotX(position<0f?view.getWidth():0f);//左边页面：0~-1；右边的页面：1~0

// view.setPivotY(view.getHeight()*0.5f);

// view.setRotationY(-position*45f);//0~90度

// view.setPivotX(view.getWidth()*0.5f);//左边页面：0~-1；右边的页面：1~0

// view.setPivotY(view.getHeight()*0.5f);

// view.setRotationY(-position*45f);//0~90度

}

}

}

#4 Demo地址