首先:先贴出几个关于动画的公共类,这几个类只支持android版本3.0以上
//立方体viewpager切换动画 public class CubeTransformer implements PageTransformer { /** * position参数指明给定页面相对于屏幕中心的位置。它是一个动态属性,会随着页面的滚动而改变。当一个页面填充整个屏幕是,它的值是0, * 当一个页面刚刚离开屏幕的右边时 * ,它的值是1。当两个也页面分别滚动到一半时,其中一个页面的位置是-0.5,另一个页面的位置是0.5。基于屏幕上页面的位置 * ,通过使用诸如setAlpha()、setTranslationX()、或setScaleY()方法来设置页面的属性,来创建自定义的滑动动画。 */ @Override public void transformPage(View view, float position) { if (position <= 0) { // 从右向左滑动为当前View // 设置旋转中心点; ViewHelper.setPivotX(view, view.getMeasuredWidth()); ViewHelper.setPivotY(view, view.getMeasuredHeight() * 0.5f); // 只在Y轴做旋转操作 ViewHelper.setRotationY(view, 90f * position); } else if (position <= 1) { // 从左向右滑动为当前View ViewHelper.setPivotX(view, 0); ViewHelper.setPivotY(view, view.getMeasuredHeight() * 0.5f); ViewHelper.setRotationY(view, 90f * position); } } }
//google官方viewpager切换动画 public class DepthPageTransformer implements PageTransformer { private static final float MIN_SCALE = 0.75f; public void transformPage(View view, float position) { int pageWidth = view.getWidth(); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. //view.setAlpha(0); ViewHelper.setAlpha(view,0); } else if (position <= 0) { // [-1,0] // Use the default slide transition when moving to the left page //view.setAlpha(1); ViewHelper.setAlpha(view,1); //view.setTranslationX(0); ViewHelper.setTranslationX(view,0); // view.setScaleX(1); // view.setScaleY(1); ViewHelper.setScaleX(view,1); ViewHelper.setScaleY(view,1); } else if (position <= 1) { // (0,1] // Fade the page out. // view.setAlpha(1 - position); ViewHelper.setAlpha(view,1 - position); // Counteract the default slide transition // view.setTranslationX(pageWidth * -position); ViewHelper.setTranslationX(view,pageWidth * -position); // Scale the page down (between MIN_SCALE and 1) float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position)); // view.setScaleX(scaleFactor); // view.setScaleY(scaleFactor); ViewHelper.setScaleX(view,scaleFactor); ViewHelper.setScaleY(view,scaleFactor); } else { // (1,+Infinity] // This page is way off-screen to the right. //view.setAlpha(0); ViewHelper.setAlpha(view,0); } }
/* * Viewpager 切换动画1 * */ public class GuideTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.85f; private static final float MIN_ALPHA = 0.5f; @SuppressLint("NewApi") public void transformPage(View view, float position) { int pageWidth = view.getWidth(); int pageHeight = view.getHeight(); Log.e("TAG", view + " , " + position + ""); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0); } else if (position <= 1) // a页滑动至b页 ; a页从 0.0 -1 ;b页从1 ~ 0.0 { // [-1,1] // Modify the default slide transition to shrink the page as well float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position)); float vertMargin = pageHeight * (1 - scaleFactor) / 2; float horzMargin = pageWidth * (1 - scaleFactor) / 2; if (position < 0) { view.setTranslationX(horzMargin - vertMargin / 2); } else { view.setTranslationX(-horzMargin + vertMargin / 2); } // Scale the page down (between MIN_SCALE and 1) view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); // Fade the page relative to its size. view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA)); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0); } }
/* * Viewpager切换动画2 */ public class GuideTransformer2 implements ViewPager.PageTransformer { private static final float ROT_MAX = 20.0f; private float mRot; public void transformPage(View view, float position) { Log.e("TAG", view + " , " + position + ""); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. ViewHelper.setRotation(view, 0); } else if (position <= 1) // a页滑动至b页 ; a页从 0.0 ~ -1 ;b页从1 ~ 0.0 { // [-1,1] // Modify the default slide transition to shrink the page as well if (position < 0) { mRot = (ROT_MAX * position); ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f); ViewHelper.setPivotY(view, view.getMeasuredHeight()); ViewHelper.setRotation(view, mRot); } else { mRot = (ROT_MAX * position); ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f); ViewHelper.setPivotY(view, view.getMeasuredHeight()); ViewHelper.setRotation(view, mRot); } // Scale the page down (between MIN_SCALE and 1) // Fade the page relative to its size. } else { // (1,+Infinity] // This page is way off-screen to the right. ViewHelper.setRotation(view, 0); } }
// 侧面滑动viewpager切换动画 public class RotateDownPageTransformer implements ViewPager.PageTransformer { private static final float ROT_MAX = 20.0f; private float mRot; public void transformPage(View view, float position) { Log.e("TAG", view + " , " + position + ""); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. ViewHelper.setRotation(view, 0); } else if (position <= 1) // a页滑动至b页 ; a页从 0.0 ~ -1 ;b页从1 ~ 0.0 { // [-1,1] // Modify the default slide transition to shrink the page as well if (position < 0) { mRot = (ROT_MAX * position); //x的旋转中心 ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f); //Y的旋转中心 ViewHelper.setPivotY(view, view.getMeasuredHeight()); //设置动画效果 ViewHelper.setRotation(view, mRot); } else { //从0度到20度 mRot = (ROT_MAX * position); //x的旋转中心 ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f); //Y的旋转中心 ViewHelper.setPivotY(view, view.getMeasuredHeight()); //设置动画效果 ViewHelper.setRotation(view, mRot); } // Scale the page down (between MIN_SCALE and 1) // Fade the page relative to its size. } else { // (1,+Infinity] // This page is way off-screen to the right. ViewHelper.setRotation(view, 0); } }
// google官方viewpager滑动动画切换动画 public class ZoomOutPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.85f; private static final float MIN_ALPHA = 0.5f; @Override public void transformPage(View view, float position) { int pageWidth = view.getWidth(); int pageHeight = view.getHeight(); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0); } else if (position <= 1) { // [-1,1] // Modify the default slide transition to shrink the page as well float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position)); float vertMargin = pageHeight * (1 - scaleFactor) / 2; float horzMargin = pageWidth * (1 - scaleFactor) / 2; if (position < 0) { view.setTranslationX(horzMargin - vertMargin / 2); } else { view.setTranslationX(-horzMargin + vertMargin / 2); } // Scale the page down (between MIN_SCALE and 1) view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); // Fade the page relative to its size. view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA)); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0); } }具体实现代码如下:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.sudo.guidancepager.MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/id_viewpager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> <Button android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="立即体验" android:background="#ffcc66" android:id="@+id/btn_tiyan" android:textColor="#ff0000" android:layout_marginBottom="38dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true"/> </RelativeLayout>MainActivity
public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{ private ViewPager mViewpager; private Button mBtnTiyan; private int[] mImgIds = new int[]{R.mipmap.a, R.mipmap.b, R.mipmap.c, R.mipmap.d}; //存储Image private List<ImageView> mImages = new ArrayList<ImageView>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initImagers(); initView(); } private void initView() { mViewpager = (ViewPager) findViewById(R.id.id_viewpager); mBtnTiyan = (Button) findViewById(R.id.btn_tiyan); mBtnTiyan.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(MainActivity.this,TwoActivity.class); startActivity(intent); } }); mViewpager.addOnPageChangeListener(this); //为Viewpager添加切换动画效果 mViewpager.setPageTransformer(true, new GuideTransformer2()); mViewpager.setAdapter(new PagerAdapter() { @Override public int getCount() { //有几页 return mImgIds.length; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public void destroyItem(ViewGroup container, int position, Object object) { //移除ImageView container.removeView(mImages.get(position)); } @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(mImages.get(position)); return mImages.get(position); } }); mImages.get(3).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(MainActivity.this,TwoActivity.class); startActivity(intent); } }); } private void initImagers() { for (int i = 0; i < mImgIds.length; i++) { ImageView imageView = new ImageView(MainActivity.this); //给ImageView设置图片 imageView.setImageResource(mImgIds[i]); //设置样式 imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); mImages.add(imageView); } } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { //判断如果是最后一张图片则显示出立即体验这个按钮 if((mImgIds.length-1)==position){ mBtnTiyan.setVisibility(View.VISIBLE); }else{ mBtnTiyan.setVisibility(View.GONE); } } @Override public void onPageScrollStateChanged(int state) { } }activity_two.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.sudo.guidancepager.TwoActivity"> <ImageButton android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageButton" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:src="@mipmap/timg"/> </RelativeLayout>TwoActivity
public class TwoActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_two); } }