ViewPager动态变换效果之SCViewPager源码解析

序言：
我们知道在ViewPager中给我们提供了PageTransformer接口用于ViewPager切换的动画效果实现，一般我们需要实现这个接口里的transformPage方法实现切换的动画效果，这样我们就实现了ViewPager中Item之间切换的效果，例如下面的效果（摘自鸿洋博客图片）：

我们发现，这里实现的是Item之间切换的效果，但是每个Item页里面的View并没有动画效果，我们也知道在做App的Guide引导页的时候，通过几个静态的图片展示切换，效果太过平庸，所以这次我们就介绍下SCViewPager这个库如果实现Item的动态变换。效果图来一发：

开源项目地址：https://github.com/sacot41/SCViewPager

一：项目原理概述

我们通过上面的效果图发现，SCViewPager给我们提供了一种更棒的切换效果，效果比以前的静态图片切换展示确实强的太多。下面，我们就简要介绍下SCViewPager效果的实现原理。首先，必须要监听ViewPager的PageScrolled事件，当PageScrolled事件触发时，我们就进行动画的执行，这样就实现了效果。其次是效果怎么设计才能正确展示，这里就需要我们探究源码一步步解析才能明白其中的原理，我们可以简单的以SCViewPager提供的example进行研究下实现。
1、首先看example的布局文件：

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:clipChildren="true" android:clipToPadding="true" tools:context=".MainActivity">

        <com.dev.sacot41.scviewpager.SCViewPager  android:id="@+id/viewpager_main_activity" android:layout_width="match_parent" android:layout_height="match_parent">
        </com.dev.sacot41.scviewpager.SCViewPager>

        <com.dev.sacot41.scviewpager.DotsView  android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="10dp" android:id="@+id/dotsview_main" />

        <ImageView  android:id="@+id/imageview_main_activity_name_tag" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingLeft="40dp" android:paddingRight="50dp" android:layout_alignParentTop="true" android:rotation="-10" android:src="@drawable/name_tag"/>

        <ImageView  android:id="@+id/imageview_main_activity_currently_work" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="225dp" android:src="@drawable/currently_work"/>

        <ImageView  android:id="@+id/imageview_main_activity_at_skex" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="450dp" android:src="@drawable/at_skex_2"/>

        <ImageView  android:id="@+id/imageview_main_activity_commonly" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="95dp" android:layout_centerHorizontal="true" android:src="@drawable/commonly"/>

        <ImageView  android:id="@+id/imageview_main_activity_django_python" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="75dp" android:layout_marginTop="400dp" android:layout_centerHorizontal="true" android:src="@drawable/django_python"/>

        <ImageView  android:id="@+id/imageview_main_activity_mobile" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="180dp" android:layout_centerHorizontal="true" android:src="@drawable/mobile"/>

        <ImageView  android:id="@+id/imageview_main_activity_but" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:src="@drawable/but"/>

        <ImageView  android:id="@+id/imageview_main_activity_diploma" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="250dp" android:layout_centerHorizontal="true" android:src="@drawable/diploma"/>

        <ImageView  android:id="@+id/imageview_main_activity_why" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="50dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:src="@drawable/why"/>

       <ImageView  android:id="@+id/imageview_main_future" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:src="@drawable/future"/>

        <ImageView  android:id="@+id/imageview_main_arduino" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/imageview_main_future" android:layout_marginTop="20dp" android:layout_marginLeft="50dp" android:src="@drawable/arduino"/>

        <ImageView  android:id="@+id/imageview_main_raspberry_pi" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/imageview_main_arduino" android:layout_marginTop="40dp" android:layout_alignParentRight="true" android:layout_marginRight="50dp" android:src="@drawable/raspberry_pi_logo"/>

        <ImageView  android:id="@+id/imageview_main_connected_device" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="75dp" android:layout_marginLeft="50dp" android:src="@drawable/connect_device"/>

        <ImageView  android:id="@+id/imageview_main_check_out" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:src="@drawable/check_out"/>

        <TextView  android:id="@+id/textview_main_github_link" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="20dp" android:paddingRight="20dp" android:textColor="@color/theme_700" android:layout_centerHorizontal="true" android:layout_below="@id/imageview_main_check_out" android:autoLink="web" android:textAppearance="@android:style/TextAppearance.Large" android:text="https://github.com/sacot41"/>

        <TextView  android:id="@+id/textview_main_linkedin_link" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="20dp" android:paddingRight="20dp" android:textColor="@color/theme_700" android:layout_centerHorizontal="true" android:layout_marginTop="50dp" android:layout_below="@id/textview_main_github_link" android:autoLink="web" android:textAppearance="@android:style/TextAppearance.Large" android:text="https://ca.linkedin.com/pub/samuel-côté/62/211/22a"/>



    </RelativeLayout>

