今天让我们了解一下，Android3.0之后ViewPager切换时候的一个动画。Google给我们展示了两个动画例子：DepthPageTransformer和ZoomOutPageTransformer，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
public class DepthPageTransformer implements PageTransformer {
private static float MIN_SCALE = 0.75f;
@SuppressLint("NewApi")
@Override
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);
}
}
} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
public class ZoomOutPageTransformer implements PageTransformer {
private static float MIN_SCALE = 0.85f;
private static 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);
}
}
} |
我们在使用的时候只需mPager.setPageTransformer(true, new DepthPageTransformer())即可，下面让我们看看transformPage方法怎么实现动画的！！！
transformPage方法有两个参数，第一个view当然就是应用动画的那个控件，第二个是一个float类型的值，不是我们平常见到的position位置，而是当前滑动状态的表示，相对于当前position的position。它有三个临界值-1 0 1，0代表当前屏幕显示的view的position，1代表当前view的下一个view所在的position，-1代表当前view的前一个view所在的position。不知道我讲清楚没有？
那么请看下面的图片：
下面让我们看看当前view左滑、右滑时各个view positon的变化情况：
好了，上面的表格大家可以通过打log的形式验证一下。知道了各个位置的view的position的变化情况，下面让我们看看动画吧。这里我们不做炫酷的动画，只做透明度的动画，方便大家理解transformPage方法。
前提不知道大家了不了解alpha这个属性，它的取值范围在0和1之间，0代表完全透明，1代表完全不透明。废话不多说看动画：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
public class ViewpagerTransformAnim implements ViewPager.PageTransformer {
@Override
public void transformPage(View page, float position) {
float alpha = 0.0f;
if (0.0f <= position && position <= 1.0f) {
alpha = 1.0f - position;
} else if (-1.0f <= position && position < 0.0f) {
alpha = position + 1.0f;
}
page.setAlpha(alpha);
}
} |
那么我们就对上面的代码简单的解释一下：不管当前view左滑还是右滑，当我滑动的时候，根据之前的表格我们知道上面的两个判断语句都会走到，这是因为你滑动的时候，肯定是两个view做动画的切换（不算两个边界，边界的话只会走一个），由于alpha取值在0和1之间，position取值在-1和1之间。所以有了条件语句中的代码。看下效果吧：
很简单的一个动画，希望对大家有所帮助！！！