Android项目实战（ViewPager切换动画（3.0版本以上有效果）） _Android项目

男儿欲遂平生志，六经勤向窗前读。这篇文章主要讲述Android项目实战：ViewPager切换动画（3.0版本以上有效果）相关的知识，希望能为你提供帮助。
原文:Android项目实战（四）：ViewPager切换动画（3.0版本以上有效果）学习内容来自“ 慕课网”
一般APP进去之后都会有几张图片来导航，这里就学习怎么在这张图片切换的时候添加切换动画效果
先看布局文件
activity_main.layout

< ?xml version="1.0" encoding="utf-8"?> < FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/frameLayout1" android:orientation="vertical"> < /FrameLayout>

然后是java文件
【Android项目实战（ViewPager切换动画（3.0版本以上有效果））】mainactivity.java

1 package com.example.viewpage; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 import android.os.Bundle; 7 import android.app.Activity; 8 import android.graphics.DashPathEffect; 9 import android.support.v4.view.PagerAdapter; 10 import android.support.v4.view.ViewPager; 11 import android.text.style.SuperscriptSpan; 12 import android.view.Menu; 13 import android.view.View; 14 import android.view.ViewGroup; 15 import android.view.Window; 16 import android.widget.ArrayAdapter; 17 import android.widget.ImageView; 18 import android.widget.ImageView.ScaleType; 19 20 public class MainActivity extends Activity { 21 22private ViewPager mviewpager; //控件 23private int[] mImgIds = new int[]{R.drawable.guide_image1,R.drawable.guide_image2,R.drawable.guide_image3}; //初始化图片 24private List< ImageView> mImages = new ArrayList< ImageView> (); 25 26 27 28@Override 29protected void onCreate(Bundle savedInstanceState) { 30super.onCreate(savedInstanceState); 31requestWindowFeature(Window.FEATURE_NO_TITLE); 32setContentView(R.layout.activity_main); 33 34mviewpager = (ViewPager) findViewById(R.id.id_viewpager); 35//为ViewPage切换添加动画效果(3.0以上版本才可以有效果) 36mviewpager.setPageTransformer(true, new ZoomOutPageTransformer()); 37 38mviewpager.setAdapter(new PagerAdapter() { 39 40@Override 41public Object instantiateItem(View container, int position) { 42ImageView imageview = new ImageView(MainActivity.this); 43imageview.setImageResource(mImgIds[position]); 44imageview.setScaleType(ScaleType.CENTER_CROP); //设置图片不变形 45((ViewGroup) container).addView(imageview); 46mImages.add(imageview); 47return imageview; 48}; 49@Override 50public void destroyItem(View container, int position, Object object) { 51// TODO Auto-generated method stub 52 53((ViewPager) container).removeView(mImages.get(position)); 54} 55public boolean isViewFromObject(View view, Object object) { 56// TODO Auto-generated method stub 57return view == object; 58} 59 60@Override 61public int getCount() {//返回图片个数 62// TODO Auto-generated method stub 63return mImgIds.length; 64} 65}); 66} 67 68 69 70 }

这里代码很简单，主要就是一行代码控制切换效果第36行mviewpager.setPageTransformer(true, new ZoomOutPageTransformer());
第二个参数就是切换效果，当然不是随便的参数
这些参数可以在http://wear.techbrood.com/training/animation/screen-slide.html网上查阅到
代码是给定的，只要复制代码，点击包粘贴就生成了相应的java文件
这里展示下几种效果：
1、ZoomOutPageTransformer（）

文章图片

1 public class ZoomOutPageTransformer implements ViewPager.PageTransformer { 2private static final float MIN_SCALE = 0.85f; 3private static final float MIN_ALPHA = 0.5f; 4 5public void transformPage(View view, float position) { 6int pageWidth = view.getWidth(); 7int pageHeight = view.getHeight(); 8 9if (position < -1) { // [-Infinity,-1) 10// This page is way off-screen to the left. 11view.setAlpha(0); 12 13} else if (position < = 1) { // [-1,1] 14// Modify the default slide transition to shrink the page as well 15float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position)); 16float vertMargin = pageHeight * (1 - scaleFactor) / 2; 17float horzMargin = pageWidth * (1 - scaleFactor) / 2; 18if (position < 0) { 19view.setTranslationX(horzMargin - vertMargin / 2); 20} else { 21view.setTranslationX(-horzMargin + vertMargin / 2); 22} 23 24// Scale the page down (between MIN_SCALE and 1) 25view.setScaleX(scaleFactor); 26view.setScaleY(scaleFactor); 27 28// Fade the page relative to its size. 29view.setAlpha(MIN_ALPHA + 30(scaleFactor - MIN_SCALE) / 31(1 - MIN_SCALE) * (1 - MIN_ALPHA)); 32 33} else { // (1,+Infinity] 34// This page is way off-screen to the right. 35view.setAlpha(0); 36} 37} 38 }

View Code效果图：

文章图片

文章图片

红色的为第一张，蓝色的为第二张，向左滑动显示蓝色。效果为两张图并行缩小滑动
2、DepthPageTransformer（）

文章图片

1 public class DepthPageTransformer implements ViewPager.PageTransformer { 2private static final float MIN_SCALE = 0.75f; 3 4public void transformPage(View view, float position) { 5int pageWidth = view.getWidth(); 6 7if (position < -1) { // [-Infinity,-1) 8// This page is way off-screen to the left. 9view.setAlpha(0); 10 11} else if (position < = 0) { // [-1,0] 12// Use the default slide transition when moving to the left page 13view.setAlpha(1); 14view.setTranslationX(0); 15view.setScaleX(1); 16view.setScaleY(1); 17 18} else if (position < = 1) { // (0,1] 19// Fade the page out. 20view.setAlpha(1 - position); 21 22// Counteract the default slide transition 23view.setTranslationX(pageWidth * -position); 24 25// Scale the page down (between MIN_SCALE and 1) 26float scaleFactor = MIN_SCALE 27+ (1 - MIN_SCALE) * (1 - Math.abs(position)); 28view.setScaleX(scaleFactor); 29view.setScaleY(scaleFactor); 30 31} else { // (1,+Infinity] 32// This page is way off-screen to the right. 33view.setAlpha(0); 34} 35} 36 }

View Code
效果图：

文章图片

文章图片

红色的为第一张，蓝色的为第二张，向左滑动显示蓝色。效果为红色无变化向左滑动，蓝色由淡到深，由小到大占据屏幕
注意：添加DepthPageTransformer（）和ZoomOutPageTransformer（）java文件的时候有两个错误很容易 ctrl+1都能解决

更多动画类：
下载地址:
http://yunpan.cn/cFyjVgaeIFZ4e （提取码：ff5f）