展现的效果：

看到这个效果图是不是一脸懵逼，确实，这种布局效果图出来跟上面的动画效果对比确实让人大吃一惊，这个就是他设计的巧妙之处，根据设计的动画效果，首先在RelativeLayout中将View的起始位置设置布局完毕。

2、接着我们看看MainActivity中怎么实现的：

package com.dev.sacot41.myresume;

import android.graphics.Point;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;

import com.dev.sacot41.scviewpager.DotsView;
import com.dev.sacot41.scviewpager.SCPositionAnimation;
import com.dev.sacot41.scviewpager.SCViewAnimation;
import com.dev.sacot41.scviewpager.SCViewAnimationUtil;
import com.dev.sacot41.scviewpager.SCViewPager;
import com.dev.sacot41.scviewpager.SCViewPagerAdapter;

public class MainActivity extends FragmentActivity {

    private static final int NUM_PAGES = 5;

    private SCViewPager mViewPager;
    private SCViewPagerAdapter mPageAdapter;
    private DotsView mDotsView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main);

        mViewPager = (SCViewPager) findViewById(R.id.viewpager_main_activity);
        mDotsView = (DotsView) findViewById(R.id.dotsview_main);
        mDotsView.setDotRessource(R.drawable.dot_selected, R.drawable.dot_unselected);
        mDotsView.setNumberOfPage(NUM_PAGES);

        mPageAdapter = new SCViewPagerAdapter(getSupportFragmentManager());
        mPageAdapter.setNumberOfPage(NUM_PAGES);
        mPageAdapter.setFragmentBackgroundColor(R.color.theme_100);
        mViewPager.setAdapter(mPageAdapter);

        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                mDotsView.selectDot(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

        final Point size = SCViewAnimationUtil.getDisplaySize(this);

        View nameTag = findViewById(R.id.imageview_main_activity_name_tag);
        SCViewAnimation nameTagAnimation = new SCViewAnimation(nameTag);
        nameTagAnimation.addPageAnimation(new SCPositionAnimation(this, 0,0,-size.y/2));
        mViewPager.addAnimation(nameTagAnimation);

        View currentlyWork = findViewById(R.id.imageview_main_activity_currently_work);
        SCViewAnimation currentlyWorkAnimation = new SCViewAnimation(currentlyWork);
        currentlyWorkAnimation.addPageAnimation(new SCPositionAnimation(this, 0, -size.x, 0));
        mViewPager.addAnimation(currentlyWorkAnimation);

        View atSkex = findViewById(R.id.imageview_main_activity_at_skex);
        SCViewAnimationUtil.prepareViewToGetSize(atSkex);
        SCViewAnimation atSkexAnimation = new SCViewAnimation(atSkex);
        atSkexAnimation.addPageAnimation(new SCPositionAnimation(getApplicationContext(), 0, 0, -( size.y - atSkex.getHeight() )));
        atSkexAnimation.addPageAnimation(new SCPositionAnimation(getApplicationContext(), 1, -size.x, 0));
        mViewPager.addAnimation(atSkexAnimation);

        View mobileView = findViewById(R.id.imageview_main_activity_mobile);
        SCViewAnimation mobileAnimation = new SCViewAnimation(mobileView);
        mobileAnimation.startToPosition((int)(size.x*1.5), null);
        mobileAnimation.addPageAnimation(new SCPositionAnimation(this, 0, -(int)(size.x*1.5), 0));
        mobileAnimation.addPageAnimation(new SCPositionAnimation(this, 1, -(int)(size.x*1.5), 0));
        mViewPager.addAnimation(mobileAnimation);

        View djangoView = findViewById(R.id.imageview_main_activity_django_python);
        SCViewAnimation djangoAnimation = new SCViewAnimation(djangoView);
        djangoAnimation.startToPosition(null, -size.y);
        djangoAnimation.addPageAnimation(new SCPositionAnimation(this, 0, 0, size.y));
        djangoAnimation.addPageAnimation(new SCPositionAnimation(this, 1, 0, size.y));
        mViewPager.addAnimation(djangoAnimation);

        View commonlyView = findViewById(R.id.imageview_main_activity_commonly);
        SCViewAnimation commonlyAnimation = new SCViewAnimation(commonlyView);
        commonlyAnimation.startToPosition(size.x, null);
        commonlyAnimation.addPageAnimation(new SCPositionAnimation(this, 0, -size.x, 0));
        commonlyAnimation.addPageAnimation(new SCPositionAnimation(this, 1, -size.x, 0));
        mViewPager.addAnimation(commonlyAnimation);

        View butView = findViewById(R.id.imageview_main_activity_but);
        SCViewAnimation butAnimation = new SCViewAnimation(butView);
        butAnimation.startToPosition(size.x, null);
        butAnimation.addPageAnimation(new SCPositionAnimation(this, 1, -size.x,0));
        butAnimation.addPageAnimation(new SCPositionAnimation(this, 2, -size.x,0));
        mViewPager.addAnimation(butAnimation);

        View diplomeView = findViewById(R.id.imageview_main_activity_diploma);
        SCViewAnimation diplomeAnimation = new SCViewAnimation(diplomeView);
        diplomeAnimation.startToPosition((size.x *2), null);
        diplomeAnimation.addPageAnimation(new SCPositionAnimation(this, 1, -size.x*2,0));
        diplomeAnimation.addPageAnimation(new SCPositionAnimation(this, 2, -size.x*2 ,0));
        mViewPager.addAnimation(diplomeAnimation);

        View whyView = findViewById(R.id.imageview_main_activity_why);
        SCViewAnimation whyAnimation = new SCViewAnimation(whyView);
        whyAnimation.startToPosition(size.x, null);
        whyAnimation.addPageAnimation(new SCPositionAnimation(this, 1, -size.x, 0));
        whyAnimation.addPageAnimation(new SCPositionAnimation(this, 2, -size.x, 0));
        mViewPager.addAnimation(whyAnimation);

        View futureView = findViewById(R.id.imageview_main_future);
        SCViewAnimation futureAnimation = new SCViewAnimation(futureView);
        futureAnimation.startToPosition(null, -size.y);
        futureAnimation.addPageAnimation(new SCPositionAnimation(this, 2, 0, size.y));
        futureAnimation.addPageAnimation(new SCPositionAnimation(this, 3, -size.x, 0));
        mViewPager.addAnimation(futureAnimation);

        View arduinoView = findViewById(R.id.imageview_main_arduino);
        SCViewAnimation arduinoAnimation = new SCViewAnimation(arduinoView);
        arduinoAnimation.startToPosition(size.x * 2, null);
        arduinoAnimation.addPageAnimation(new SCPositionAnimation(this, 2, - size.x *2, 0));
        arduinoAnimation.addPageAnimation(new SCPositionAnimation(this, 3, - size.x, 0));
        mViewPager.addAnimation(arduinoAnimation);

        View raspberryView = findViewById(R.id.imageview_main_raspberry_pi);
        SCViewAnimation raspberryAnimation = new SCViewAnimation(raspberryView);
        raspberryAnimation.startToPosition(-size.x, null);
        raspberryAnimation.addPageAnimation(new SCPositionAnimation(this, 2, size.x, 0));
        raspberryAnimation.addPageAnimation(new SCPositionAnimation(this, 3, -size.x, 0));
        mViewPager.addAnimation(raspberryAnimation);

        View connectedDeviceView = findViewById(R.id.imageview_main_connected_device);
        SCViewAnimation connectedDeviceAnimation = new SCViewAnimation(connectedDeviceView);
        connectedDeviceAnimation.startToPosition((int)(size.x *1.5), null);
        connectedDeviceAnimation.addPageAnimation(new SCPositionAnimation(this, 2, -(int) (size.x * 1.5), 0));
        connectedDeviceAnimation.addPageAnimation(new SCPositionAnimation(this, 3,  - size.x, 0));
        mViewPager.addAnimation(connectedDeviceAnimation);

        View checkOutView = findViewById(R.id.imageview_main_check_out);
        SCViewAnimation checkOutAnimation = new SCViewAnimation(checkOutView);
        checkOutAnimation.startToPosition(size.x, null);
        checkOutAnimation.addPageAnimation(new SCPositionAnimation(this, 3, -size.x, 0));
        mViewPager.addAnimation(checkOutAnimation);

        View linkedinView = findViewById(R.id.textview_main_linkedin_link);
        SCViewAnimation linkedinAnimation = new SCViewAnimation(linkedinView);
        linkedinAnimation.startToPosition(size.x, null);
        linkedinAnimation.addPageAnimation(new SCPositionAnimation(this, 3, -size.x, 0));
        mViewPager.addAnimation(linkedinAnimation);

        View githubView = findViewById(R.id.textview_main_github_link);
        SCViewAnimation githubAnimation = new SCViewAnimation(githubView);
        githubAnimation.startToPosition(size.x, null);
        githubAnimation.addPageAnimation(new SCPositionAnimation(this, 3, -size.x, 0));
        mViewPager.addAnimation(githubAnimation);
    }

}

