ViewPager炫酷切换动画

ViewPager炫酷切换动画

• 前言

  ViewPager是Google在android.support.v4包中添加的一个控件。这个控件可以有加载ImageView，也可以加载View，加载Fragment，这也是我们最常用的。但是我们怎么实现ViewPager滑动炫酷的动画呢？
  首先附上图片吧，看看效果。

  

• 代码

  实现这个其实就是使用setPageTransformer切换动画，所以我们就需要自定义PageTransformer来实现动画效果，但是这个在Android 3.0（API 11）以下不兼容。但是我们现在也没有多少机型是这个以下了。好吧，那我们直接进入主题。

首先我们需要导入nineoldandroids.jar包，这是一个动画开源库。然后我们自定义一个淡入淡出的动画类吧！

package com.wj.bokedemo.view;

import android.support.v4.view.ViewPager;
import android.view.View;
import com.nineoldandroids.view.ViewHelper;

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);
            ViewHelper.setAlpha(view, 0);
        } else if (position <= 0)// a页滑动至b页 ； a页从 0.0 -1 ；b页从1 ~ 0.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);
            ViewHelper.setScaleX(view, 1);
            // view.setScaleY(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 - position);
            // view.setScaleX(scaleFactor);
            ViewHelper.setScaleX(view, scaleFactor);
            // view.setScaleY(1);
            ViewHelper.setScaleY(view, scaleFactor);

        } else
        { // (1,+Infinity]
            // This page is way off-screen to the right.
            // view.setAlpha(0);
            ViewHelper.setAlpha(view, 0);
        }
    }
}

下面是一个我们怎么调用的代码

package com.wj.bokedemo;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageView;

import com.wj.bokedemo.view.DepthPageTransformer;

/**
 * ViewPager的滑动的动画的效果
 */
public class MainActivity extends AppCompatActivity {

    private int imgs[]={R.mipmap.a,R.mipmap.b,R.mipmap.c,R.mipmap.d,R.mipmap.e,R.mipmap.f,R.mipmap.g,R.mipmap.h,R.mipmap.i,R.mipmap.j,R.mipmap.k};
    private ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        mViewPager= (ViewPager) findViewById(R.id.id_viewpager);

        //设置ViewPager的间距
        mViewPager.setPageMargin(20);
        //设置缓存页面的数量，使我们最多可见三个页面
        mViewPager.setOffscreenPageLimit(3);

        mViewPager.setPageTransformer(true,new DepthPageTransformer());
        //设置适配器
        mViewPager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return imgs.length;
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view==object;
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                ImageView imageView=new ImageView(MainActivity.this);
                imageView.setImageResource(imgs[position]);
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                container.addView(imageView);
                return imageView;
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView((View) object);
            }
        });

    }


}

好的，今天我们就简单的介绍到这里，有兴趣的童鞋，可以写写试试，到达自己想要的动画效果。