138_ViewPager动画

ViewPager动画

ViewPager用的还是比较多的

但是我们都是一页一页滚动的效果

我们来给ViewPager搞一点酷炫的动画

 

神奇的是,官方提供了一些动画效果

这种细节的东西都有,还真是周到啊!

 

来看看官方文档

 

打开Develop----Training----Building Apps with Graphics&Animation----

Add Animations----Using ViewPager for Screen Slide

 

然后我们看看它是怎么教我们用ViewPager的动画的

 

先是来个ViewPager

然后初始化出来

然后setAdapter

基本步骤完成

 

然后让我们设置PageTransformer

ViewPager mPager = (ViewPager) findViewById(R.id.pager);

...

mPager.setPageTransformer(true, new ZoomOutPageTransformer());

 

然后我们把这个ZoomOutPageTransformer创建出来

public class ZoomOutPageTransformer implements ViewPager.PageTransformer{

 

}

 

然后里面怎么写,继续看文档

文档里给了我们完整的代码,

那么我们就简单粗暴一点,

直接复制过来吧

 

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);
        }
    }
}

 

OK我们运行看一下效果

 

OK,动画效果直接就出来了,就这么简单

Android确实吊啊!!!

 

下面还有一个DepthPageTransformer效果

也可以直接复制