上面的代码都是按照一个逻辑处理，首先穿件一个SCViewAnimation对象，然后调用该对象的startToPosition方法指定View的起始位置，然后在创建一个动画类型（SCPositionAnimation）添加到SCViewAnimation中即可。实现也是非常简单，主要是动画的起点、终点位置的确定。通过上面的布局和代码，我们可以看出SCViewPager使用起来是非常简单，方便的。那么我们还需要学习更深入一点，看看它的源码分析实现的原理。

二：SCViewPager源码分析

在上面我们简要的看了SCViewPager的使用，现在我们就结合源码分析下实现过程。 首先看看结构图：

（1）、DotsView：底部原点View，自定义的底部圆点
（2）、SCPageAnimation：抽象类，用于定义View的动画效果实现；
（3）、SCPositionAnimation：平移动画效果，一个SCPageAnimation实现的子类
（4）、SCSizeAnimation：大小改变动画效果，SCPageAnimation的实现子类
（5）、SCViewAnimation：视图动画，提供指定动画起始位置的startToPoSition()、addPageAnimation()和applyAnimation()方法，主要负责动画的管理。
（6）、SCViewAnimationUtil：工具类
（7）、SCViewPager：自定义的ViewPager，重写onPageScrolled()方法，实现滑动切换执行动画。
（8）、SCViewPagerAdapter：FragmentStatePagerAdapter的子类，设置ViewPager的Adapter属性。

