Android 打造不一样的新手引导页面（二）
这篇博客主要讲解怎样更改 ViewPager 切换的效果。
首先我们先来看一下默认的 ViewPager 的切换效果，感觉是不是很普通，因为大多数时候我们经常没有用到 ViewPager 的动画切换效果 ，这种想过见多了，也就觉得平淡了
下面我们来看一下我们自己实现的 ViewPager 页面的 切换效果，总共有 四种不同的样式
实现原理说明
其实要实现上述的 效果非常简单，只需要以下几行代码，就搞定了。
viewpager.setPageTransformer(true, new ViewPager.PageTransformer() {
@Override
public void transformPage(View page, float position) {
// do transformation here
}
});
Google 官方关于两个参数的解释是
reverseDrawingOrder boolean: true if the supplied PageTransformer requires page views to be drawn from last to first instead of first to last.
transformer ViewPager.PageTransformer: PageTransformer that will modify each page’s animation properties
第一个布尔型参数表示的意思就是在两个页面切换产生动画效果时候是否要反转一下让下一个页面在上一个页面底下，因为 ViewPager 默认下一个页面是绘制在上一个页面的上面，这里一般传入 true。
第二次参数才是重点，这里实现了 PageTransformer 接口，然后我们所有需要的动画效果都在 transformPage 这个接口方法里面实现，现在我们来看看这个方法。
transformPage void transformPage (View page,
float position)
page View: Apply the transformation to this page
position
float: Position of page relative to the current front-and-center position of the pager. 0 is front and center. 1 is one full page position to the right, and -1 is one page position to the
left.
下面我们借用一张图片来解释 position 的变化
假设当前我们屏幕中的页面是 B：
那么该页面的 position 是 1，A 页面的 position 是-1，C 页面的 position 是 1.
当我们从 B 页面滑到 c 页面的时候，B 页面的变化是从 0 减少到-1,C 页面的 变化是从 1 减少到 0，A 页面的变化是从从-1 向负无穷变化。当我们切好滑动到一半的时候 B 页面的 position 是-0.5，c 页面的 position 是 0.5。
当我们从 B 页面滑动到 A 页面的时候，B 页面的变化是**【0,1】，A 页面的变化是【-1,0】，c 页面的变化是从 1 向正无穷变化**
解释完这些参数是什么意思，下面让我们来看一下我们是怎样实现的
Google 的两个例子
首先我们先来看一下官方的两个例子，地址是：http://developer.android.com/training/animation/screen-slide.html
ZoomOutPageTransformer
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.85f;
private static final float MIN_ALPHA = 0.5f;
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);
}
}
}
运行到上述的代码，效果图如下
从上述效果图可以看到，页面切换的时候，主要是页面大小的 变化，水平移动距离的变化以及透明度的变化，这些也可以从代码中体现回来,我们主要关心[-1,1]的时候就 OK，因为在[-Infinity,-1)和(1,+Infinity]的时候是不可见的。
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
page.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) {
page.setTranslationX(horzMargin - vertMargin / 2);
} else {
page.setTranslationX(-horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
// Fade the page relative to its size.
page.setAlpha(MIN_ALPHA +
(scaleFactor - MIN_SCALE) /
(1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else { // (1,+Infinity]
// This page is way off-screen to the right.
page.setAlpha(0);
}
DepthPageTransformer
public class DepthPageTransformer implements ViewPager.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);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(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);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
运行上述代码以后，可以看到的变化是
下面来看一下我们自己实现的两个例子
评论