上面我们已经简单的说了，效果的实现就是通过监听PageScrolled方法来实现，当然仅仅知道这一点还是不够的，比如这些View控件怎么布局的，动画怎么实现的，这些都是技术点，所以我们就深入到各个类学习源码的实现。

1、SCPageAnimation抽象类

public abstract class SCPageAnimation {
    public int page;
    public abstract void applyTransformation(View onView, float positionOffset);
}

在这个抽象类中定义了一个page成员变量和applyTransformation方法，page变量用于标识动画作用在第几个ViewPager页面，applyTransformation方法用于执行动画

2、SCPositionAnimation类：

public class SCPositionAnimation extends SCPageAnimation {

    public int xPosition;
    public int yPosition;

    private float xStartPosition;
    private float yStartPosition;

    /** * @param forPage page to apply animation * @param dx x moving, in dp * @param dy y moving, in dp */

    public SCPositionAnimation(Context context, int forPage, int dx, int dy) {
        this.page = forPage;
        this.xPosition = dx;
        this.yPosition = dy;
        this.xStartPosition = -1;
        this.yStartPosition = -1;
    }

    public void applyTransformation(View onView, float positionOffset) {
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) onView.getLayoutParams();

        if (positionOffset <= 0.0001) {

            xStartPosition = onView.getTranslationX();
            yStartPosition = onView.getTranslationY();

            return;
        }

        onView.setTranslationX((int)(xPosition * positionOffset) + xStartPosition);
        onView.setTranslationY((int)(yPosition * positionOffset) + yStartPosition);
        onView.requestLayout();
    }
}

类很简短，继承自SCPageAnimation，该类新增了四个成员变量用于记录控件位置。主要是applyTransformation方法中通过positionOffset(该值介于[0,1))计算View的平移位置，通过setTranslationX/Y方法达到实现效果。

3、SCSizeAnimation源码

public class SCSizeAnimation extends SCPageAnimation {

    public float dHeigh;
    public float dWidth;

    private int startHeigh;
    private int startWidth;

    /** * * @param forPage page to apply animation * @param dh height variation, in percentage * @param dw width variation, in percentage */
    public SCSizeAnimation(int forPage, float dh, float dw) {
        this.page = forPage;
        this.dHeigh = dh;
        this.dWidth = dw;
    }

    @Override
    public void applyTransformation(View onView, float positionOffset) {
        ViewGroup.LayoutParams param = onView.getLayoutParams();

        if(positionOffset <= 0) {
            startHeigh = onView.getMeasuredHeight();
            startWidth = onView.getMeasuredWidth();
            return;
        }

        param.height = (int)(dHeigh * startHeigh * positionOffset) + startHeigh;
        param.width = (int)(dWidth * startHeigh * positionOffset) + startWidth;
        onView.setLayoutParams(param);
    }
}

同样，这个类也是很简短，它新增了startHeight、startWidth两个成员变量，用于记录控件的初始宽高，在applyTransformation方法中通过获取View的LayoutParams属性进行改变控件的大小，以此来实现效果的动态变化。

4、SCViewAnimation类

public class SCViewAnimation {

    private View view;
    private HashMap<Integer, ArrayList<SCPageAnimation>> pageAnimationMap;

    public SCViewAnimation(View inView) {
        this.view = inView;
        this.pageAnimationMap = new HashMap<Integer, ArrayList<SCPageAnimation>>();
    }

    public void startToPosition(Integer xPosition, Integer yPosition) {
        if (xPosition != null) this.view.setX(xPosition);
        if (yPosition != null) this.view.setY(yPosition);
        this.view.requestLayout();
    }

    public void addPageAnimation(SCPageAnimation inPageAnimation) {
        ArrayList<SCPageAnimation> animationList = pageAnimationMap.get(inPageAnimation.page);
        if (animationList == null) animationList = new ArrayList<SCPageAnimation>();
        animationList.add(inPageAnimation);
        pageAnimationMap.put(inPageAnimation.page, animationList);
    }

    public void applyAnimation(int page, float positionOffset) {
        ArrayList<SCPageAnimation> animationList = pageAnimationMap.get(page);

        if (animationList == null) return;

        for(SCPageAnimation animation : animationList) {
            animation.applyTransformation(this.view, positionOffset);
        }
    }

}

SCViewAnimation类主要用于管理View的动画，该类包含一个HashMap

public class SCViewAnimationUtil {

    public static void prepareViewToGetSize(View view) {
        view.measure( View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),  View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
        view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
    }

    public static Point getDisplaySize(Activity activity) {
        Display display = activity.getWindowManager().getDefaultDisplay();
        final Point size = new Point();
        display.getSize(size);
        return size;
    }

}

工具类，主要有两个方法：
（1）、prepareViewToGetSize(view):调用view的measure()方法测量，获取view的宽高。
（2）、getDisplaySize(activity)：获取屏幕显示的大小

6、SCViewPager类：

public class SCViewPager extends ViewPager {

    private ArrayList<SCViewAnimation> mViewAnimation;

    public SCViewPager(Context context) {
        super(context);
        this.mViewAnimation = new ArrayList<SCViewAnimation>();
    }

    public SCViewPager(Context context, AttributeSet attr) {
        super(context, attr);
        this.mViewAnimation = new ArrayList<SCViewAnimation>();
    }

    public void addAnimation(SCViewAnimation inViewAnimation) {
        mViewAnimation.add(inViewAnimation);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        super.onPageScrolled(position, positionOffset, positionOffsetPixels);

        for (int i = 0; i < mViewAnimation.size(); i++) {
            mViewAnimation.get(i).applyAnimation(position, positionOffset);
        }

    }

}

这里是对ViewPager进行各简单的重写，重写了onPageScrolled方法，该方法包含三个参数，position页面的位置,positionOffset页面滑动的比例，取值范围[0,1)，positionOffsetPixels页面滑动的距离，单位px。在这个方法里，遍历所有的SCViewAnimation结合，然后调用applyAnimation方法执行动画。

7、SCViewPagerAdapter类

public class SCViewPagerAdapter extends FragmentStatePagerAdapter {

    private ArrayList<SCViewPagerFragment> mFragmentList;

    private int mNumberOfPage = 0;
    private int mBackgroundColor;

    public SCViewPagerAdapter(FragmentManager fm) {
        super(fm);
        mFragmentList = new ArrayList<>();
    }

    public void setNumberOfPage(int numberOfPage) {
        mNumberOfPage = numberOfPage;
    }

    public void setFragmentBackgroundColor(int colorResource) {
        mBackgroundColor = colorResource;
    }

    @Override
    public Fragment getItem(int position) {

        SCViewPagerFragment fragment = null;

        if (mFragmentList.size()-1 >= position) fragment = mFragmentList.get(position);

        if (fragment == null) {
            fragment = new SCViewPagerFragment();
            fragment.setBackground(mBackgroundColor);
        }

        return fragment;
    }

    @Override
    public int getCount() {
        return mNumberOfPage;
    }

    public static class SCViewPagerFragment extends Fragment {

        private int color;

        public SCViewPagerFragment() {
            this.color = R.color.white;
        }

        public void setBackground(int inColor) {
            this.color = inColor;
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            LinearLayout view = new LinearLayout(getActivity());
            view.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
            view.setOrientation(LinearLayout.VERTICAL);
            view.setBackgroundColor(getResources().getColor(this.color));
            return view;
        }

        @Override
        public void onActivityCreated(Bundle savedInstanceState) {
            super.onActivityCreated(savedInstanceState);
        }
    }

}

在SCViewPagerAdapter类中，我们只关注一个成员变量mNumberOfPage，用于设置我们有多少个页面，然后由系统生成相应个数的Fragment，以此达到滑动效果，这里所有的Fragment只显示包含一个LinearLayout的空布局，不包含我们动画展示的View。

至此，我们针对各个类的源码已经介绍完毕，总体的代码量不多，代码也不复杂，主要是一个巧妙。在这里，使用的Fragemnt内容是不关涉到我们的动画View，我们通过将动画View和ViewPager放在同一页面，然后通过startToPosition指定控件的位置，达到控件的隐藏效果，起始他们都是在MainActivity页面，然后将ViewPager的滑动事件绑定到动画的执行，就可以制作出效果。源码看完了，我们在结合example的例子分析下，比如：

View nameTag = findViewById(R.id.imageview_main_activity_name_tag);
SCViewAnimation nameTagAnimation = new SCViewAnimation(nameTag);
nameTagAnimation.addPageAnimation(new SCPositionAnimation(this, 0,0,-size.y/2));
mViewPager.addAnimation(nameTagAnimation);

首先获取View控件nameTag，然后创建SCViewAnimation类，传入nameTag控件进行绑定，然后添加SCPositionAnimation动画，该动画中指定page=0，dx=0,dy=-size.y/2，最后将该SCViewAnimation添加到ViewPager中的SCViewAnimation集合中。滑动进行动画效果展示。

==========
作者：mr_dsw
博客地址：http://blog.csdn.net/mr_dsw
转载注明出处，谢谢

==========